/* ==================================================
   CS-CLUTCH 2.0
   ================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --bg:#0b1220;
    --bg-light:#111827;
    --card:#161b22;

    --orange:#f97316;

    --text:#f8fafc;
    --muted:#94a3b8;

    --border:#283548;

    --radius:18px;

    --shadow:
        0 15px 40px rgba(0,0,0,.35);

}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--bg);

    color:var(--text);

    font-family:
        Inter,
        Arial,
        Helvetica,
        sans-serif;

    line-height:1.6;

}

img{

    max-width:100%;

    display:block;

}

a{

    color:inherit;

    text-decoration:none;

}

.container{

    width:min(1280px,92%);

    margin:auto;

}

section{

    padding:100px 0;

}

h1{

    font-size:72px;

    line-height:1.1;

}

h2{

    font-size:42px;

    margin-bottom:50px;

    text-align:center;

}

p{

    color:var(--muted);

}

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

.header{
    position:sticky;
    top:0;
    z-index:1000;

    backdrop-filter:blur(16px);

    background:rgba(11,18,32,.90);

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

    transition:.3s;
}

.header .container{

    height:82px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.logo{

    font-size:34px;

    font-weight:800;

    letter-spacing:1px;

    color:#fff;

}

.logo span{

    color:var(--orange);

}

nav{

    display:flex;

    align-items:center;

    gap:28px;

}

nav a{

    position:relative;

    color:#cbd5e1;

    font-weight:600;

    transition:.25s;

}

nav a:hover{

    color:#fff;

}

nav a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--orange);

    transition:.25s;

}

nav a:hover::after,
nav a.active::after{

    width:100%;

}

nav a.active{

    color:#fff;

}

.admin-btn{

    background:var(--orange);

    color:#fff;

    padding:12px 20px;

    border-radius:12px;

    font-weight:700;

    transition:.25s;

}

.admin-btn:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(249,115,22,.35);

}

/* HERO */

.hero{

    min-height:85vh;

    display:flex;

    align-items:center;

    background:
    radial-gradient(circle at right top,
    rgba(249,115,22,.15),
    transparent 45%),
    var(--bg);

}

.hero-grid{

    display:grid;

    grid-template-columns:1.2fr .8fr;

    gap:70px;

    align-items:center;

}

.hero-left h1{

    font-size:68px;

    margin:25px 0;

}

.hero-left h1 span{

    color:var(--orange);

}

.hero-left p{

    font-size:20px;

    max-width:650px;

}

.hero-buttons{

    margin-top:45px;

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 30px;

    border-radius:14px;

    font-weight:700;

    transition:.25s;

}

.btn-primary{

    background:var(--orange);

    color:white;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    border:1px solid var(--border);

}

.btn-secondary:hover{

    background:#1a2435;

}

.hero-card{

    background:#131c2d;

    border:1px solid var(--border);

    border-radius:22px;

    padding:35px;

    box-shadow:var(--shadow);

}

.hero-card-header{

    color:#22c55e;

    font-weight:bold;

    margin-bottom:25px;

}

.hero-card h3{

    font-size:34px;

    margin-bottom:25px;

}

.hero-stat{

    margin-bottom:14px;

    color:#cbd5e1;

}

.progress{

height:10px;

background:#1f2937;

border-radius:999px;

overflow:hidden;

margin:20px 0;

}

.progress-fill{

height:100%;

background:linear-gradient(90deg,#22c55e,#16a34a);

border-radius:999px;

transition:.4s;

}

.server-card p{

margin-top:12px;

font-size:16px;

color:#cbd5e1;

}

.server-card .progress{

margin:18px 0;

}

.server-card{

position:relative;

overflow:hidden;

display:flex;

flex-direction:column;

justify-content:space-between;

min-height:520px;

}

.server-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:4px;

background:linear-gradient(
90deg,
#f97316,
#fb923c
);

}

/* ==================================================
   SERVERS
================================================== */

.servers-section{
    padding:100px 0;
}

.servers-section h2{
    text-align:center;
    margin-bottom:60px;
}

.servers-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(340px,1fr));

    gap:30px;

}

.server-card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    padding:30px;

    box-shadow:var(--shadow);

    transition:.30s;

}

.server-card:hover{

    transform:translateY(-8px);

    border-color:var(--orange);

}

.server-icon{

    width:90px;

    height:90px;

    object-fit:cover;

    border-radius:18px;

    margin:0 auto 25px;

}

.server-card h3{

    text-align:center;

    font-size:30px;

    margin-bottom:20px;

}

.status{

    display:block;

    text-align:center;

    font-weight:bold;

    margin-bottom:20px;

}

