:root{
    --bg: #0b0714;
    --bg-alt: #181224;
    --card: #1b1530;
    --card-border: #2c2340;
    --text-dim: #8D89A5;
    --text-bright: #FFF3E2;
    --accent-gold: #FFCB5A;
    --accent-red: #FF6B47;
    --online-green: #3ddc84;
}

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
    margin:0;
    background:var(--bg);
    color:var(--text-dim);
    font-family:'Inter',sans-serif;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,107,71,0.05), transparent 40%),
        radial-gradient(circle at 85% 60%, rgba(255,203,90,0.04), transparent 45%);
}

a{color:inherit;text-decoration:none;}

/* ---------- NAVBAR ---------- */
.navbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 40px;
    background:#0e0a18;
    border-bottom:1px solid #221a35;
    position:sticky;
    top:0;
    z-index:100;
}

.nav-left{
    display:flex;
    align-items:center;
    gap:34px;
}

.brand{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:22px;
    font-weight:900;
    letter-spacing:0.5px;
}

.brand-icon{
    width:24px;
    height:24px;
    object-fit:contain;
    filter:drop-shadow(0 0 4px rgba(255,107,71,0.4));
}

.brand .altar{color:var(--accent-red);}
.brand .ffa{color:#fff;}

.nav-links{
    display:flex;
    gap:28px;
    font-weight:600;
    font-size:15px;
}

.nav-links a{
    color:#c9c5da;
    padding-bottom:6px;
    border-bottom:2px solid transparent;
    transition:color .15s ease, border-color .15s ease;
}

.nav-links a:hover{color:#fff;}

.nav-links a.active{
    color:#fff;
    border-bottom-color:var(--accent-red);
}

.nav-right{
    display:flex;
    align-items:center;
    gap:14px;
}

.online-pill{
    display:flex;
    align-items:center;
    gap:8px;
    background:#131022;
    border:1px solid #2a2240;
    padding:9px 16px;
    border-radius:8px;
    font-weight:600;
    font-size:14px;
    color:#e7e4f2;
}

.online-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--online-green);
    box-shadow:0 0 8px var(--online-green);
}

.discord-btn{
    display:flex;
    align-items:center;
    gap:8px;
    background:#5865F2;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    font-weight:700;
    font-size:14px;
}

