/* =========================================================
   APOCALYPSE REVIVED — H1Z1 PvE Server
   Palette: void #0a0908 / ash #17140f / bone #e9e2d0
            blood #c8151c / ember #e0431f / warn #c9a13a
   Display: Anton | Utility/Body: Rajdhani
   ========================================================= */

:root{
  --void:      #0a0908;
  --void-2:    #100d0b;
  --ash:       #1a1613;
  --ash-2:     #241f1a;
  --steel:     #3a332c;
  --bone:      #e9e2d0;
  --bone-dim:  #a89f8c;
  --blood:     #c8151c;
  --blood-dk:  #7d0d12;
  --ember:     #e0431f;
  --warn:      #c9a13a;
  --line:      rgba(233,226,208,0.10);
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background-color: var(--void);
  color: var(--bone);
  font-family:'Rajdhani', sans-serif;
  font-weight:500;
  letter-spacing:.01em;
  position:relative;
  min-height:100vh;
}

/* ---------- Grunge atmosphere layers ---------- */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 15% -5%, rgba(200,21,28,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(200,21,28,0.10), transparent 55%),
    radial-gradient(ellipse 1000px 700px at 50% 100%, rgba(20,15,10,0.9), transparent 60%);
}
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  opacity:.5;
  mix-blend-mode:overlay;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0px, transparent 1px, transparent 4px);
}
.container, .navbar, footer, main { position:relative; z-index:1; }

h1,h2,h3,h4,h5,.display-font{
  font-family:'Anton', sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.02em;
  color:var(--bone);
}

.text-blood{ color:var(--blood) !important; }
.text-ember{ color:var(--ember) !important; }
.text-warn{ color:var(--warn) !important; }
.text-bone-dim{ color:var(--bone-dim) !important; }

/* ---------- Texture divider (torn / cracked edge) ---------- */
.torn-divider{
  height:14px;
  width:100%;
  background:
    linear-gradient(135deg, var(--void) 25%, transparent 25%) 0 0/14px 14px,
    linear-gradient(225deg, var(--void) 25%, transparent 25%) 0 0/14px 14px;
  background-color:var(--ash);
}

/* ---------- Navbar ---------- */
.navbar-ar{
  background:linear-gradient(180deg, rgba(10,9,8,0.97), rgba(10,9,8,0.88));
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.navbar-ar .navbar-brand{
  font-family:'Anton', sans-serif;
  letter-spacing:.03em;
  font-size:1.5rem;
  color:var(--bone) !important;
}
.navbar-ar .navbar-brand .brand-mark{ color:var(--blood); }
.navbar-ar .nav-link{
  font-family:'Rajdhani',sans-serif;
  font-weight:600;
  text-transform:uppercase;
  font-size:.85rem;
  letter-spacing:.08em;
  color:var(--bone-dim) !important;
  padding:.5rem 1rem !important;
  transition:color .15s ease;
}
.navbar-ar .nav-link:hover,
.navbar-ar .nav-link.active{ color:var(--bone) !important; }
.navbar-ar .nav-link.active{ color:var(--blood) !important; }

.btn-blood{
  background:var(--blood);
  border:1px solid var(--blood);
  color:#fff;
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-radius:2px;
  transition:all .15s ease;
}
.btn-blood:hover{
  background:var(--ember);
  border-color:var(--ember);
  color:#fff;
  box-shadow:0 0 22px rgba(224,67,31,.45);
}
.btn-outline-bone{
  border:1px solid var(--line);
  color:var(--bone);
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  border-radius:2px;
}
.btn-outline-bone:hover{
  border-color:var(--bone-dim);
  background:rgba(233,226,208,.06);
  color:var(--bone);
}

/* ---------- Status strip ---------- */
.status-strip{
  background:var(--void-2);
  border-bottom:1px solid var(--line);
  font-family:'Rajdhani',sans-serif;
  font-size:.78rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
@keyframes pulse{
  0%{ opacity:1; }
  50%{ opacity:.35; }
  100%{ opacity:1; }
}

/* ---------- Hero ---------- */
.hero{
  padding:6.5rem 0 5rem;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero-eyebrow{
  font-family:'Rajdhani',sans-serif;
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.35em;
  color:var(--blood);
  text-transform:uppercase;
}
.hero h1{
  font-size:clamp(3rem, 8vw, 6.2rem);
  line-height:.92;
  margin:.4rem 0 1.2rem;
}
.hero h1 .line-2{
  color:var(--blood);
  -webkit-text-stroke:1px rgba(233,226,208,0.25);
}
.hero-sub{
  font-size:1.15rem;
  color:var(--bone-dim);
  max-width:560px;
}
.hero-skull{
  font-size:11rem;
  line-height:1;
  color:var(--blood);
  filter: drop-shadow(0 0 40px rgba(200,21,28,.35));
  opacity:.9;
}

/* ---------- Stat chips ---------- */
.chip-row{ gap:.6rem; }
.chip{
  border:1px solid var(--line);
  background:var(--ash);
  padding:.5rem 1rem;
  border-radius:2px;
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.chip strong{ color:var(--bone); font-family:'Rajdhani',sans-serif; }

/* ---------- Section shell ---------- */
.section{ padding:5rem 0; border-bottom:1px solid var(--line); }
.section-eyebrow{
  font-size:.8rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--blood);
  font-weight:700;
}
.section-title{ font-size:clamp(2rem,4vw,2.8rem); margin-bottom:.75rem; }
.section-lead{ color:var(--bone-dim); max-width:640px; }

/* ---------- Threat tracker (signature element) ---------- */
.threat-panel{
  background:linear-gradient(180deg, var(--ash), var(--void-2));
  border:1px solid var(--line);
  border-radius:4px;
  position:relative;
  overflow:hidden;
}
.threat-panel::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(200,21,28,.5) 50%, transparent 100%);
  height:2px; top:0;
}
.threat-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px dashed var(--line);
  font-family:'Rajdhani',sans-serif;
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--bone-dim);
}
.threat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.threat-item{
  padding:1.35rem 1.25rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  transition:background .15s ease;
}
.threat-item:hover{ background:rgba(200,21,28,0.06); }
.threat-item .t-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:.5rem;
}
.threat-icon{ font-size:1.7rem; }
.threat-name{
  font-family:'Anton',sans-serif;
  font-size:1.05rem;
  letter-spacing:.03em;
  margin:0 0 .15rem;
}
.threat-desc{
  font-size:.82rem;
  color:var(--bone-dim);
  margin:0;
  line-height:1.35;
}
.threat-status{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  color:#3ecf6e;
}
.threat-status .pulse-dot{ width:6px; height:6px; }
.threat-status.high{ color:var(--ember); }
.threat-status.high .pulse-dot{ background:var(--ember); box-shadow:0 0 8px var(--ember); }
.threat-status.extreme{ color:var(--blood); }
.threat-status.extreme .pulse-dot{ background:var(--blood); box-shadow:0 0 8px var(--blood); }

