@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800;900&family=Exo+2:wght@500;600;700;800&display=swap');

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#05070c;color:#fff;font-family:'Exo 2',sans-serif}

.brillx{
min-height:100vh;
padding-bottom:60px;
background:
radial-gradient(circle at 50% 10%,rgba(255,70,20,.25),transparent 30%),
linear-gradient(180deg,#0c0f18,#05070c 55%,#020305);
}

.navx{
height:78px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 80px;
background:rgba(0,0,0,.85);
border-bottom:1px solid #ff4b18;
}

.brandx{
font-family:Orbitron,sans-serif;
font-size:34px;
font-weight:900;
color:#fff;
text-decoration:none;
}

.brandx span{color:#ff3518;margin-left:8px}

.navx nav{display:flex;gap:30px}
.navx a{color:#d9d9d9;text-decoration:none;font-weight:800}
.navx a:hover{color:#ff5b22}

.topx{
border:1px solid #ff4b18;
padding:13px 28px;
color:#fff!important;
}

.herox{
height:420px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.pre{
font-family:Orbitron,sans-serif;
letter-spacing:5px;
font-size:16px;
color:#ccc;
}

.heroText h1{
font-family:Orbitron,sans-serif;
font-size:110px;
line-height:.9;
margin:20px 0;
color:#fff;
}

.heroText h1 span{color:#ff3518}

.section-block{
max-width:1300px;
margin:0 auto;
padding:45px 30px;
}

.section-block h2{
text-align:center;
font-family:Orbitron,sans-serif;
font-size:38px;
margin:0 0 30px;
}

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

.server-card{
min-height:330px;
padding:30px;
text-align:center;
text-decoration:none;
border:2px solid currentColor;
border-radius:24px;
background:rgba(0,0,0,.75);
color:#fff;
box-shadow:0 25px 70px rgba(0,0,0,.55), inset 0 0 80px rgba(255,255,255,.04);
}

.server-card h3{
font-family:Orbitron,sans-serif;
font-size:46px;
margin:0 0 18px;
}

.server-card span{
display:block;
font-size:24px;
font-weight:800;
color:#fff;
margin-bottom:22px;
}

.server-card p{
font-size:24px;
font-weight:800;
line-height:1.45;
color:#fff;
}

.server-card button{
margin-top:20px;
padding:14px 28px;
border-radius:12px;
border:1px solid currentColor;
background:transparent;
color:#fff;
font-weight:900;
cursor:pointer;
}

.aqua{color:#00eaff}
.green{color:#69ff22}
.blue{color:#168cff}
.black{color:#ccc}

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

.info-grid div,
.discord-box{
background:rgba(0,0,0,.75);
border:1px solid #333;
border-radius:20px;
padding:30px;
}

.info-grid h3,
.discord-box h3{
color:#ff5b22;
font-size:26px;
margin:0 0 12px;
}

.info-grid p,
.discord-box p{
font-size:20px;
color:#ccc;
line-height:1.5;
}

.discord-box{
max-width:760px;
margin:0 auto;
text-align:center;
}

.discord-box a{
display:inline-block;
margin-top:18px;
padding:16px 42px;
border:1px solid #ff4b18;
color:#fff;
text-decoration:none;
font-weight:900;
}

@media(max-width:1000px){
.navx{height:auto;padding:20px;flex-wrap:wrap}
.navx nav{display:none}
.heroText h1{font-size:64px}
.server-grid,.info-grid{grid-template-columns:1fr}
}

.heroText h1{
display:flex !important;
flex-direction:row !important;
align-items:center !important;
justify-content:center !important;
gap:18px !important;

font-family:'Orbitron',sans-serif !important;
font-size:110px !important;
font-weight:900 !important;

line-height:1 !important;

margin:20px 0 !important;

color:#f1f1f1 !important;

text-shadow:
0 0 25px rgba(255,255,255,.08),
0 0 45px rgba(0,0,0,.65);
}

.heroText h1 br{
display:none !important;
}

.heroText h1 span{
display:inline-block !important;

background:
linear-gradient(180deg,
#ff4b1f 0%,
#ff2e00 45%,
#961100 100%);

-webkit-background-clip:text;
color:transparent !important;

margin-left:4px;

text-shadow:
0 0 24px rgba(255,70,20,.35);
}

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

@media(max-width:768px){

body{
overflow-x:hidden;
}

.brillx{
width:100%;
min-height:100vh;
}

.navx{
height:auto !important;
padding:16px 18px !important;
display:flex !important;
flex-direction:column !important;
gap:14px !important;
align-items:center !important;
}

.brandx{
font-size:30px !important;
gap:7px !important;
text-align:center;
}

.brandx span{
font-size:30px !important;
}

.navx nav{
display:flex !important;
flex-wrap:wrap !important;
justify-content:center !important;
gap:14px !important;
}

.navx nav a{
font-size:13px !important;
}

.topx{
padding:11px 20px !important;
font-size:12px !important;
}

.herox{
height:auto !important;
padding:55px 18px 40px !important;
}

.pre{
font-size:12px !important;
letter-spacing:3px !important;
line-height:1.6;
}

.heroText h1{
font-size:48px !important;
gap:10px !important;
flex-wrap:wrap !important;
}

.section-block{
padding:35px 16px !important;
}

.section-block h2{
font-size:30px !important;
margin-bottom:22px !important;
}

.server-grid{
grid-template-columns:1fr !important;
gap:18px !important;
}

.server-card{
min-height:auto !important;
padding:26px 18px !important;
border-radius:20px !important;
}

.server-card h3{
font-size:38px !important;
}

.server-card span{
font-size:20px !important;
}

.server-card p{
font-size:20px !important;
}

.server-card button{
width:100% !important;
padding:14px 18px !important;
font-size:13px !important;
}

.info-grid{
grid-template-columns:1fr !important;
gap:18px !important;
}

.info-grid div,
.discord-box{
padding:24px 18px !important;
border-radius:18px !important;
}

.info-grid h3,
.discord-box h3{
font-size:22px !important;
}

.info-grid p,
.discord-box p{
font-size:18px !important;
}

.discord-box a{
width:100% !important;
padding:15px 18px !important;
}

}

@media(max-width:420px){

.heroText h1{
font-size:40px !important;
}

.brandx,
.brandx span{
font-size:26px !important;
}

.navx nav a{
font-size:12px !important;
}

.server-card h3{
font-size:34px !important;
}

}