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

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

body{
font-family:'Kanit',sans-serif;
background:#fff;
color:#222;
line-height:1.6;
}

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

.navbar{
width:100%;
background:#292929;
min-height:64px;
display:flex;
align-items:center;
padding:0 28px;
}

.navbar-inner{
width:100%;
max-width:1180px;
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
}

.logo{
color:#ffd21c;
font-size:25px;
font-weight:700;
}

.nav-links{
display:flex;
gap:24px;
align-items:center;
}

.nav-links a{
color:#ddd;
font-size:14px;
transition:.2s;
}

.nav-links a:hover,
.nav-links a.active{
color:#ffd21c;
}

.page{
max-width:1100px;
margin:0 auto;
padding:28px 15px 55px;
}

.page-title{
font-size:24px;
font-weight:600;
margin-bottom:14px;
}

.section-title{
font-size:22px;
font-weight:600;
margin:30px 0 12px;
}

/* =========================
RATES
========================= */

.rates-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:17px;
}

.rate-box{
min-height:128px;
background:#292929;
border-radius:4px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
padding:18px 10px;
transition:.2s;
}

.rate-box:hover{
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,.14);
}

.rate-title{
color:#bcbcbc;
font-size:14px;
font-weight:300;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:7px;
}

.rate-value{
color:#ffd21c;
font-size:31px;
line-height:1.15;
font-weight:700;
}

/* =========================
INFO
========================= */

.info-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:17px;
}

.info-box{
background:#292929;
border-radius:4px;
padding:20px 23px;
min-height:96px;
}

.info-label{
color:#aaa;
font-size:13px;
letter-spacing:.8px;
text-transform:uppercase;
}

.info-value{
color:#fff;
font-size:18px;
font-weight:500;
}

.yellow{
color:#ffd21c!important;
}

.online{
display:inline-flex;
align-items:center;
gap:8px;
color:#4ade80;
}

.dot{
width:9px;
height:9px;
border-radius:50%;
background:#4ade80;
box-shadow:0 0 8px rgba(74,222,128,.8);
}

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

.feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:17px;
}

.feature{
background:#292929;
border-radius:4px;
padding:22px;
}

.feature h3{
color:#ffd21c;
font-size:18px;
margin-bottom:6px;
}

.feature p{
color:#c7c7c7;
font-size:14px;
font-weight:300;
}

/* =========================
OUR COMMITMENT
========================= */

.long-term{
margin-top:17px;
}

.long-term h3{
color:#ffd21c;
font-size:18px;
margin-bottom:10px;
}

.long-term p{
color:#c7c7c7;
font-size:14px;
font-weight:300;
margin-bottom:10px;
}

.long-term p:last-of-type{
margin-bottom:18px;
}

.commitment-list{
display:flex;
flex-wrap:wrap;
gap:10px 25px;
padding-top:4px;
}

.commitment{
display:flex;
align-items:center;
gap:8px;
color:#fff;
font-size:14px;
font-weight:400;
}

.commitment span{
color:#4ade80;
font-size:16px;
font-weight:700;
}

/* =========================
STEPS
========================= */

.steps{
display:grid;
gap:14px;
}

.step{
display:flex;
gap:18px;
align-items:flex-start;
background:#292929;
border-radius:4px;
padding:20px;
}

.step-number{
flex:0 0 42px;
height:42px;
border-radius:50%;
background:#ffd21c;
color:#292929;
display:flex;
align-items:center;
justify-content:center;
font-weight:700;
font-size:19px;
}

.step h3{
color:#ffd21c;
font-size:18px;
margin-bottom:3px;
}

.step p{
color:#c8c8c8;
font-size:14px;
font-weight:300;
}

/* =========================
COMMAND
========================= */

.command-box{
margin-top:18px;
background:#292929;
border-radius:4px;
padding:20px;
}

.command-box h3{
color:#ffd21c;
margin-bottom:10px;
}

.command{
display:inline-block;
background:#1e1e1e;
color:#fff;
border:1px solid #444;
border-radius:4px;
padding:8px 12px;
margin:4px 5px 4px 0;
font-family:monospace;
}

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

.footer{
background:#292929;
color:#aaa;
text-align:center;
padding:20px 15px;
font-size:13px;
}

.footer strong{
color:#ffd21c;
}

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