/* ---------- Rule / feature cards ---------- */
.rule-card{
  background:var(--ash);
  border:1px solid var(--line);
  border-radius:4px;
  padding:1.75rem;
  height:100%;
}
.rule-num{
  font-family:'Anton',sans-serif;
  font-size:.75rem;
  letter-spacing:.15em;
  color:var(--blood);
}
.rule-card h4{ font-size:1.15rem; margin:.5rem 0 .6rem; }
.rule-card p{ color:var(--bone-dim); font-size:.92rem; margin:0; }

/* ---------- Info / connect panel ---------- */
.connect-panel{
  background:var(--ash-2);
  border:1px solid var(--line);
  border-radius:4px;
  padding:2.5rem;
}
.info-row{
  display:flex; justify-content:space-between;
  padding:.85rem 0;
  border-bottom:1px solid var(--line);
  font-family:'Rajdhani',sans-serif;
}
.info-row:last-child{ border-bottom:none; }
.info-row .k{ color:var(--bone-dim); text-transform:uppercase; letter-spacing:.08em; font-size:.82rem; }
.info-row .v{ color:var(--bone); font-weight:700; }
.info-row .v.on{ color:#3ecf6e; }
.info-row .v.off{ color:var(--blood); }

/* ---------- Footer ---------- */
footer{
  background:var(--void-2);
  border-top:1px solid var(--line);
  padding:2.5rem 0;
  font-size:.82rem;
  color:var(--bone-dim);
}
footer a{ color:var(--bone-dim); text-decoration:none; }
footer a:hover{ color:var(--blood); }

/* ---------- Download page specific ---------- */
.download-hero{
  padding:6rem 0 4rem;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.launcher-card{
  max-width:560px;
  margin:0 auto;
  background:linear-gradient(180deg, var(--ash), var(--void-2));
  border:1px solid var(--line);
  border-radius:6px;
  padding:2.75rem;
  position:relative;
}
.launcher-card::before{
  content:"";
  position:absolute; inset:0; border-radius:6px;
  padding:1px;
  background:linear-gradient(135deg, rgba(200,21,28,.55), transparent 40%, transparent 60%, rgba(200,21,28,.35));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
.file-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--void-2);
  border:1px solid var(--line);
  border-radius:3px;
  padding:.6rem 1rem;
  font-size:.82rem;
  color:var(--bone-dim);
  margin-top:1rem;
}
.download-btn{
  font-size:1.05rem;
  padding:.9rem 2.2rem;
}
.step-list{ counter-reset:step; list-style:none; padding:0; margin:0; }
.step-list li{
  counter-increment:step;
  position:relative;
  padding:1rem 0 1rem 3rem;
  border-bottom:1px solid var(--line);
  color:var(--bone-dim);
}
.step-list li:last-child{ border-bottom:none; }
.step-list li::before{
  content:counter(step);
  position:absolute; left:0; top:.85rem;
  width:2rem; height:2rem;
  border:1px solid var(--blood);
  color:var(--blood);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Anton',sans-serif;
  font-size:.85rem;
}
.step-list strong{ color:var(--bone); }

@media (max-width:767px){
  .hero{ padding:4rem 0 3rem; text-align:center; }
  .hero-sub{ margin-left:auto; margin-right:auto; }
  .hero-skull{ font-size:6rem; margin-top:2rem; }
  .threat-item{ border-right:none; }
}