:root {
  --ink: #090a0c;
  --panel: #131416;
  --accent: #ff9d00;
  --paper: #e9eaed;
  --muted: #8f9092;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
}
.nav {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  border-bottom: 1px solid #ffffff1a;
}
.brand {
  color: white;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -1px;
  font-size: 20px;
}
.brand span {
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  background: var(--accent);
  width: 30px;
  height: 30px;
  margin-right: 9px;
  clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);
}
.navlinks {
  display: flex;
  gap: 38px;
}
.navlinks a,
.textLink {
  color: #babbbd;
  text-decoration: none;
  font-size: 13px;
}
.navCta,
.primary {
  color: var(--ink);
  background: var(--accent);
  text-decoration: none;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 15px 18px;
}
.navCta b {
  margin-left: 22px;
}
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: 170px 5vw 110px;
  background: radial-gradient(
    circle at 72% 43%,
    #31281d 0,
    #121315 27%,
    #090a0c 62%
  );
}
.heroGrid {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(90deg, transparent 35%, black);
}
.heroCopy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #aeafb1;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.eyebrow i {
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
h1 {
  font-size: clamp(70px, 9.2vw, 150px);
  line-height: 0.78;
  letter-spacing: -0.075em;
  margin: 38px 0 35px;
  font-weight: 950;
}
h1 em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  text-shadow: 0 0 30px #ff9d0018;
}
.intro {
  max-width: 505px;
  color: #b2b3b5;
  font-size: 17px;
  line-height: 1.65;
}
.heroActions {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-top: 42px;
}
.primary {
  padding: 19px 21px;
}
.primary b {
  margin-left: 35px;
}
.textLink span {
  color: var(--accent);
  margin-left: 12px;
}
.scanner {
  position: absolute;
  width: 39vw;
  min-width: 480px;
  height: 590px;
  right: 4vw;
  top: 145px;
  transform: rotate(4deg);
}
.scanGlow {
  position: absolute;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: #ff9d0022;
  filter: blur(60px);
  left: 70px;
  top: 80px;
}
.device {
  position: absolute;
  left: 60px;
  top: 20px;
  width: 390px;
  height: 490px;
  padding: 27px;
  border: 13px solid #28292b;
  border-radius: 30px;
  background: #0b0c0e;
  box-shadow:
    25px 35px 70px #000,
    inset 0 0 0 2px #393a3c;
}
.deviceTop,
.screenHead,
.deviceFoot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
  font-size: 10px;
  color: #949597;
}
.deviceTop {
  height: 35px;
}
.deviceTop i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.screen {
  margin-top: 10px;
  border: 1px solid #3f4042;
  background: #141517;
  padding: 16px;
  height: 330px;
  box-shadow: inset 0 0 35px #000;
}
.screenHead b {
  color: var(--accent);
  font-size: 8px;
}
.wave {
  height: 135px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #38393b;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 24px,
    #2e2f31 25px
  );
}
.wave span {
  width: 8px;
  background: var(--accent);
  height: 15px;
  box-shadow: 0 0 8px #ff9d0066;
}
.wave span:nth-child(2) {
  height: 45px;
}
.wave span:nth-child(3) {
  height: 82px;
}
.wave span:nth-child(4) {
  height: 37px;
}
.wave span:nth-child(5) {
  height: 98px;
}
.wave span:nth-child(6) {
  height: 65px;
}
.wave span:nth-child(7) {
  height: 28px;
}
.wave span:nth-child(8) {
  height: 58px;
}
.readouts p {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin: 13px 0;
  border-bottom: 1px solid #28292b;
  padding-bottom: 7px;
}
.readouts span {
  font: 9px monospace;
  color: #7d7e80;
}
.readouts b {
  font: 22px monospace;
}
.readouts .lime {
  color: var(--accent);
}
.deviceFoot {
  margin-top: 22px;
}
.deviceFoot span:first-child {
  font-size: 25px;
  color: #3e3f41;
}
.cable {
  position: absolute;
  left: 255px;
  top: 500px;
  width: 280px;
  height: 240px;
  border: 20px solid #1c1d1f;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(30deg);
}
.heroStats {
  position: absolute;
  z-index: 2;
  right: 5vw;
  bottom: 35px;
  display: flex;
  gap: 35px;
}
.heroStats p {
  display: flex;
  gap: 12px;
  margin: 0;
}
.heroStats strong {
  font: 10px monospace;
  color: var(--accent);
}
.heroStats span {
  font: 10px monospace;
  color: #818284;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
@media (max-width: 900px) {
  .navlinks {
    display: none;
  }
  .scanner {
    opacity: 0.35;
    right: -260px;
  }
  .heroCopy {
    max-width: 650px;
  }
  .heroStats {
    left: 5vw;
    right: auto;
  }
  .navCta {
    display: none;
  }
}
@media (max-width: 600px) {
  .nav {
    height: 72px;
  }
  .hero {
    padding-top: 130px;
    min-height: 920px;
  }
  h1 {
    font-size: 65px;
  }
  .scanner {
    top: 430px;
    right: -220px;
    transform: scale(0.8) rotate(4deg);
  }
  .heroActions {
    align-items: flex-start;
    flex-direction: column;
  }
  .heroStats {
    gap: 15px;
  }
  .heroStats p:nth-child(3) {
    display: none;
  }
}
.libraryNav .navlinks {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 28px);
  margin-left: auto;
}
.libraryNav .navlinks a {
  color: #b3b4b6;
  text-decoration: none;
  font: 700 10px monospace;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.libraryNav .navlinks a:hover,
.libraryNav .navlinks a[aria-current="page"] {
  color: #ff9d00;
}
.libraryNav .navlinks .contextLink,
.libraryNav .navBack {
  display: none;
}
@media (max-width: 900px) {
  .libraryNav .navlinks {
    display: none;
    margin-left: 0;
  }
  .libraryNav.menuOpen .navlinks {
    display: flex;
  }
  .libraryNav.menuOpen .navlinks .contextLink {
    display: flex;
  }
}
.menuToggle {
  display: none;
  width: 48px;
  height: 44px;
  padding: 9px;
  border: 1px solid #4f5052;
  background: #131416;
  color: #f0f1f3;
  cursor: pointer;
  position: relative;
}
.menuToggle > span {
  display: block;
  width: 20px;
  height: 2px;
  background: #ff9d00;
  margin: 4px auto;
  transition:
    transform 0.22s,
    opacity 0.22s;
}
.menuToggle > b {
  position: absolute;
  right: 54px;
  top: 16px;
  font: 700 9px monospace;
  letter-spacing: 0.12em;
}
.libraryNav .mobileNavlinks {
  display: none;
}
@media (max-width: 900px) {
  body.mobileMenuOpen {
    overflow: hidden;
  }
  .nav,
  .libraryNav {
    z-index: 1000;
  }
  .libraryNav {
    position: relative;
  }
  .menuToggle {
    display: block;
    flex: 0 0 auto;
    margin-left: auto;
  }
  .libraryNav > a:last-of-type:not(.brand) {
    display: none;
  }
  .nav.menuOpen,
  .libraryNav.menuOpen {
    background: #0b0c0e;
    border-bottom-color: #414244;
  }
  .menuOpen .menuToggle > span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .menuOpen .menuToggle > span:nth-child(2) {
    opacity: 0;
  }
  .menuOpen .menuToggle > span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .menuOpen .menuToggle > b {
    font-size: 0;
  }
  .menuOpen .menuToggle > b:after {
    content: "CLOSE";
    font-size: 9px;
  }
  .nav.menuOpen .navlinks,
  .libraryNav.menuOpen .mobileNavlinks {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: calc(100vh - 72px);
    overflow: auto;
    flex-direction: column;
    gap: 0;
    padding: 18px;
    background: #0b0c0e;
    border-top: 1px solid #353638;
    border-bottom: 1px solid #4e4f51;
    box-shadow: 0 28px 60px #000c;
  }
  .menuOpen .navlinks a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 54px;
    padding: 0 8px;
    color: #dddee0;
    border-bottom: 1px solid #2d2e30;
    font: 700 13px monospace;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .menuOpen .navlinks a:after {
    content: "→";
    color: #ff9d00;
  }
  .menuOpen .navlinks .contextLink {
    color: #ff9d00;
    border: 1px solid #4d4e50;
    padding: 0 14px;
    margin-bottom: 12px;
  }
  .menuOpen .navlinks .contextLink:after {
    content: "↩";
  }
  .nav .brand,
  .libraryNav .brand {
    position: relative;
    z-index: 2;
  }
}
@media (max-width: 420px) {
  .menuToggle > b {
    display: none;
  }
  .menuToggle {
    width: 44px;
  }
  .brand {
    font-size: 16px;
  }
  .brand small {
    display: none;
  }
}
@media (max-width: 600px) {
  .nav {
    padding: 0 18px;
  }
  .hero {
    padding: 120px 22px 100px;
    min-height: 900px;
  }
  h1 {
    font-size: clamp(48px, 17vw, 65px);
    overflow-wrap: anywhere;
  }
  .intro {
    font-size: 15px;
  }
  .scanner {
    right: -300px;
    transform: scale(0.7) rotate(4deg);
  }
  .heroStats {
    left: 22px;
  }
  .brand {
    font-size: 16px;
  }
  .brand span {
    width: 32px;
    margin-right: 6px;
  }
}
@media (max-width: 600px) {
  .hero {
    min-height: 760px;
    padding-bottom: 155px;
  }
  .scanner {
    display: none;
  }
  .heroCopy h1 {
    font-size: clamp(57px, 17vw, 72px);
    line-height: 0.82;
  }
  .heroStats {
    left: 22px;
    right: 22px;
    bottom: 38px;
    justify-content: space-between;
  }
  .heroStats p {
    min-width: 0;
  }
  .heroActions {
    gap: 24px;
  }
  .primary {
    width: 100%;
    max-width: 300px;
    display: flex;
    justify-content: space-between;
  }
}