.online{

    color:#22c55e;

}

.offline{

    color:#ef4444;

}

.server-card p{

    display:flex;

    justify-content:center;

    gap:10px;

    margin:12px 0;

    color:var(--muted);

}

.join-btn{

display:flex;

justify-content:center;

align-items:center;

margin-top:auto;

height:55px;

font-weight:bold;

font-size:17px;

}

.join-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(249,115,22,.35);

}

/* ==================================================
   NEWS
================================================== */

.news-section{

    padding:100px 0;

}

.news-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

    gap:35px;

}

.news-card{

    overflow:hidden;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:22px;

    transition:.3s;

}

.news-card:hover{

    transform:translateY(-8px);

    border-color:var(--orange);

}

.news-image{

    width:100%;

    height:240px;

    object-fit:cover;

}

.news-card h3{

    padding:25px 25px 10px;

    font-size:28px;

}

.news-card p{

    padding:0 25px;

}

.news-card .join-btn{

    margin:25px;

    width:auto;

}

/* ==================================================
   STATS
================================================== */

.stats-section{
    padding:100px 0;
}

.stats-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
}

.stat-box{

    background:linear-gradient(
        180deg,
        #182132,
        #131b2a
    );

    border:1px solid var(--border);

    border-radius:22px;

    padding:40px;

    text-align:center;

    transition:.3s;

}

.stat-box:hover{

    transform:translateY(-8px);

    border-color:var(--orange);

}

.stat-box h3{

    font-size:58px;

    color:var(--orange);

    margin-bottom:15px;

}

.stat-box p{

    font-size:18px;

    color:var(--muted);

}

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

.footer{

    margin-top:100px;

    background:#09101b;

    border-top:1px solid var(--border);

}

.footer-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:40px;

    padding:70px 0;

}

.footer h3{

    margin-bottom:20px;

    font-size:24px;

}

.footer p,
.footer li{

    color:var(--muted);

    margin:10px 0;

}

.footer ul{

    list-style:none;

}

.footer a{

    transition:.25s;

}

.footer a:hover{

    color:var(--orange);

}

.discord-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 24px;

    border-radius:14px;

    background:#5865F2;

    color:white;

    font-weight:bold;

}

.discord-btn:hover{

    opacity:.9;

}

.copyright{

    text-align:center;

    border-top:1px solid var(--border);

    padding:25px;

    color:#64748b;

}

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

@media (max-width:992px){

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-left p{

    margin:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-card{

    margin-top:40px;

}

}

@media (max-width:768px){

.header .container{

    height:auto;

    padding:20px 0;

    flex-direction:column;

    gap:20px;

}

nav{

    flex-wrap:wrap;

    justify-content:center;

}

h1{

    font-size:48px;

}

h2{

    font-size:34px;

}

.server-card,
.news-card,
.stat-box{

    padding:25px;

}

}

/* MENU MOBILE */

.menu-toggle{
    display:none;
    background:none;
    border:none;
    color:#fff;
    font-size:28px;
    cursor:pointer;
}

@media (max-width:768px){

    .menu-toggle{
        display:block;
    }

    nav{
        display:none;
        width:100%;
        flex-direction:column;
        gap:15px;
        padding:20px 0;
    }

    nav.active{
        display:flex;
    }

}

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

.hero-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.heroSwiper{
    width:460px;
    max-width:100%;
}

.heroSwiper .swiper-slide{
    display:flex;
    justify-content:center;
}

.hero-card{
    width:100%;
}

.swiper-pagination{
    position:relative !important;
    margin-top:20px;
}

.swiper-pagination-bullet{
    width:10px;
    height:10px;
    background:#fff;
    opacity:.35;
}

.swiper-pagination-bullet-active{
    background:#ff7a00;
    opacity:1;
}

/* ==========================
   NEWS V2
========================== */

.news-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(360px,1fr));

gap:35px;

}

.news-card{

background:#182132;

border:1px solid #24344d;

border-radius:20px;

overflow:hidden;

transition:.35s;

display:flex;

flex-direction:column;

}

.news-card:hover{

transform:translateY(-10px);

border-color:#ff7a00;

box-shadow:0 20px 40px rgba(0,0,0,.35);

}

.news-image-box{

overflow:hidden;

height:220px;

}

.news-image{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.news-card:hover .news-image{

transform:scale(1.06);

}

.news-content{

padding:25px;

display:flex;

flex-direction:column;

flex:1;

}

.news-content h3{

font-size:28px;

margin-bottom:15px;

}

.news-date{

color:#94a3b8;

margin-bottom:20px;

}

.news-content p{

color:#cbd5e1;

line-height:1.8;

margin-bottom:25px;

flex:1;

}

.news-content .join-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    width:260px;

    margin:25px auto 0;

}