@media(max-width:900px){

.rates-grid{
    grid-template-columns:repeat(2,1fr);
}

.feature-grid{
    grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:600px){

.navbar{
    padding:0 15px;
}

.nav-links{
    gap:12px;
}

.nav-links a{
    font-size:12px;
}

.page{
    padding:22px 12px 40px;
}

.rates-grid,
.info-grid,
.feature-grid{
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.rate-box{
    min-height:115px;
}

.rate-title{
    font-size:12px;
}

.rate-value{
    font-size:27px;
}

.feature{
    padding:18px;
}

.feature h3{
    font-size:16px;
}

.long-term{
    margin-top:12px;
}

.commitment-list{
    gap:8px 18px;
}

.commitment{
    font-size:13px;
}

.step{
    padding:16px;
    gap:12px;
}

}

@media(max-width:400px){

.logo{
    font-size:21px;
}

.nav-links{
    gap:8px;
}

.rates-grid,
.info-grid,
.feature-grid{
    grid-template-columns:1fr;
}

.long-term{
    margin-top:12px;
}

.commitment-list{
    flex-direction:column;
    gap:7px;
}

}

/* =========================
NPC WARP
========================= */

.npc-warp-card{
display:flex;
gap:20px;
margin:17px 0;
padding:20px;
background:#292929;
border-radius:4px;
}

.npc-warp-image{
flex:0 0 240px;
display:flex;
align-items:flex-start;
justify-content:center;
}

.npc-warp-image img{
display:block;
width:100%;
max-width:240px;
height:auto;
object-fit:contain;
}

.npc-warp-content{
flex:1;
min-width:0;
}

.npc-warp-content h3{
color:#ffd21c;
font-size:18px;
font-weight:600;
margin-bottom:6px;
}

.npc-description{
color:#c7c7c7;
font-size:14px;
font-weight:300;
line-height:1.6;
margin-bottom:15px;
}

.warp-list{
display:grid;
gap:10px;
}

.warp-item{
display:flex;
align-items:flex-start;
gap:12px;
padding:12px 14px;
background:#1e1e1e;
border-radius:4px;
}

.warp-number{
flex:0 0 32px;
width:32px;
height:32px;
border-radius:50%;
background:#ffd21c;
color:#292929;
display:flex;
align-items:center;
justify-content:center;
font-size:14px;
font-weight:700;
}

.warp-info{
flex:1;
min-width:0;
}

.warp-info h4{
color:#fff;
font-size:15px;
font-weight:500;
margin:0 0 2px;
}

.warp-info p{
color:#aaa;
font-size:13px;
font-weight:300;
line-height:1.5;
margin:0;
}

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

@media(max-width:768px){

.npc-warp-card{
    flex-direction:column;
    gap:15px;
    padding:18px;
}

.npc-warp-image{
    flex:0 0 auto;
    width:100%;
    justify-content:flex-start;
}

.npc-warp-image img{
    max-width:240px;
}

}

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

@media(max-width:400px){

.npc-warp-card{
    padding:16px;
}

.npc-warp-image img{
    max-width:100%;
}

.npc-warp-content h3{
    font-size:16px;
}

.npc-description{
    font-size:13px;
}

.warp-item{
    padding:10px 12px;
}

.warp-number{
    flex:0 0 30px;
    width:30px;
    height:30px;
    font-size:13px;
}

.warp-info h4{
    font-size:14px;
}

.warp-info p{
    font-size:12px;
}

}

/* =========================
   BUG FIXES PAGE
   Add this section to style.css
========================= */

.bug-intro{
    color:#777;
    font-size:14px;
    font-weight:300;
    line-height:1.8;
    max-width:900px;
    margin-bottom:25px;
}

.bug-list{
    display:grid;
    gap:17px;
}

.bug-card{
    background:#292929;
    border-radius:4px;
    padding:22px;
}

.bug-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:15px;
    padding-bottom:17px;
    border-bottom:1px solid #3d3d3d;
}

.bug-header h3{
    color:#ffd21c;
    font-size:19px;
    font-weight:600;
    margin-bottom:2px;
}

.bug-date{
    color:#999;
    font-size:12px;
    font-weight:300;
}

.bug-status{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:70px;
    padding:5px 10px;
    border-radius:3px;
    background:#183b28;
    border:1px solid #2f754d;
    color:#4ade80;
    font-size:11px;
    font-weight:600;
    letter-spacing:.5px;
}

.bug-description{
    padding-top:17px;
}

.bug-description p{
    color:#c7c7c7;
    font-size:14px;
    font-weight:300;
    line-height:1.7;
    margin-bottom:10px;
}

.bug-description p:last-child{
    margin-bottom:0;
}

.bug-items{
    display:grid;
    gap:10px;
    margin-top:17px;
}

.bug-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px 14px;
    background:#1e1e1e;
    border-radius:4px;
}

.bug-icon{
    flex:0 0 28px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#183b28;
    color:#4ade80;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:700;
}

.bug-content{
    flex:1;
    min-width:0;
}

.bug-content h4{
    color:#fff;
    font-size:15px;
    font-weight:500;
    margin:0 0 3px;
}

.bug-content p{
    color:#aaa;
    font-size:13px;
    font-weight:300;
    line-height:1.5;
    margin:0;
}

.known-card{
    display:flex;
    align-items:flex-start;
    gap:15px;
    background:#292929;
    border-radius:4px;
    padding:20px;
}

.known-icon{
    flex:0 0 38px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#3b3218;
    border:1px solid #75652f;
    color:#ffd21c;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    font-weight:700;
}

.known-card h3{
    color:#ffd21c;
    font-size:17px;
    margin-bottom:4px;
}

.known-card p{
    color:#aaa;
    font-size:13px;
    font-weight:300;
    line-height:1.6;
    margin:0;
}

.commitment-text{
    color:#c7c7c7;
    font-size:14px;
    font-weight:300;
    line-height:1.7;
    margin-bottom:16px;
}

@media(max-width:600px){

    .bug-intro{
        font-size:13px;
        line-height:1.7;
    }

    .bug-card{
        padding:18px;
    }

    .bug-header{
        gap:10px;
    }

    .bug-header h3{
        font-size:17px;
    }

    .bug-status{
        min-width:62px;
        padding:4px 8px;
        font-size:10px;
    }

    .bug-description p{
        font-size:13px;
    }

    .bug-item{
        padding:11px 12px;
        gap:10px;
    }

    .bug-icon{
        flex:0 0 26px;
        width:26px;
        height:26px;
        font-size:14px;
    }

    .bug-content h4{
        font-size:14px;
    }

    .bug-content p{
        font-size:12px;
    }

    .known-card{
        padding:17px;
        gap:12px;
    }

    .known-icon{
        flex:0 0 34px;
        width:34px;
        height:34px;
        font-size:17px;
    }
}

@media(max-width:400px){

    .bug-card{
        padding:16px;
    }

    .bug-header{
        flex-direction:column;
    }

    .bug-status{
        align-self:flex-start;
    }

    .bug-item{
        padding:10px;
    }

    .known-card{
        padding:15px;
    }
}