*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
scroll-behavior:smooth;
}

body{
background:#050505;
color:white;
overflow-x:hidden;
}

.bg{
position:fixed;
inset:0;
background:radial-gradient(circle at top, rgba(255,0,0,0.2), transparent 60%);
z-index:-1;
}

nav{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
padding:20px 40px;
background:#000000cc;
backdrop-filter:blur(10px);
z-index:1000;
}

nav h1{
color:#ef4444;
}

.links{
display:flex;
gap:25px;
}

.links a{
color:#ccc;
text-decoration:none;
transition:0.3s;
}

.links a:hover{
color:#ef4444;
}

.hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
padding:120px 20px;
}

.badge{
padding:10px 20px;
border:1px solid #ef4444;
border-radius:999px;
margin-bottom:20px;
background:#220000;
}

.hero h2{
font-size:90px;
font-weight:900;
}

.hero h2 span{
color:#ef4444;
}

.hero p{
margin-top:20px;
color:#aaa;
font-size:22px;
}

.buttons{
margin-top:30px;
display:flex;
gap:20px;
flex-wrap:wrap;
justify-content:center;
}

button{
padding:15px 28px;
border:none;
border-radius:16px;
background:#dc2626;
color:white;
font-weight:bold;
cursor:pointer;
transition:0.3s;
}

button:hover{
background:#ef4444;
}

.cards,.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:20px;
width:100%;
max-width:1000px;
margin-top:40px;
}

.card,.feature{
background:#111111cc;
border:1px solid #333;
padding:30px;
border-radius:24px;
transition:0.3s;
}

.card:hover,.feature:hover{
transform:translateY(-5px);
border-color:#ef4444;
}

section{
padding:100px 20px;
text-align:center;
}

section h2{
font-size:50px;
margin-bottom:20px;
}

.discord{
background:#120000;
}

footer{
text-align:center;
padding:40px;
color:#777;
}

.chatbot{
position:fixed;
bottom:20px;
right:20px;
z-index:9999;
}

.chat-toggle{
width:70px;
height:70px;
border-radius:50%;
font-size:28px;
}

.chat-window{
display:none;
flex-direction:column;
width:320px;
height:420px;
background:#0a0a0a;
border:1px solid #333;
border-radius:24px;
overflow:hidden;
position:absolute;
bottom:90px;
right:0;
}

.chat-header{
padding:15px;
background:#111;
color:#ef4444;
font-weight:bold;
}

.messages{
flex:1;
padding:15px;
overflow-y:auto;
}

.bot,.user{
padding:10px 15px;
border-radius:16px;
margin-bottom:10px;
max-width:80%;
}

.bot{
background:#2a0000;
}

.user{
background:#222;
margin-left:auto;
}

.chat-input{
display:flex;
border-top:1px solid #222;
}

.chat-input input{
flex:1;
padding:15px;
background:#111;
color:white;
border:none;
outline:none;
}

@media(max-width:768px){

.links{
display:none;
}

.hero h2{
font-size:60px;
}

section h2{
font-size:36px;
}

}