.discord-btn:hover{background:#4a55e0;}

.discord-btn svg{width:18px;height:18px;fill:#fff;}

/* mobile nav toggle */
.nav-toggle{display:none;}

@media(max-width:980px){
    .nav-links{
        position:fixed;
        top:64px;
        left:0;
        right:0;
        background:#0e0a18;
        flex-direction:column;
        padding:20px 30px;
        gap:18px;
        border-bottom:1px solid #221a35;
        display:none;
    }
    .nav-links.open{display:flex;}
    .nav-toggle{
        display:block;
        background:none;
        border:none;
        color:#fff;
        font-size:26px;
        cursor:pointer;
    }
    .online-pill span.label{display:none;}
}

/* ---------- HERO / PAGE HEADERS ---------- */
.page-header{
    text-align:center;
    padding:90px 20px 50px;
}

.page-header h1{
    font-family:'Inter',sans-serif;
    font-weight:900;
    font-size:58px;
    color:var(--text-bright);
    margin:0 0 12px;
    letter-spacing:0.5px;
}

.page-header p{
    max-width:560px;
    margin:0 auto;
    font-size:17px;
    color:var(--text-dim);
}

/* ---------- HOME HERO ---------- */
.hero{
    padding:110px 40px 90px;
    position:relative;
    overflow:hidden;
    max-width:1280px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    align-items:center;
    gap:40px;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 30% 20%, rgba(255,107,71,0.10), transparent 55%);
    pointer-events:none;
}

.hero-text{position:relative;}

.hero .kicker{
    display:inline-block;
    color:var(--accent-gold);
    font-weight:700;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.hero h1{
    font-size:60px;
    font-weight:900;
    color:var(--text-bright);
    margin:0 0 18px;
    line-height:1.1;
}

.hero h1 span{color:var(--accent-red);}

.hero p.sub{
    max-width:520px;
    margin:0 0 36px;
    font-size:18px;
    color:var(--text-dim);
}

.hero-ctas{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-visual::before{
    content:"";
    position:absolute;
    width:340px;
    height:340px;
    background:radial-gradient(circle, rgba(255,107,71,0.25), transparent 70%);
    filter:blur(10px);
    z-index:0;
}

.hero-visual img{
    position:relative;
    z-index:1;
    width:100%;
    max-width:380px;
    filter:drop-shadow(0 20px 40px rgba(0,0,0,0.55));
    transform:rotate(-3deg);
    animation:sword-float 5s ease-in-out infinite;
}

@keyframes sword-float{
    0%,100%{transform:rotate(-3deg) translateY(0);}
    50%{transform:rotate(-3deg) translateY(-14px);}
}

.btn{
    display:inline-block;
    padding:14px 28px;
    border-radius:9px;
    font-weight:700;
    font-size:15px;
    border:none;
    cursor:pointer;
    transition:transform .15s ease, filter .15s ease;
}

.btn:hover{transform:translateY(-2px);filter:brightness(1.08);}

.btn-red{background:linear-gradient(180deg,#FF7A55,#E8552E);color:#fff;}
.btn-gold{background:linear-gradient(180deg,#FFD873,#F0A93A);color:#241705;}
.btn-outline{background:transparent;border:1px solid #362a4d;color:#e7e4f2;}

.server-ip-box{
    margin:44px 0 0;
    display:inline-flex;
    align-items:center;
    gap:14px;
    background:#131022;
    border:1px solid #2a2240;
    padding:14px 22px;
    border-radius:10px;
    font-family:'Courier New',monospace;
    font-size:16px;
    color:#fff;
}

.server-ip-box .tag{
    color:var(--text-dim);
    font-family:'Inter',sans-serif;
    font-size:13px;
}

.copy-ip-btn{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    background:#1b1530;
    border:1px solid #2c2340;
    border-radius:7px;
    color:#c9c5da;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
}

.copy-ip-btn svg{fill:currentColor;}

.copy-ip-btn:hover{
    border-color:var(--accent-red);
    color:#fff;
}

.copy-ip-btn.copied{
    background:rgba(61,220,132,0.12);
    border-color:var(--online-green);
    color:var(--online-green);
}

.online-dot.offline{
    background:#645f7d;
    box-shadow:none;
}

/* ---------- SECTIONS ---------- */
.section{
    padding:80px 40px;
    max-width:1200px;
    margin:0 auto;
}

.section-title{
    text-align:center;
    color:var(--text-bright);
    font-size:40px;
    font-weight:900;
    margin-bottom:16px;
}

.section-sub{
    text-align:center;
    color:var(--text-dim);
    max-width:520px;
    margin:0 auto 56px;
}

/* ---------- FEATURE / INFO CARDS (home) ---------- */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.feature-card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:30px 26px;
}

.feature-card .icon{
    width:44px;
    height:44px;
    border-radius:10px;
    background:linear-gradient(180deg,#FF7A55,#E8552E);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
    font-size:20px;
}

.feature-card h3{
    color:var(--text-bright);
    font-size:19px;
    margin:0 0 10px;
}

.feature-card p{
    font-size:15px;
    line-height:1.6;
    margin:0;
}

/* ---------- RANKS (crate-style cards) ---------- */
.rank-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.crate .price-row{
    display:flex;
    justify-content:center;
    align-items:baseline;
    gap:4px;
    padding:16px 0 6px;
    font-size:30px;
    font-weight:800;
    color:var(--text-bright);
}

.buy-btn{
    display:block;
    width:100%;
    text-align:center;
    padding:14px;
    border-radius:9px;
    font-weight:700;
    font-size:15px;
    color:#fff;
    margin-top:18px;
    border:none;
    cursor:pointer;
    font-family:'Inter',sans-serif;
}

.buy-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}

.crate.rank-pale{border-top-color:#a6883f;}
.crate.rank-pale:hover{border-color:#a6883f;box-shadow:0 0 26px rgba(166,136,63,.25);}
.buy-btn.pale{background:linear-gradient(180deg,#c9a852,#7d631f);}

.crate.rank-frost{border-top-color:#59CFFF;}
.crate.rank-frost:hover{border-color:#59CFFF;box-shadow:0 0 26px rgba(89,207,255,.2);}
.buy-btn.frost{background:linear-gradient(180deg,#71D9FF,#1D88C9);}

.crate.rank-blood{border-top-color:#FF3B30;}
.crate.rank-blood:hover{border-color:#FF3B30;box-shadow:0 0 26px rgba(255,59,48,.22);}
.buy-btn.blood{background:linear-gradient(180deg,#FF7A6E,#B81717);}

.crate.rank-chuds{
    background:linear-gradient(155deg,#1a0f05 0%,#0a0604 55%,#000 100%);
    border-color:#3a220c;
    border-top-color:#FF7A00;
}
.crate.rank-chuds:hover{border-color:#FF7A00;box-shadow:0 0 30px rgba(255,122,0,.3);}
.crate.rank-chuds .tier{color:#FF9A3C;}
.crate.rank-chuds .crate-title{
    color:#FF8A1F;
    text-shadow:0 0 14px rgba(255,122,0,.45), 2px 2px 0 #000;
}
.crate.rank-chuds hr{border-color:#3a220c;}
.buy-btn.chuds{
    background:linear-gradient(180deg,#FF9A2E 0%,#E85D00 60%,#7a2e00 100%);
    color:#0a0604;
    border:1px solid #000;
    box-shadow:inset 0 -3px 0 rgba(0,0,0,.45);
}

/* ---------- CRATES ---------- */
.crate-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.crate{
    background:linear-gradient(155deg,#171125,#100c1c);
    border:1px solid var(--card-border);
    border-top:3px solid var(--card-border);
    border-radius:16px;
    padding:30px 28px;
    display:flex;
    flex-direction:column;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.crate:hover{transform:translateY(-6px);}

.crate-shard{
    display:block;
    width:88px;
    height:88px;
    object-fit:contain;
    margin:0 auto 14px;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,0.45));
}

.crate .tier{
    text-align:center;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--text-dim);
}

.crate .crate-title{
    text-align:center;
    font-size:28px;
    font-weight:800;
    color:var(--text-bright);
    margin:10px 0;
}

.crate .crate-desc{
    text-align:center;
    color:var(--text-dim);
    font-size:14px;
    margin-bottom:22px;
}

.crate hr{
    border:none;
    border-top:1px solid var(--card-border);
    margin:0 0 6px;
}

.crate .list{flex:1;}

.crate .row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:11px 0;
    border-bottom:1px solid #1e1832;
    font-size:14px;
    color:#c9c5da;
}

.crate .row:last-child{border-bottom:none;}

.tag{
    font-size:11px;
    font-weight:700;
    letter-spacing:0.5px;
    padding:4px 9px;
    border:1px solid currentColor;
    border-radius:5px;
    white-space:nowrap;
}

.tag.common{color:#9a9aa8;}
.tag.rare{color:#4fe3c1;}
.tag.epic{color:#b98cf0;}
.tag.legendary{color:#f2c94c;}
.tag.mythic{color:#f25c6e;}
.tag.exclusive{color:#c9a9f5;}

.crate.earth{border-top-color:#b06a3a;}
.crate.earth:hover{border-color:#b06a3a;box-shadow:0 0 26px rgba(176,106,58,.2);}
.crate .buy-btn.earth-btn{background:linear-gradient(180deg,#c98450,#8f5326);}

.crate.frost{border-top-color:#7fd6f2;}
.crate.frost:hover{border-color:#7fd6f2;box-shadow:0 0 26px rgba(127,214,242,.2);}
.crate .buy-btn.frost-btn{background:linear-gradient(180deg,#95e0f7,#3fa8ca);}

.crate.blood{border-top-color:#d43b4a;}
.crate.blood:hover{border-color:#d43b4a;box-shadow:0 0 26px rgba(212,59,74,.2);}
.crate .buy-btn.blood-btn{background:linear-gradient(180deg,#ea5f6c,#9c1d2a);}

.crate-note{
    text-align:center;
    margin-top:44px;
    padding:28px;
    border:1px dashed #362a4d;
    border-radius:16px;
    color:var(--text-dim);
}

/* ---------- RULES ---------- */
.rules-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:44px;
}

.rule-card h2{
    color:var(--accent-gold);
    font-size:24px;
    font-weight:800;
    margin-bottom:16px;
}

.rule-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.rule-card li{
    font-size:15px;
    line-height:1.7;
    margin-bottom:12px;
    position:relative;
    padding-left:20px;
    color:var(--text-dim);
}

.rule-card li::before{
    content:"▸";
    color:var(--accent-red);
    position:absolute;
    left:0;
    top:1px;
    font-size:13px;
    font-weight:bold;
}

.rule-card strong{color:var(--text-bright);}

/* ---------- INFO PAGE ---------- */
.info-block{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:16px;
    padding:34px 36px;
    margin-bottom:28px;
}

.info-block h2{
    color:var(--text-bright);
    font-size:22px;
    margin:0 0 20px;
    display:flex;
    align-items:center;
    gap:10px;
}

.info-block h2::before{
    content:"";
    width:6px;
    height:22px;
    background:var(--accent-red);
    border-radius:3px;
    display:inline-block;
}

.info-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px 28px;
    font-size:15px;
    color:#c9c5da;
}

.info-row .k{color:var(--text-dim);margin-right:6px;}

code, .code{
    background:#100c1c;
    border:1px solid #2a2240;
    padding:3px 9px;
    border-radius:6px;
    color:var(--accent-gold);
    font-family:'Courier New',monospace;
    font-size:14px;
}

.command-list{
    list-style:none;
    margin:0;
    padding:0;
}

.command-list li{
    padding:14px 0;
    border-bottom:1px solid #241d38;
    font-size:15px;
    line-height:1.6;
}

.command-list li:last-child{border-bottom:none;}

.command-list .cmd{
    color:var(--accent-gold);
    font-family:'Courier New',monospace;
    font-weight:700;
    margin-right:10px;
}

.command-list .cmd-args{
    color:#a89ecb;
    font-family:'Courier New',monospace;
    font-weight:600;
}

.command-list .cmd-desc{color:var(--text-dim);}

.link-inline{
    color:var(--accent-red);
    text-decoration:underline;
    text-underline-offset:3px;
}

/* ---------- FOOTER ---------- */
footer{
    border-top:1px solid #221a35;
    padding:56px 40px 30px;
}

.footer-grid{
    display:flex;
    justify-content:space-between;
    max-width:1200px;
    margin:0 auto;
    flex-wrap:wrap;
    gap:40px;
}

.footer-brand{max-width:340px;}

.footer-brand .brand{margin-bottom:14px;}

.footer-brand p{font-size:14px;line-height:1.6;}

.footer-col h4{
    color:var(--accent-gold);
    font-size:13px;
    letter-spacing:1px;
    margin:0 0 16px;
}

.footer-col a{
    display:block;
    font-size:14px;
    color:var(--text-dim);
    margin-bottom:12px;
}

.footer-col a:hover{color:#fff;}

.footer-bottom{
    max-width:1200px;
    margin:44px auto 0;
    padding-top:24px;
    border-top:1px solid #1c1630;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    font-size:13px;
    color:#645f7d;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
    .rank-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:1000px){
    .crate-grid, .rules-grid, .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }
    .hero{grid-template-columns:1fr;text-align:center;padding-top:80px;}
    .hero-text{order:2;}
    .hero-text .hero-ctas{justify-content:center;}
    .hero-text p.sub{margin-left:auto;margin-right:auto;}
    .hero-visual{order:1;}
    .hero-visual img{max-width:260px;}
    .server-ip-box{margin-left:auto;margin-right:auto;}
    .hero h1{font-size:46px;}
    .page-header h1{font-size:42px;}
}

@media(max-width:700px){
    .rank-grid, .crate-grid, .rules-grid, .feature-grid{
        grid-template-columns:1fr;
    }
    .navbar{padding:16px 20px;}
    .hero{padding:70px 20px 50px;}
    .hero h1{font-size:36px;}
    .section{padding:56px 20px;}
    .page-header{padding:70px 20px 40px;}
    .page-header h1{font-size:34px;}
    .footer-grid{flex-direction:column;}
}

/* ---------- CHECKOUT MODAL ---------- */
.checkout-overlay{
    position:fixed;
    inset:0;
    background:rgba(5,3,10,0.72);
    backdrop-filter:blur(4px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:1000;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
}

.checkout-overlay.open{
    opacity:1;
    pointer-events:auto;
}

.checkout-modal{
    width:100%;
    max-width:480px;
    max-height:90vh;
    overflow-y:auto;
    background:#0d0a17;
    border:1px solid #2c2340;
    border-radius:16px;
    box-shadow:0 30px 70px rgba(0,0,0,0.6);
    transform:translateY(14px) scale(.98);
    transition:transform .2s ease;
}

.checkout-overlay.open .checkout-modal{
    transform:translateY(0) scale(1);
}

.checkout-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 26px;
    border-bottom:1px solid #221a35;
}

.checkout-head h3{
    font-family:'Silkscreen',monospace;
    font-size:18px;
    color:var(--text-bright);
    margin:0;
    letter-spacing:0.5px;
}

.checkout-close{
    background:none;
    border:none;
    color:#8D89A5;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    padding:4px;
}

.checkout-close:hover{color:#fff;}

.checkout-body{padding:26px;}

.checkout-kicker{
    font-family:'Silkscreen',monospace;
    font-size:11px;
    letter-spacing:1px;
    color:#6f6a89;
    margin-bottom:22px;
}

.checkout-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 0;
    border-bottom:1px solid #1e1832;
    font-size:15px;
    color:#e7e4f2;
}

.checkout-row.muted{
    color:#8D89A5;
    font-size:13px;
    border-bottom:1px solid #1e1832;
}

.checkout-strong{font-weight:800;color:var(--text-bright);}

.checkout-divider{
    border:none;
    border-top:1px solid #1e1832;
    margin:14px 0 0;
}

.total-row{
    border-bottom:none;
    padding-top:18px;
}

.checkout-label{
    font-family:'Silkscreen',monospace;
    font-size:12px;
    letter-spacing:1px;
    color:#8D89A5;
}

.checkout-total{
    font-family:'Silkscreen',monospace;
    font-size:20px;
    color:var(--accent-gold);
}

.discord-box{
    margin-top:26px;
    border:1px solid #5865F2;
    border-radius:12px;
    padding:22px 20px;
    background:rgba(88,101,242,0.06);
}

.discord-box-title{
    font-family:'Silkscreen',monospace;
    font-size:13px;
    color:#8f97ff;
    margin-bottom:12px;
    letter-spacing:0.3px;
}

.discord-note{
    margin:0 0 18px;
    font-size:14px;
    line-height:1.6;
    color:#c9c5da;
}

.join-discord-btn{
    display:block;
    text-align:center;
    background:#5865F2;
    color:#fff;
    font-family:'Silkscreen',monospace;
    font-size:13px;
    letter-spacing:0.3px;
    padding:15px;
    border-radius:8px;
}

.join-discord-btn:hover{background:#4a55e0;}

.proceed-btn{
    display:block;
    width:100%;
    margin-top:24px;
    padding:16px;
    border-radius:10px;
    border:none;
    background:linear-gradient(180deg,#FFD873,#F0A93A);
    color:#241705;
    font-family:'Silkscreen',monospace;
    font-size:14px;
    letter-spacing:0.5px;
    cursor:pointer;
    transition:.2s ease;
}

.proceed-btn:hover{filter:brightness(1.07);transform:translateY(-1px);}

.checkout-footer-note{
    text-align:center;
    font-size:12px;
    color:#645f7d;
    margin-top:20px;
}

@media(max-width:520px){
    .checkout-modal{max-width:100%;}
    .checkout-body{padding:20px;}
}