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

body{
  font-family:Arial,Helvetica,sans-serif;
  background:#05070d;
  color:white;
}

header{
  height:82px;
  padding:0 4%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(4,7,15,.96);
  border-bottom:1px solid rgba(139,92,246,.35);
  position:sticky;
  top:0;
  z-index:10;
}

.brand{
  font-size:25px;
  font-weight:900;
}

.brand span,
h1 span{
  color:#8b5cf6;
}

nav{
  display:flex;
  gap:42px;
}

nav a,.discord{
  color:white;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:1px;
}

.discord{
  padding:13px 28px;
  border:1px solid #8b5cf6;
  border-radius:8px;
  box-shadow:0 0 18px rgba(139,92,246,.6);
}

.hero{
  min-height:690px;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.2),#05070d),
    url('assets/banner2.png') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.hero-overlay{
  padding:40px;
}

h1{
  font-size:105px;
  line-height:1;
  font-weight:1000;
  letter-spacing:2px;
  text-shadow:0 0 30px black;
}

.hero p{
  margin-top:18px;
  font-size:34px;
  text-transform:uppercase;
  letter-spacing:7px;
  color:#e5e7eb;
}

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

.btn{
  padding:20px 38px;
  border-radius:8px;
  text-decoration:none;
  color:white;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:1px;
}

.purple{
  background:rgba(139,92,246,.45);
  border:1px solid #8b5cf6;
  box-shadow:0 0 25px rgba(139,92,246,.8);
}

.dark{
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.4);
}

.grid{
  padding:35px 4%;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}

.card{
  min-height:250px;
  padding:24px;
  background:linear-gradient(180deg,rgba(13,18,30,.95),rgba(8,10,18,.95));
  border:1px solid rgba(139,92,246,.55);
  border-radius:10px;
  box-shadow:0 0 25px rgba(0,0,0,.5);
}

.card h2{
  margin-bottom:22px;
  color:white;
}

.card p,.card li{
  color:#d1d5db;
  line-height:1.6;
}

.card ol{
  padding-left:18px;
}

.card a{
  display:block;
  margin-top:22px;
  color:#a855f7;
  text-decoration:none;
  font-weight:800;
}

.stats{
  margin:25px 4% 50px;
  padding:25px;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:20px;
  background:rgba(8,10,18,.95);
  border:1px solid rgba(139,92,246,.55);
  border-radius:10px;
}

.stats div{
  text-align:center;
  border-right:1px solid rgba(255,255,255,.12);
}

.stats div:last-child{
  border-right:0;
}

.stats b{
  display:block;
  font-size:34px;
  color:#22c55e;
}

.stats span{
  display:block;
  margin-top:6px;
  color:#cbd5e1;
  text-transform:uppercase;
  font-size:13px;
}

@media(max-width:1100px){
  nav{display:none}
  h1{font-size:58px}
  .hero p{font-size:18px;letter-spacing:3px}
  .grid,.stats{grid-template-columns:1fr}
}

/* Patch bannière plus propre */
.hero{
  min-height:720px;
  align-items:flex-end;
  padding-bottom:95px;
}

.hero-overlay.simple{
  padding:0;
}

.hero-overlay.simple h1,
.hero-overlay.simple p{
  display:none;
}