/* ==========================
ARTICLE
========================== */

.article{

max-width:950px;

margin:auto;

background:#161f32;

border:1px solid #263042;

border-radius:22px;

overflow:hidden;

box-shadow:0 20px 45px rgba(0,0,0,.35);

}

.article-banner{

height:420px;

overflow:hidden;

}

.article-image{

width:100%;

height:100%;

object-fit:cover;

}

.article-body{

padding:50px;

}

.article-date{

color:#94a3b8;

margin-bottom:25px;

font-size:15px;

}

.article-body h1{

font-size:48px;

margin-bottom:35px;

}

.article-content{

font-size:19px;

line-height:2;

color:#d1d5db;

margin-bottom:45px;

}

.article-content p{

margin-bottom:22px;

}

/* ==========================
SERVERS PAGE
========================== */

.servers-page{

padding:120px 0;

}

.servers-page h1{

text-align:center;

margin-bottom:15px;

}

.servers-subtitle{

text-align:center;

margin-bottom:60px;

font-size:20px;

color:#94a3b8;

}

/* ==========================
404 PAGE
========================== */

.error-page{

    min-height:70vh;

    display:flex;

    align-items:center;

    justify-content:center;

}

.error-box{

    text-align:center;

    max-width:700px;

    margin:auto;

}

.error-box h1{

    font-size:140px;

    color:var(--orange);

    line-height:1;

}

.error-box h2{

    margin:20px 0;

}

.error-box p{

    font-size:20px;

    margin-bottom:40px;

}

.error-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

/* ==========================
NEWS PAGE
========================== */

.news-page{

padding:110px 0;

}

.news-page h1{

text-align:center;

margin-bottom:15px;

}

.news-page-subtitle{

text-align:center;

margin-bottom:60px;

font-size:20px;

color:#94a3b8;

}

.news-page .news-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(380px,1fr));

gap:35px;

}

/* ==========================
NETWORK STATS
========================== */

.network-stats{

display:grid;

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

gap:25px;

margin:50px 0;

}

.network-card{

background:#182132;

border:1px solid #29384e;

border-radius:18px;

padding:30px;

text-align:center;

transition:.3s;

}

.network-card:hover{

transform:translateY(-6px);

border-color:#ff7a00;

}

.network-card h2{

font-size:42px;

color:#ff7a00;

margin-bottom:10px;

}

.network-card p{

color:#94a3b8;

}

/* ==========================
COPY IP
========================== */

.server-ip{

display:flex;

justify-content:space-between;

align-items:center;

gap:15px;

margin:20px 0;

color:#cbd5e1;

}

.copy-btn{

background:#1f2937;

border:1px solid #374151;

color:#fff;

padding:10px 18px;

border-radius:10px;

cursor:pointer;

transition:.25s;

font-weight:bold;

}

.copy-btn:hover{

background:#ff7a00;

border-color:#ff7a00;

}

/* ==========================================
   PREMIUM SHOP 2.0
========================================== */

.shop-hero{

padding:80px 0;
text-align:center;

}

.shop-hero h1{

font-size:52px;
font-weight:800;
margin-bottom:15px;
color:#fff;

}

.shop-hero p{

font-size:18px;
color:#94a3b8;

}

.shop-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
gap:30px;
margin:50px 0;

}

.shop-card{

position:relative;
overflow:hidden;

background:#1b2333;

border:1px solid #2f3d55;

border-radius:18px;

transition:.3s;

}

.shop-card:hover{

transform:translateY(-8px);

border-color:#f97316;

box-shadow:0 15px 40px rgba(249,115,22,.25);

}

.shop-image-wrapper{

overflow:hidden;

height:230px;

}

.shop-image{

width:100%;
height:100%;
object-fit:cover;

transition:.4s;

}

.shop-card:hover .shop-image{

transform:scale(1.08);

}

.shop-badge{

position:absolute;

top:15px;
right:15px;

background:#f97316;

color:#fff;

padding:8px 15px;

font-size:12px;

font-weight:bold;

border-radius:30px;

z-index:20;

box-shadow:0 10px 25px rgba(249,115,22,.35);

}

.shop-content{

padding:25px;

}

.shop-category{

display:inline-block;

background:#111827;

padding:7px 14px;

border-radius:30px;

font-size:12px;

color:#94a3b8;

margin-bottom:15px;

}

.shop-content h2{

font-size:28px;

margin-bottom:10px;

color:#fff;

}

