/* QR Free Tech — Night HUD. Motor IDs / tab order untouched. */
:root {
  --ink: #d7fff4;
  --desk: #061014;
  --panel: #0c1c22;
  --mute: #7aa89a;
  --cyan: #24f0c8;
  --cyan-ink: #061014;
  --amp: #9dff4a;
  --warn: #ff6b3d;
  --line: #1e3d44;
  --font-display: "Share Tech Mono", "Consolas", monospace;
  --font-body: "IBM Plex Sans", "Segoe UI", sans-serif;
  --radius: 2px;
  --radius-lg: 4px;
  --glow: 0 0 18px rgba(36, 240, 200, 0.28);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--desk);
  color: var(--ink);
  font-family: var(--font-body);
  overflow-x: clip;
  max-width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--desk);
  color: var(--ink) !important;
  font: 16px/1.55 var(--font-body);
}

.topbar *,
.deck h1,
.deck h2,
.folio h1,
.folio h2,
.ledger__lead,
.mark__word {
  text-transform: none !important;
}

.fx-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 420px at 8% -10%, rgba(36, 240, 200, 0.12), transparent 58%),
    radial-gradient(520px 340px at 100% 0%, rgba(157, 255, 74, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(6, 16, 20, 0.2), transparent 40%),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(36, 240, 200, 0.04) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(36, 240, 200, 0.035) 27px 28px);
}

.fx-scan {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(0, 0, 0, 0.12) 2px 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.45;
}

.fx-scan::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 14%;
  background: linear-gradient(180deg, transparent, rgba(36, 240, 200, 0.09), transparent);
  animation: hud-sweep 6.8s linear infinite;
}

@keyframes hud-sweep {
  0% { top: -16%; }
  100% { top: 108%; }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 70px;
  padding: 10px 18px 10px 22px;
  border-bottom: 1px solid var(--cyan);
  background: rgba(6, 16, 20, 0.92);
  backdrop-filter: blur(12px);
  overflow: visible;
  box-shadow: 0 0 0 1px rgba(36, 240, 200, 0.12), var(--glow);
}

.topbar::before {
  content: "SYS.ONLINE";
  position: absolute;
  left: 50%;
  bottom: -1px;
  transform: translateX(-50%);
  font: 700 9px/1 var(--font-display);
  letter-spacing: 0.22em;
  color: var(--amp);
  background: var(--desk);
  padding: 0 10px;
}

.mark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.mark__tile { display: none !important; }

.mark__badge {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border: 1px solid var(--cyan);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--glow);
  flex: 0 0 auto;
  background: #031014;
}

.mark__badge img {
  display: block;
  width: 100%;
  height: 100%;
}

.mark__word {
  font-family: var(--font-display) !important;
  font-size: 1.18rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cyan) !important;
  text-shadow: 0 0 10px rgba(36, 240, 200, 0.45);
}

.sat-scan,
.sat-scan--cut {
  appearance: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--amp);
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  background: rgba(157, 255, 74, 0.08) !important;
  color: var(--amp) !important;
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
  text-decoration: none;
  box-shadow: inset 0 0 12px rgba(157, 255, 74, 0.12);
  transform: skewX(-4deg);
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.sat-scan:hover,
.sat-scan--cut:hover {
  background: var(--amp) !important;
  color: #061014 !important;
  box-shadow: 0 0 16px rgba(157, 255, 74, 0.45);
  transform: skewX(-4deg) translate(-2px, -1px);
}

.ledger .sat-scan,
.ledger__more .sat-scan {
  background: rgba(157, 255, 74, 0.08) !important;
  color: var(--amp) !important;
}

.ledger .sat-scan:hover,
.ledger__more .sat-scan:hover {
  background: var(--amp) !important;
  color: #061014 !important;
}

.ledger__scan-note {
  color: var(--mute) !important;
  opacity: 1 !important;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.topbar .langlist { margin-left: auto; position: relative; z-index: 90; }
.langlist { position: relative; }

.langlist summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  min-height: 40px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--cyan);
  border-radius: 0;
  background: #031014 !important;
  color: var(--cyan) !important;
  font: 700 12px/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase !important;
}

.langlist summary::-webkit-details-marker { display: none; }

.langlist summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--cyan);
  border-bottom: 2px solid var(--cyan);
  transform: translateY(-70%) rotate(45deg);
}

.langlist[open] summary {
  background: var(--cyan) !important;
  color: #061014 !important;
}

.langlist ul {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 100;
  margin: 0;
  padding: 6px 0;
  min-width: 240px;
  max-height: min(70vh, 520px);
  overflow: auto;
  list-style: none;
  border: 1px solid var(--cyan);
  background: #031014 !important;
  box-shadow: var(--glow);
}

.langlist a {
  display: block;
  padding: 9px 14px;
  color: var(--ink) !important;
  text-decoration: none;
  font-size: 14px;
  font-family: var(--font-display);
}

