:root {
  --paper: #e7e8d8;
  --lime: #b7da43;
  --hot: #ff5c35;
  --tactical: #0b0e0b;
}
.grain {
  opacity: 0.1;
  mix-blend-mode: screen;
}
.site-header {
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 64px;
  border: 0;
  border-bottom: 3px solid var(--lime);
  background: #0a0d0a;
  backdrop-filter: none;
  transform: none;
}
.site-header.scrolled {
  top: 0;
  width: 100%;
  transform: none;
}
.site-header:after {
  content: "EU WEST // PUBLIC BETA // BUILD 2.1";
  position: absolute;
  right: 24px;
  bottom: -21px;
  background: var(--lime);
  color: #080a08;
  padding: 4px 9px;
  font: 800 8px Consolas;
  letter-spacing: 0.13em;
}
.main-nav a,
.header-actions a {
  font-family: Consolas, monospace;
}
.network-state {
  color: var(--lime);
}
.hero {
  min-height: 800px;
}
.hero-world-back {
  filter: contrast(1.2) saturate(0.64);
}
.hero-vignette {
  background:
    linear-gradient(90deg, rgba(5, 8, 7, 0.99) 0 48%, rgba(5, 8, 7, 0.16)),
    linear-gradient(0deg, #080a09, transparent 26%);
}
.hero-copy {
  max-width: 790px;
}
.hero-copy h1 {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: clamp(72px, 9.5vw, 150px);
  line-height: 0.78;
  text-transform: uppercase;
  transform: skewX(-4deg);
  text-shadow: 7px 7px 0 #141914;
}
.hero-copy h1 em {
  color: var(--lime);
  -webkit-text-stroke: 0;
}
.hero-intro {
  font-family: Arial, sans-serif;
  border-left: 6px solid var(--hot);
  padding-left: 18px;
  max-width: 620px;
}
.eyebrow {
  color: var(--lime);
}
.primary-action {
  background: var(--hot);
  color: white;
  clip-path: polygon(
    10px 0,
    100% 0,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    0 100%,
    0 10px
  );
}
.secondary-action {
  border-color: var(--lime);
  background: #0b0e0b;
}
.hero-brief {
  border: 1px solid var(--lime);
  border-top: 6px solid var(--lime);
  background: #0b0e0b;
  box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.5);
  transform: rotate(1deg);
}
.operation {
  background-color: #080a09;
  background-image:
    linear-gradient(rgba(183, 218, 67, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(183, 218, 67, 0.025) 1px, transparent 1px);
  background-size: 32px 32px;
}
.operation-visual {
  border-right: 3px solid var(--lime);
}
.operation-step {
  background: #0d100d;
  border-bottom: 1px solid #30372e;
}
.operation-step.is-active {
  border-left: 7px solid var(--hot);
  background: #141912;
}
.chapter-heading h2,
.identity-heading h2,
.intel-lead h2,
.store-content h2,
.community h2,
.faq h2 {
  font-family: Impact, "Arial Narrow", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
}
.modes {
  background: #0a0d0a;
}
.mode-selector button {
  border-radius: 0;
}
.mode-selector button[aria-selected="true"] {
  background: var(--lime);
  color: #080a08;
}
.mode-readout {
  border: 1px solid #30372e;
  border-left: 7px solid var(--hot);
  background: #0d100d;
  box-shadow: 8px 8px 0 #030403;
}
.identity-console {
  border-top: 5px solid var(--lime);
  background: #0d100d;
}
.intel-strip article,
.faq details {
  border-radius: 0;
  background: #0d100d;
}
.store-feature {
  border-block: 3px solid var(--lime);
}
footer {
  border-top: 3px solid var(--lime);
  background: #0b0e0b;
}
@media (max-width: 900px) {
  .site-header:after {
    display: none;
  }
  .hero-copy h1 {
    font-size: 74px;
  }
}