.shop-price{

font-size:42px;

font-weight:800;

color:#f97316;

margin:15px 0 5px;

}

.shop-days{

color:#94a3b8;

margin-bottom:20px;

}

.shop-content p{

color:#cbd5e1;

line-height:1.7;

min-height:95px;

}

.shop-btn{

display:block;

width:100%;

padding:16px;

margin-top:25px;

text-align:center;

background:linear-gradient(135deg,#f97316,#ea580c);

color:#fff;

font-weight:700;

font-size:16px;

border-radius:12px;

text-decoration:none;

transition:.25s;

}

.shop-btn:hover{

transform:translateY(-2px);

box-shadow:0 12px 30px rgba(249,115,22,.35);

}

@media(max-width:768px){

.shop-grid{

grid-template-columns:1fr;

}

.shop-hero h1{

font-size:38px;

}

.shop-content h2{

font-size:24px;

}

.shop-price{

font-size:34px;

}

.shop-image-wrapper{

height:200px;

}

}



/* ===========================
   CHECKOUT
=========================== */

.checkout-page{

padding:80px 0;

}

.checkout-box{

max-width:700px;

margin:auto;

background:#1b2333;

border:1px solid #2f3d55;

border-radius:18px;

padding:35px;

}

.checkout-summary{

padding:20px;

background:#111827;

border-radius:12px;

margin:25px 0;

}

.payment-option{

display:block;

padding:16px;

margin:15px 0;

border:1px solid #374151;

border-radius:12px;

cursor:pointer;

transition:.2s;

}

.payment-option:hover{

border-color:#f97316;

background:#182234;

}

/* ===========================
   PRODUCT BUY FORM
=========================== */

.buy-form{

margin-top:35px;

}


.buy-form label{

display:block;

font-weight:700;

font-size:15px;

color:#fff;

margin-bottom:8px;

}

.buy-form input,
.buy-form select{

width:100%;

padding:15px 18px;

background:#111827;

border:1px solid #334155;

border-radius:12px;

color:#fff;

font-size:15px;

transition:.25s;

outline:none;

}

.buy-form input:focus,
.buy-form select:focus{

border-color:#f97316;

box-shadow:0 0 0 3px rgba(249,115,22,.15);

}

.sms-box{

margin-top:35px;

background:#1b2333;

border:1px solid #2f3d55;

border-radius:16px;

padding:25px;

}

.sms-box h3{

margin-bottom:10px;

color:#f97316;

}

.sms-box p{

margin-bottom:20px;

color:#cbd5e1;

}

.sms-table{

width:100%;

border-collapse:collapse;

margin-bottom:20px;

}

.sms-table th{

background:#111827;

padding:14px;

text-align:left;

color:#f97316;

}

.sms-table td{

padding:14px;

border-bottom:1px solid #2f3d55;

color:#fff;

}

.shop-btn{

display:block;

width:100%;

padding:16px;

margin-top:25px;

background:linear-gradient(135deg,#f97316,#ea580c);

border:none;

border-radius:12px;

font-size:17px;

font-weight:700;

color:#fff;

cursor:pointer;

transition:.25s;

}

.shop-btn:hover{

transform:translateY(-2px);

box-shadow:0 12px 30px rgba(249,115,22,.35);

}



.product-page .container{
    max-width:1200px;
    margin:0 auto;
}

.product-grid{
    display:block;
}

.buy-form{

display:flex;

flex-direction:column;

gap:18px;

margin-top:35px;

}

.sms-box{

margin:30px 0;

background:#111827;

border:1px solid #334155;

border-radius:15px;

padding:25px;

}

/* ===========================
   PRODUCT SINGLE
=========================== */

.product-single{

    max-width:760px;
    margin:0 auto;

}

.product-right{

    background:#182132;

    border:1px solid #2d3d55;

    border-radius:18px;

    padding:35px;

    box-shadow:0 15px 40px rgba(0,0,0,.25);

}

.product-right h1{

    font-size:42px;

    margin-bottom:15px;

}

.product-price{

    font-size:42px;

    font-weight:800;

    color:#f97316;

    margin:20px 0;

}

.product-description{

    margin-bottom:35px;

    color:#cbd5e1;

    line-height:1.8;

}

.login-type{

    display:flex;
    gap:15px;
    margin-bottom:20px;
    flex-wrap:wrap;

}

.login-option{

    flex:1;

    background:#111827;

    border:1px solid #334155;

    border-radius:12px;

    padding:15px;

    cursor:pointer;

    color:#fff;

    transition:.25s;

}

.login-option:hover{

    border-color:#f97316;

}

.login-option input{

    margin-right:10px;

}