.langlist a:hover,
.langlist a[aria-current="page"] {
  background: rgba(36, 240, 200, 0.16) !important;
  color: var(--cyan) !important;
}

html[dir="rtl"] .langlist ul { right: auto; left: 0; }

.deck {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
}

.page-inner .deck {
  width: min(980px, calc(100% - 32px));
  margin: 28px auto 0;
}

/* Signal chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--cyan);
  background: rgba(36, 240, 200, 0.06);
  color: var(--cyan);
  font: 700 10px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--amp);
  box-shadow: 0 0 8px var(--amp);
  animation: lab-pulse 1.4s ease-out infinite;
}

.chip--live { border-color: var(--amp); color: var(--amp); }
.chip--warn { border-color: var(--warn); color: var(--warn); background: rgba(255, 107, 61, 0.08); }
.chip--amp { border-color: var(--amp); color: var(--amp); background: rgba(157, 255, 74, 0.08); }
.chip--ghost { opacity: 0.55; border-style: dashed; }
.chip--skew { transform: skewX(-12deg); }
.chip--float { transform: translateY(-6px) rotate(-2deg); box-shadow: 0 0 12px rgba(36, 240, 200, 0.25); }
.chip--tiny { padding: 3px 7px; font-size: 9px; letter-spacing: 0.1em; }

.chiprail {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 48px));
  margin: 14px 10px 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  transform: rotate(-0.5deg);
}

.chiprail--nav {
  width: auto;
  margin: 0;
  transform: none;
  gap: 6px;
}

.chiprail .chip:nth-child(3n) { transform: translateY(4px); }
.chiprail .chip:nth-child(4n) { transform: rotate(2deg); }
.chiprail .chip--skew:nth-child(3n) { transform: skewX(-12deg) translateY(3px); }

.signalbars {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  margin-left: 8px;
}

.signalbars b {
  display: block;
  width: 3px;
  background: var(--cyan);
  opacity: 0.35;
  animation: bar-bounce 1.1s ease-in-out infinite;
}
.signalbars b:nth-child(1) { height: 30%; animation-delay: 0s; }
.signalbars b:nth-child(2) { height: 55%; animation-delay: 0.1s; }
.signalbars b:nth-child(3) { height: 80%; animation-delay: 0.2s; background: var(--amp); opacity: 0.7; }
.signalbars b:nth-child(4) { height: 45%; animation-delay: 0.3s; }
.signalbars b:nth-child(5) { height: 100%; animation-delay: 0.4s; }

@keyframes bar-bounce {
  0%, 100% { transform: scaleY(0.55); opacity: 0.35; }
  50% { transform: scaleY(1); opacity: 1; }
}

.labstrip {
  position: relative;
  z-index: 1;
  width: min(1320px, calc(100% - 40px));
  margin: 12px 28px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--amp);
  background: linear-gradient(105deg, rgba(36, 240, 200, 0.1), rgba(6, 16, 20, 0.9) 55%);
  color: var(--ink);
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-0.35deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 16px) 100%, 0 100%);
}

.labstrip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amp);
  box-shadow: 0 0 0 0 rgba(157, 255, 74, 0.55);
  animation: lab-pulse 1.6s ease-out infinite;
}

@keyframes lab-pulse {
  0% { box-shadow: 0 0 0 0 rgba(157, 255, 74, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(157, 255, 74, 0); }
  100% { box-shadow: 0 0 0 0 rgba(157, 255, 74, 0); }
}

.labstrip__tag { color: var(--cyan); }
.labstrip__meta {
  margin-left: auto;
  color: var(--mute);
}

.rig {
  position: relative;
  width: min(1380px, calc(100% - 36px));
  margin: 18px 12px 18px 28px;
  padding: 0 0 0 42px;
  transform: rotate(0.4deg);
}

.slash { display: none !important; }

.rig__side {
  position: absolute;
  left: 0;
  top: 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}

.rig__side .chip:nth-child(2) { margin-left: 6px; transform: skewX(-8deg); }
.rig__side .chip:nth-child(3) { margin-left: 12px; }

.rig__hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  padding: 8px 12px 0;
}

.rig__hud .chip:nth-child(odd) { transform: translateY(3px); }
.rig__hud .chip:nth-child(even) { transform: skewX(-8deg); }

.rig__shell {
  position: relative;
  border: 1px solid var(--cyan);
  border-radius: 0;
  background: var(--panel);
  box-shadow: 10px 12px 0 rgba(36, 240, 200, 0.08), var(--glow);
  overflow: clip;
  clip-path: polygon(0 10px, 14px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 14px) 100%, 0 100%);
}

.rig__shell::before,
.rig__shell::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  z-index: 2;
  pointer-events: none;
  border: 2px solid var(--amp);
}
.rig__shell::before { top: 6px; left: 6px; border-right: 0; border-bottom: 0; }
.rig__shell::after { bottom: 6px; right: 6px; border-left: 0; border-top: 0; }

.rig__notch {
  display: block;
  height: 8px;
  background: repeating-linear-gradient(
    90deg,
    var(--cyan) 0 8px,
    transparent 8px 14px,
    var(--amp) 14px 18px,
    transparent 18px 24px
  );
  opacity: 0.75;
  animation: notch-slide 2.4s linear infinite;
  background-size: 48px 100%;
}

@keyframes notch-slide {
  from { background-position: 0 0; }
  to { background-position: 48px 0; }
}

.rig__well,
.folio,
.ledger {
  background: var(--panel) !important;
  border-radius: 0 !important;
}

.folio {
  width: min(860px, calc(100% - 32px));
  margin: 24px auto;
  padding: 28px 26px;
  border: 1px solid var(--cyan);
  box-shadow: var(--glow);
}

.folio__head h1 {
  font-family: var(--font-display) !important;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--cyan) !important;
}

.folio__head p,
.ledger__n {
  color: var(--mute) !important;
}

.ledger {
  width: min(1280px, calc(100% - 40px));
  margin: 8px 36px 28px 14px;
  padding: 20px 18px;
  border: 1px solid var(--line);
  background: rgba(12, 28, 34, 0.92) !important;
  transform: rotate(-0.45deg);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  box-shadow: -8px 10px 0 rgba(255, 107, 61, 0.08);
}

.ledger--skew { position: relative; }

.ledger__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--line);
}

.ledger__kicker {
  margin: 0;
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
}

.ledger__more--top { margin: 0; }

.ledger__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.ledger__item,
.ledger__list li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: #08161b;
  font-family: var(--font-display);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.ledger__item--0 { margin-right: 14%; }
.ledger__item--1 { margin-left: 8%; margin-right: 4%; transform: skewX(-2deg); }
.ledger__item--2 { margin-left: 16%; }
.ledger__item--3 { margin-left: 4%; margin-right: 10%; transform: skewX(1.5deg); }

.ledger__chip { margin-left: auto; opacity: 0.7; }

.ledger__item:hover,
.ledger__list li:hover {
  border-color: var(--cyan);
  background: rgba(36, 240, 200, 0.08);
  transform: translateX(4px);
}

.ledger__item--1:hover { transform: skewX(-2deg) translateX(4px); }
.ledger__item--3:hover { transform: skewX(1.5deg) translateX(4px); }

.ledger__n {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--amp) !important;
  min-width: 2ch;
}

.ledger a {
  color: var(--ink) !important;
  text-decoration: none;
  font-weight: 650;
}

.ledger a:hover { color: var(--cyan) !important; }

.ledger__more a {
  font-family: var(--font-display) !important;
  font-weight: 700;
  color: var(--cyan) !important;
}

.scanlane {
  position: relative;
  z-index: 1;
  width: min(880px, calc(100% - 48px));
  margin: 0 14px 34px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--cyan);
  background: linear-gradient(120deg, rgba(157, 255, 74, 0.08), rgba(6, 16, 20, 0.95));
  transform: rotate(0.55deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: 8px 8px 0 rgba(36, 240, 200, 0.1);
}

.colophon {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px 20px 28px;
  border-top: 1px solid var(--cyan);
  background: #041014;
  clip-path: polygon(0 10px, 22px 0, 100% 0, 100% 100%, 0 100%);
}

.colophon a {
  color: var(--ink) !important;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

.colophon a:nth-child(odd) { transform: translateY(2px); }
.colophon a:nth-child(even) { transform: skewX(-6deg); }

.colophon a:hover { color: var(--cyan) !important; }

.colophon__biz {
  appearance: none;
  border: 1px solid var(--warn);
  background: rgba(255, 107, 61, 0.12);
  color: var(--warn);
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 14px;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transform: skewX(-6deg);
  cursor: pointer;
}

.colophon__biz:hover {
  background: var(--warn);
  color: #061014;
}

body.sat-hero-hud .rig { order: 0; }

@media (max-width: 720px) {
  .topbar { padding: 10px 12px; gap: 8px; }
  .topbar::before { display: none; }
  .chiprail--nav { display: none; }
  .mark__word { font-size: 0.95rem; }
  .sat-scan { padding: 8px 10px; font-size: 11px; transform: none; }
  .sat-scan:hover { transform: none; }
  .chiprail, .labstrip, .rig, .ledger, .scanlane {
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    transform: none;
  }
  .rig { padding-left: 36px; }
  .ledger__item--0,
  .ledger__item--1,
  .ledger__item--2,
  .ledger__item--3 {
    margin: 0;
    transform: none;
  }
  .labstrip__meta { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-scan::after,
  .labstrip__dot,
  .signalbars b,
  .rig__notch,
  .chip i { animation: none !important; }
}