* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #0a0000 0%, #1a0000 25%, #2b0000 50%, #1a0000 75%, #0a0000 100%);
  color: #e0e0e0; overflow-x: hidden; position: relative;
}
body::before {
  content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background:
    radial-gradient(circle at 20% 80%, rgba(220, 20, 20, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 0, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(205, 92, 92, 0.05) 0%, transparent 50%);
  z-index: -2; pointer-events: none;
}
.particles {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="0.5" fill="%23dc1414" opacity="0.6"><animate attributeName="opacity" values="0.6;1;0.6" dur="3s" repeatCount="indefinite"/></circle><circle cx="80" cy="40" r="0.8" fill="%23b30000" opacity="0.7"><animate attributeName="opacity" values="0.7;1;0.7" dur="4s" repeatCount="indefinite"/></circle><circle cx="40" cy="80" r="0.3" fill="%23ff4444" opacity="0.5"><animate attributeName="opacity" values="0.5;1;0.5" dur="2s" repeatCount="indefinite"/></circle><circle cx="60" cy="10" r="0.4" fill="%238b0000" opacity="0.4"><animate attributeName="opacity" values="0.4;1;0.4" dur="5s" repeatCount="indefinite"/></circle></svg>') repeat;
  animation: apocalypticFloat 25s infinite linear;
}
@keyframes apocalypticFloat { 0%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-30px) rotate(180deg)} 100%{transform:translateY(0) rotate(360deg)} }

nav {
  position: fixed; top: 0; width: 100%; background: rgba(10,0,0,0.95);
  backdrop-filter: blur(20px); padding: 1rem 0; z-index: 1000;
  border-bottom: 3px solid rgba(220, 20, 20, 0.5); transition: all .3s ease;
  box-shadow: 0 2px 20px rgba(139,0,0,.3);
}
nav.scrolled { background: rgba(26,0,0,0.98); box-shadow: 0 5px 30px rgba(220,20,20,.4); border-bottom-color: rgba(220,20,20,.8); }
.nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; }
.logo {
  font-size: 1.8rem; font-weight: bold; background: linear-gradient(45deg, #dc1414, #ff6b6b, #b30000);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(220,20,20,.8);
  filter: drop-shadow(0 0 10px rgba(220,20,20,.6)); text-decoration: none;
}
.nav-links { display: flex; list-style: none; gap: 2rem; }
.nav-links a { color: #e0e0e0; text-decoration: none; font-weight: 600; position: relative; transition: all .3s ease; padding: .5rem 1rem; border-radius: 25px; border: 1px solid transparent; }
.nav-links a:hover { color: #dc1414; background: rgba(220,20,20,.1); box-shadow: 0 0 20px rgba(220,20,20,.3); border-color: rgba(220,20,20,.3); }
.nav-links a::after { content:''; position:absolute; bottom:-5px; left:50%; width:0; height:2px; background:linear-gradient(45deg,#dc1414,#b30000); transition:all .3s ease; transform:translateX(-50%); }
.nav-links a:hover::after { width:100%; }

.hero {
  min-height: 100vh; display:flex; align-items:center; justify-content:center; position:relative;
  background: linear-gradient(rgba(26,0,0,0.8), rgba(10,0,0,0.6)), url('assets/background.png') center/cover;
}
.hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at center, transparent 0%, rgba(26,0,0,0.9) 100%), linear-gradient(45deg, rgba(220,20,20,0.1) 0%, transparent 30%, rgba(139,0,0,0.1) 100%);
}
.hero-content { text-align:center; z-index:2; max-width:800px; padding:0 2rem; }
.hero h1 {
  font-size: clamp(3rem, 8vw, 6rem); font-weight:900; margin-bottom:1rem;
  background: linear-gradient(45deg,#dc1414,#ff6b6b,#b30000,#ff4444); -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow: 0 0 50px rgba(220,20,20,.8); animation: apocalypticGlow 3s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 20px rgba(220,20,20,.6));
}
@keyframes apocalypticGlow { from{ filter:drop-shadow(0 0 20px rgba(220,20,20,.6)) brightness(1); transform:scale(1)} to{ filter:drop-shadow(0 0 40px rgba(220,20,20,.9)) brightness(1.1); transform:scale(1.02)} }
.hero p { font-size:1.5rem; margin-bottom:2rem; opacity:.9; color:#cd5c5c; text-shadow:0 0 10px rgba(220,20,20,.3); }

.btn { display:inline-block; padding:1rem 2.5rem; margin:.5rem; text-decoration:none; border-radius:50px; font-weight:600; text-transform:uppercase; letter-spacing:1px; transition:all .3s ease; position:relative; overflow:hidden; z-index:1; border:2px solid transparent; }
.btn::before { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent, rgba(255,255,255,.2), transparent); transition:left .5s; z-index:-1; }
.btn:hover::before { left:100%; }
.btn-primary { background: linear-gradient(45deg,#dc1414,#b30000); color:#fff; box-shadow:0 10px 30px rgba(220,20,20,.4); border-color: rgba(220,20,20,.3); }
.btn-primary:hover { background:linear-gradient(45deg,#b30000,#8b0000); transform:translateY(-3px); box-shadow:0 15px 40px rgba(220,20,20,.6); border-color: rgba(220,20,20,.6); }
.btn-secondary { background:transparent; color:#cd5c5c; border:2px solid #cd5c5c; box-shadow:0 10px 30px rgba(205,92,92,.2); }
.btn-secondary:hover { background:rgba(220,20,20,.9); color:#fff; transform:translateY(-3px); box-shadow:0 15px 40px rgba(220,20,20,.4); border-color:#dc1414; }

section { padding: 100px 0; position: relative; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
.section-title { text-align:center; font-size:3rem; font-weight:800; margin-bottom:3rem; background:linear-gradient(45deg,#dc1414,#cd5c5c,#b30000); -webkit-background-clip:text; -webkit-text-fill-color:transparent; text-shadow:0 0 20px rgba(220,20,20,.5); filter: drop-shadow(0 0 10px rgba(220,20,20,.4)); position:relative; }
.section-title::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:4px; height:20px; background:linear-gradient(to bottom,#dc1414,transparent); border-radius:0 0 50% 50%; }

.server-grid,.social-grid,.store-grid,.staff-grid { display:grid; gap:2rem; margin-top:3rem; }
.server-grid { grid-template-columns: repeat(auto-fit,minmax(300px,1fr)); }
.social-grid { grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); }
.store-grid { grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.staff-grid { grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); }

.server-card,.store-item,.staff-card,.contact-info,.contact-form {
  background: rgba(26,0,0,0.8); backdrop-filter: blur(20px); border-radius:20px; padding:2rem; border:2px solid rgba(220,20,20,.3);
  transition: all .3s ease; position:relative; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.server-card:hover,.store-item:hover,.staff-card:hover { transform: translateY(-10px); box-shadow:0 20px 50px rgba(220,20,20,.4); border-color: rgba(220,20,20,.6); background: rgba(26,0,0,0.9); animation: subtlePulse 2s infinite; }
@keyframes subtlePulse { 0%,100%{box-shadow:0 20px 50px rgba(220,20,20,.4)} 50%{box-shadow:0 25px 60px rgba(220,20,20,.5)} }

.server-card i, .store-item i { font-size:3rem; color:#dc1414; margin-bottom:1rem; display:block; text-shadow:0 0 20px rgba(220,20,20,.5); }
.server-info { background: rgba(10,0,0,0.6); padding:1rem; border-radius:10px; margin:1rem 0; border-left:4px solid #dc1414; box-shadow: inset 0 0 10px rgba(220,20,20,.2); }
.server-info code { background: rgba(220,20,20,0.3); padding: .3rem .6rem; border-radius:5px; font-family: 'Courier New', monospace; color:#ff6b6b; border:1px solid rgba(220,20,20,.3); }

.social-btn { display:block; padding:2rem; text-decoration:none; border-radius:20px; text-align:center; transition: all .3s ease; position:relative; overflow:hidden; border:2px solid transparent; }
.discord-btn { background: linear-gradient(45deg,#7289da,#5865f2); color:#fff; box-shadow:0 10px 30px rgba(114,137,218,.3); border-color: rgba(114,137,218,.3); }
.discord-btn:hover { transform: translateY(-5px) scale(1.05); box-shadow:0 20px 50px rgba(114,137,218,.5); border-color: rgba(114,137,218,.6); }
.youtube-btn,.social-app-btn { background: linear-gradient(45deg,#dc1414,#b30000); color:#fff; box-shadow:0 10px 30px rgba(220,20,20,.3); border-color: rgba(220,20,20,.3); }
.youtube-btn:hover,.social-app-btn:hover { transform: translateY(-5px) scale(1.05); box-shadow:0 20px 50px rgba(220,20,20,.5); border-color: rgba(220,20,20,.6); }

.price { font-size:2rem; font-weight:bold; color:#ff6b6b; margin:1rem 0; text-shadow:0 0 15px rgba(220,20,20,.5); }
.buy-btn { background: linear-gradient(45deg,#dc1414,#b30000); color:#fff; padding:.8rem 2rem; border:2px solid rgba(220,20,20,.3); border-radius:25px; font-weight:600; text-transform:uppercase; cursor:pointer; transition:all .3s ease; text-decoration:none; display:inline-block; }
.buy-btn:hover { background: linear-gradient(45deg,#b30000,#8b0000); transform: translateY(-2px); box-shadow:0 10px 25px rgba(220,20,20,.5); border-color: rgba(220,20,20,.6); }
.coming-soon { background: rgba(26,0,0,0.5); color:#666; cursor:not-allowed; border-color: rgba(102,102,102,.3); }
.coming-soon:hover { transform:none; box-shadow:none; background: rgba(26,0,0,0.5); }

.contact-container { max-width: 800px; margin: 0 auto; }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:3rem; margin-top:3rem; }
.form-group { margin-bottom:1.5rem; }
.form-group label { display:block; margin-bottom:.5rem; color:#e0e0e0; font-weight:600; text-shadow:0 0 5px rgba(220,20,20,.3); }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:1rem; border:2px solid rgba(220,20,20,.4); border-radius:10px; background: rgba(10,0,0,0.6); color:#e0e0e0; font-size:1rem; transition: all .3s ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:#dc1414; box-shadow:0 0 20px rgba(220,20,20,.4); background: rgba(10,0,0,0.8);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.submit-btn { background: linear-gradient(45deg,#dc1414,#b30000); color:#fff; padding:1rem 2.5rem; border:2px solid rgba(220,20,20,.3); border-radius:50px; font-weight:600; text-transform:uppercase; letter-spacing:1px; cursor:pointer; transition: all .3s ease; width:100%; }
.submit-btn:hover { background: linear-gradient(45deg,#b30000,#8b0000); transform: translateY(-2px); box-shadow:0 15px 40px rgba(220,20,20,.5); border-color: rgba(220,20,20,.6); }

.video-container { position:relative; width:100%; max-width:800px; margin:0 auto; border-radius:20px; overflow:hidden; box-shadow:0 20px 50px rgba(220,20,20,.3); border:2px solid rgba(220,20,20,.3); }
.video-container iframe { width:100%; height:450px; border:none; }

.scroll-indicator { position:fixed; top:0; left:0; width:100%; height:4px; background: rgba(26,0,0,.3); z-index:9999; }
.scroll-progress { height:100%; background: linear-gradient(90deg,#dc1414,#b30000,#8b0000); width:0%; transition: width .3s ease; box-shadow:0 0 10px rgba(220,20,20,.5); }
.fade-in { opacity:0; transform: translateY(30px); transition: all .6s ease; }
.fade-in.visible { opacity:1; transform: translateY(0); }

.fab { position:fixed; bottom:2rem; right:2rem; width:60px; height:60px; background: linear-gradient(45deg,#dc1414,#b30000); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.5rem; text-decoration:none; box-shadow:0 10px 30px rgba(220,20,20,.4); transition: all .3s ease; z-index:1000; border:2px solid rgba(220,20,20,.3); }
.fab:hover { background: linear-gradient(45deg,#b30000,#8b0000); transform: translateY(-5px) scale(1.1); box-shadow:0 15px 40px rgba(220,20,20,.6); border-color: rgba(220,20,20,.6); }

@media (max-width: 768px) {
  .nav-container { flex-direction: column; gap: 1rem; }
  .nav-links { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .hero h1 { font-size: 3rem; }
  .hero p { font-size: 1.2rem; }
  .section-title { font-size: 2rem; }
  .server-grid, .social-grid, .store-grid, .staff-grid { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.server-status-simple { background: rgba(0,100,0,.2); border:1px solid rgba(0,255,0,.3); padding:1rem; border-radius:10px; margin:2rem 0; display:flex; align-items:center; justify-content:center; gap:.5rem; }
.status-dot-simple { width:10px; height:10px; background:#00ff00; border-radius:50%; animation:pulse 2s infinite; }
@keyframes pulse { 0%{opacity:.6} 50%{opacity:1} 100%{opacity:.6} }
.coming-soon-message { background: rgba(220,20,20,.1); border:1px solid rgba(220,20,20,.3); padding:2rem; border-radius:15px; margin:2rem 0; }
.coming-soon-message h3 { color:#ff6b6b; margin-bottom:1rem; }
.coming-soon-message p { color:#cd5c5c; line-height:1.6; }