/* =========================================================
   HERO / SIMULATION
========================================================= */

.guardian {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-1);
}

.environment {
  position: absolute;
  inset: 0;
  z-index: -5;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 38%, rgba(19, 95, 140, 0.12), transparent 24%),
    linear-gradient(180deg, #03101a 0%, #02080e 100%);
}

.environment-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.18;
}

.environment-glow-one {
  width: 520px;
  height: 520px;
  top: 16%;
  left: 10%;
  background: #0f6d9f;
}

.environment-glow-two {
  width: 420px;
  height: 420px;
  right: 8%;
  bottom: 5%;
  background: #06496d;
}

.facility {
  position: absolute;
  inset: 9% -5% 6%;
  transform:
    perspective(1200px)
    rotateX(62deg)
    rotateZ(-16deg)
    scale(1.08);
  transform-origin: 50% 58%;
  opacity: 0.74;
}

.facility-plane {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(67, 152, 204, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67, 152, 204, 0.05) 1px, transparent 1px),
    radial-gradient(circle at 45% 55%, rgba(27, 110, 158, 0.14), transparent 28%);
  background-size: 48px 48px, 48px 48px, auto;
}

.building {
  position: absolute;
  border: 1px solid rgba(87, 175, 226, 0.16);
  background:
    linear-gradient(145deg, rgba(17, 57, 82, 0.28), rgba(4, 20, 31, 0.66));
  box-shadow:
    inset 0 0 35px rgba(52, 158, 219, 0.05),
    0 18px 55px rgba(0, 0, 0, 0.22);
}

.building::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(78, 168, 220, 0.08);
}

.building span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: rgba(88, 187, 241, 0.28);
  box-shadow: 0 0 10px rgba(88, 187, 241, 0.16);
}

.building-a {
  left: 25%;
  top: 25%;
  width: 280px;
  height: 150px;
}

.building-a span:nth-child(1) { left: 16%; top: 24%; }
.building-a span:nth-child(2) { left: 46%; top: 24%; }
.building-a span:nth-child(3) { left: 72%; top: 62%; }
.building-a span:nth-child(4) { left: 23%; top: 70%; }

.building-b {
  left: 52%;
  top: 17%;
  width: 210px;
  height: 115px;
}

.building-b span:nth-child(1) { left: 19%; top: 32%; }
.building-b span:nth-child(2) { left: 54%; top: 32%; }
.building-b span:nth-child(3) { left: 75%; top: 68%; }

.building-c {
  left: 55%;
  top: 49%;
  width: 250px;
  height: 130px;
}

.building-c span:nth-child(1) { left: 18%; top: 25%; }
.building-c span:nth-child(2) { left: 70%; top: 64%; }

.road {
  position: absolute;
  height: 46px;
  border-top: 1px solid rgba(97, 175, 219, 0.1);
  border-bottom: 1px solid rgba(97, 175, 219, 0.08);
  background: rgba(4, 21, 32, 0.34);
}

.road::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(113, 184, 226, 0.12) 0 14px,
      transparent 14px 28px
    );
}

.road-one {
  width: 78%;
  left: 14%;
  top: 56%;
  transform: rotate(-6deg);
}

.road-two {
  width: 52%;
  left: 28%;
  top: 71%;
  transform: rotate(38deg);
}

.gate-structure {
  position: absolute;
  left: 43%;
  top: 60%;
  width: 115px;
  height: 40px;
  border: 1px solid rgba(83, 180, 234, 0.12);
  background: rgba(5, 24, 36, 0.54);
}

.gate-structure i {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(83, 180, 234, 0.22);
}

.gate-structure i:first-child { left: 22%; }
.gate-structure i:last-child { right: 22%; }

.grid-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  background-image:
    linear-gradient(rgba(92, 169, 217, 0.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 169, 217, 0.13) 1px, transparent 1px);
  background-size: 75px 75px;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 85%, transparent);
}

.scan-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: -22%;
  height: 18%;
  opacity: 0.12;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(84, 185, 244, 0.16),
    transparent
  );
  animation: environmentScan 7s linear infinite;
}

@keyframes environmentScan {
  to {
    transform: translateY(720%);
  }
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(1, 7, 12, 0.94) 0%,
      rgba(1, 8, 14, 0.56) 30%,
      rgba(1, 8, 14, 0.12) 63%,
      rgba(1, 8, 14, 0.52) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 7, 13, 0.44) 0%,
      transparent 32%,
      rgba(0, 7, 13, 0.26) 66%,
      rgba(0, 7, 13, 0.95) 100%
    );
}

.system-status {
  position: absolute;
  z-index: 25;
  top: 112px;
  left: var(--page-pad);

  min-height: 34px;
  padding: 0 14px;

  display: inline-flex;
  align-items: center;
  gap: 9px;

  border: 1px solid rgba(95, 175, 224, 0.15);
  border-radius: 18px;

  background: rgba(4, 18, 29, 0.68);
  backdrop-filter: blur(10px);

  color: #82a8be;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.13em;
}

.system-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow:
    0 0 0 4px rgba(62, 208, 154, 0.06),
    0 0 14px rgba(62, 208, 154, 0.52);
}

.guardian.is-danger .system-status {
  color: #ff979a;
  border-color: rgba(255, 78, 83, 0.28);
}

.guardian.is-danger .system-status i {
  background: var(--red);
  box-shadow:
    0 0 0 5px rgba(255, 81, 87, 0.08),
    0 0 18px rgba(255, 81, 87, 0.5);
  animation: dangerPulse 1s ease-in-out infinite;
}

@keyframes dangerPulse {
  50% { transform: scale(1.32); }
}

.incident-id {
  position: absolute;
  z-index: 25;
  top: 113px;
  left: calc(var(--page-pad) + 178px);

  display: flex;
  align-items: center;
  gap: 8px;

  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease;
}

.incident-id.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.incident-id span {
  color: #4f7287;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.incident-id strong {
  color: #a8c4d5;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
}

.skip-intro {
  position: absolute;
  z-index: 25;
  top: 116px;
  right: var(--page-pad);

  border: 0;
  background: transparent;
  color: #5d7c90;
  cursor: pointer;

  font-size: 9px;
  letter-spacing: 0.08em;

  transition: color 0.2s ease;
}

.skip-intro:hover {
  color: white;
}

/* =========================================================
   ROUTES
========================================================= */

.security-routes {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.security-routes path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 9 10;

  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(71, 178, 243, 0.68));

  transition: opacity 0.35s ease;
}

.security-routes path.active {
  opacity: 0.78;
  animation: routeFlow 1.1s linear infinite;
}

@keyframes routeFlow {
  to { stroke-dashoffset: -38; }
}

/* =========================================================
   NODES
========================================================= */

.security-node {
  position: absolute;
  z-index: 12;

  padding: 0;
  border: 0;
  background: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;

  cursor: pointer;
  color: #8cb6cf;

  transition:
    opacity 0.3s ease,
    transform 0.25s ease;
}

.security-node:hover {
  transform: translateY(-2px);
}

.node-pulse {
  position: absolute;
  top: 1px;

  width: 38px;
  height: 38px;

  border: 1px solid rgba(78, 181, 246, 0.26);
  border-radius: 50%;

  animation: nodePing 2.8s ease-out infinite;
}

.node-orb {
  position: relative;
  z-index: 2;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(78, 181, 246, 0.37);
  border-radius: 50%;

  background: rgba(3, 18, 28, 0.9);

  color: #64c1f8;
  font-size: 13px;

  box-shadow:
    0 0 0 5px rgba(63, 172, 235, 0.04),
    0 0 22px rgba(63, 172, 235, 0.14);
}

.node-label {
  padding: 6px 9px;
  border-radius: 7px;
  background: rgba(2, 13, 21, 0.78);
  backdrop-filter: blur(8px);

  display: flex;
  align-items: center;
  gap: 5px;

  white-space: nowrap;
}

.node-label small,
.node-label strong {
  font-family: var(--font-mono);
  font-size: 7px;
}

.node-label small {
  color: #55768a;
}

.node-label strong {
  color: #86abc0;
  font-weight: 600;
}

@keyframes nodePing {
  0% {
    opacity: 0.5;
    transform: scale(0.85);
  }
  75%,
  100% {
    opacity: 0;
    transform: scale(1.75);
  }
}

.node-camera {
  left: 25%;
  top: 34%;
}

.node-gate {
  left: 45%;
  top: 61%;
}

.node-officer {
  left: 70%;
  top: 61%;
}

.node-vehicle {
  left: 84%;
  top: 58%;
}

.guardian.is-danger .node-gate .node-orb {
  color: #ff777b;
  border-color: rgba(255, 79, 84, 0.72);
  box-shadow:
    0 0 0 7px rgba(255, 65, 72, 0.05),
    0 0 30px rgba(255, 65, 72, 0.32);
}

.guardian.is-danger .node-gate .node-pulse {
  border-color: rgba(255, 77, 82, 0.54);
  animation-duration: 1.1s;
}

.guardian.is-danger .node-gate .node-label strong {
  color: #ff8d90;
}

/* =========================================================
   HUD CARDS
========================================================= */

.hud-card {
  position: absolute;
  z-index: 20;

  width: 250px;
  padding: 17px 18px;

  border: 1px solid rgba(126, 187, 223, 0.13);
  border-radius: 13px;

  background:
    linear-gradient(
      145deg,
      rgba(4, 20, 31, 0.94),
      rgba(3, 13, 22, 0.88)
    );

  backdrop-filter: blur(16px);

  box-shadow:
    0 20px 55px rgba(0, 0, 0, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.015);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateY(10px) scale(0.985);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
}

.hud-card.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.hud-kicker {
  color: #4c9fd0;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

.danger-text {
  color: #ff7479;
}

.hud-card > strong,
.card-row + strong {
  display: block;
  margin-top: 9px;
  color: #f6fbff;
  font-size: 14px;
  font-weight: 600;
}

.hud-card > span,
.hud-card > small {
  display: block;
  margin-top: 6px;
  color: #69889b;
  font-size: 9px;
  line-height: 1.5;
}

.card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.live-indicator,
.online-indicator {
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.alert-card {
  top: 42%;
  left: 48%;
  width: 240px;
  border-color: rgba(255, 81, 86, 0.26);
  background:
    linear-gradient(
      145deg,
      rgba(52, 12, 17, 0.94),
      rgba(12, 12, 18, 0.94)
    );
}

.cctv-card {
  top: 25%;
  left: 32%;
  width: 270px;
}

.cctv-viewport {
  position: relative;
  height: 86px;
  margin-top: 14px;
  overflow: hidden;

  border: 1px solid rgba(80, 171, 224, 0.09);
  border-radius: 8px;

  background:
    linear-gradient(135deg, rgba(24, 76, 106, 0.27), rgba(2, 12, 19, 0.6));
}

.camera-grid {
  position: absolute;
  inset: 0;
  opacity: 0.33;
  background-image:
    linear-gradient(rgba(83, 177, 230, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83, 177, 230, 0.08) 1px, transparent 1px);
  background-size: 19px 19px;
}

.camera-target {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
}

.camera-target i {
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--blue);
  border-style: solid;
  opacity: 0.72;
}

.camera-target i:nth-child(1) {
  left: 0;
  top: 0;
  border-width: 1px 0 0 1px;
}

.camera-target i:nth-child(2) {
  right: 0;
  top: 0;
  border-width: 1px 1px 0 0;
}

.camera-target i:nth-child(3) {
  left: 0;
  bottom: 0;
  border-width: 0 0 1px 1px;
}

.camera-target i:nth-child(4) {
  right: 0;
  bottom: 0;
  border-width: 0 1px 1px 0;
}

.camera-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 5%;
  height: 1px;
  background: rgba(75, 197, 255, 0.58);
  box-shadow: 0 0 10px rgba(75, 197, 255, 0.55);
  animation: cameraScan 1.7s linear infinite;
}

@keyframes cameraScan {
  to { top: 95%; }
}

.micro-status {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}

.micro-status span,
.micro-status strong {
  font-family: var(--font-mono);
  font-size: 7px;
}

.micro-status span {
  color: #58788c;
}

.micro-status strong {
  color: #9fc4d9;
  font-weight: 500;
}

.askari-card {
  right: 6%;
  top: 23%;
  width: 300px;
}

.askari-heading {
  display: flex;
  align-items: center;
  gap: 11px;
}

.askari-symbol {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(92, 188, 246, 0.26);
  border-radius: 50%;

  background: rgba(15, 69, 102, 0.17);
  color: var(--blue);

  box-shadow:
    0 0 0 6px rgba(92, 188, 246, 0.03),
    0 0 24px rgba(92, 188, 246, 0.12);

  animation: askariOrb 3s ease-in-out infinite;
}

@keyframes askariOrb {
  50% {
    box-shadow:
      0 0 0 9px rgba(92, 188, 246, 0.02),
      0 0 32px rgba(92, 188, 246, 0.18);
  }
}

.askari-heading small {
  display: block;
  margin-top: 4px;
  color: #58798d;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.09em;
}

.askari-analysis-state {
  margin-top: 17px;
  padding: 8px 10px;

  border-left: 2px solid var(--blue);
  background: rgba(29, 115, 166, 0.08);

  color: #9ccce8;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.12em;
}

.data-grid {
  margin: 15px 0 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
}

.data-grid dt,
.data-grid dd {
  font-family: var(--font-mono);
  font-size: 7px;
}

.data-grid dt {
  color: #59788b;
}

.data-grid dd {
  margin: 0;
  color: #afc7d5;
}

.risk-panel {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(103, 178, 223, 0.09);
}

.risk-panel > span,
.askari-recommendation > span {
  color: #55788d;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.risk-bars {
  display: flex;
  gap: 4px;
  margin: 9px 0 7px;
}

.risk-bars i {
  width: 32px;
  height: 3px;
  border-radius: 10px;
  background: var(--amber);
  box-shadow: 0 0 9px rgba(240, 178, 75, 0.18);
}

.risk-bars i:last-child {
  background: rgba(240, 178, 75, 0.14);
  box-shadow: none;
}

.risk-panel strong {
  color: #d6bd87;
  font-family: var(--font-mono);
  font-size: 7px;
  font-weight: 500;
}

.askari-recommendation {
  margin-top: 13px;
}

.askari-recommendation strong {
  display: block;
  margin-top: 5px;
  color: #d9e8f0;
  font-size: 9px;
  font-weight: 500;
}

.command-card {
  right: 24%;
  top: 42%;
  width: 290px;
}

.command-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.command-topline small {
  display: block;
  margin-top: 4px;
  color: #54768a;
  font-family: var(--font-mono);
  font-size: 7px;
}

.command-dot {
  width: 7px;
  height: 7px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 12px rgba(92, 188, 246, 0.52);
}

.command-divider {
  height: 1px;
  margin: 14px 0 11px;
  background: rgba(105, 174, 216, 0.09);
}

.command-card > small {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.command-actions-list {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 7px 8px;
  align-items: center;
}

.command-actions-list span {
  color: #4f9ecb;
  font-family: var(--font-mono);
  font-size: 7px;
}

.command-actions-list p {
  margin: 0;
  color: #aec5d2;
  font-size: 8px;
}

.command-authorized {
  margin-top: 14px;
  padding: 9px 10px;
  border: 1px solid rgba(62, 208, 154, 0.14);
  border-radius: 7px;
  background: rgba(62, 208, 154, 0.06);
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.officer-card {
  right: 21%;
  bottom: 21%;
  width: 245px;
}

.officer-distance {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.officer-distance small {
  color: #56768a;
  font-family: var(--font-mono);
  font-size: 7px;
}

.officer-distance b {
  color: #bbd1dc;
  font-family: var(--font-mono);
  font-size: 8px;
}

.acknowledged {
  margin-top: 11px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.response-card {
  right: 5%;
  bottom: 19%;
  width: 225px;
}

.response-state {
  margin-top: 8px;
  color: var(--blue);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
}

.response-metrics {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.response-metrics span {
  padding: 10px;
  border: 1px solid rgba(102, 176, 220, 0.08);
  border-radius: 8px;
  background: rgba(7, 29, 43, 0.34);
}

.response-metrics small {
  display: block;
  color: #54758a;
  font-family: var(--font-mono);
  font-size: 6px;
}

.response-metrics b {
  display: block;
  margin-top: 4px;
  color: #c3d8e3;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
}

/* =========================================================
   CLIENT NOTIFICATION
========================================================= */

.client-notification {
  position: absolute;
  z-index: 22;
  right: 5.5%;
  top: 23%;

  width: 305px;
  padding: 16px;

  display: flex;
  gap: 13px;

  border: 1px solid rgba(124, 188, 226, 0.13);
  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 25, 38, 0.96),
      rgba(3, 13, 22, 0.94)
    );

  backdrop-filter: blur(18px);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);

  opacity: 0;
  visibility: hidden;
  transform: translateX(18px);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s ease;
}

.client-notification.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.notification-icon {
  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(92, 188, 246, 0.25);
  border-radius: 11px;

  background: rgba(22, 100, 147, 0.15);
  color: var(--blue);

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.client-notification small {
  color: #55778c;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.08em;
}

.client-notification strong {
  display: block;
  margin-top: 4px;
  color: #edf7fc;
  font-size: 11px;
  font-weight: 600;
}

.client-notification p {
  margin: 6px 0 8px;
  color: #7d9aac;
  font-size: 8px;
  line-height: 1.5;
}

.client-notification span {
  color: #66bce9;
  font-size: 7px;
  font-weight: 600;
}

/* =========================================================
   CONTAINED
========================================================= */

.contained-panel {
  position: absolute;
  z-index: 30;
  left: 50%;
  top: 50%;

  min-width: 390px;
  padding: 19px 22px;

  display: flex;
  align-items: center;
  gap: 14px;

  border: 1px solid rgba(69, 206, 157, 0.2);
  border-radius: 15px;

  background: rgba(4, 28, 26, 0.92);
  backdrop-filter: blur(18px);

  opacity: 0;
  visibility: hidden;

  transform:
    translate(-50%, -50%)
    scale(0.96);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease,
    visibility 0.35s ease;
}

.contained-panel.show {
  opacity: 1;
  visibility: visible;

  transform:
    translate(-50%, -50%)
    scale(1);
}

.contained-check {
  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(73, 212, 163, 0.34);
  border-radius: 50%;

  color: var(--green);
}

.contained-panel small {
  color: #5d8978;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.07em;
}

.contained-panel strong {
  display: block;
  margin-top: 4px;
  color: #e8fff5;
  font-size: 12px;
  letter-spacing: 0.08em;
}

.contained-panel p {
  margin: 5px 0 0;
  color: #78a08f;
  font-size: 8px;
}

/* =========================================================
   INCIDENT PROGRESS
========================================================= */

.incident-progress {
  position: absolute;
  z-index: 24;
  left: 50%;
  bottom: 106px;

  padding: 11px 17px;

  display: flex;
  align-items: center;
  gap: 10px;

  border: 1px solid rgba(105, 174, 216, 0.12);
  border-radius: 22px;

  background: rgba(3, 16, 26, 0.74);
  backdrop-filter: blur(13px);

  opacity: 0;
  visibility: hidden;

  transform: translateX(-50%);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.incident-progress.show {
  opacity: 1;
  visibility: visible;
}

.incident-progress span {
  color: #47697f;
  font-family: var(--font-mono);
  font-size: 6px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.incident-progress span.active {
  color: var(--blue);
}

.incident-progress span.done {
  color: var(--green);
}

.incident-progress i {
  width: 18px;
  height: 1px;
  background: #28495c;
}

/* =========================================================
   HERO COPY
========================================================= */

.hero-copy {
  position: absolute;
  z-index: 22;
  left: var(--page-pad);
  bottom: 112px;

  max-width: 1050px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);

  transition:
    opacity 0.6s ease,
    transform 0.6s ease,
    visibility 0.6s ease;
}

.hero-copy.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.hero-copy > small {
  display: block;
  margin-bottom: 17px;
  color: #5b86a1;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.2em;
}

.hero-copy h1 {
  margin: 0;

  color: white;

  font-size: clamp(47px, 5.7vw, 92px);
  font-weight: 600;
  line-height: 0.91;
  letter-spacing: -0.058em;
}

.hero-copy .accent {
  color: var(--blue);
}

.typing-cursor {
  color: var(--blue);
  font-style: normal;
  font-weight: 300;
  animation: cursorBlink 0.8s step-end infinite;
}

@keyframes cursorBlink {
  50% { opacity: 0; }
}

#heroDescription {
  max-width: 560px;
  margin: 25px 0 0;
  color: #91a9b8;
  font-size: 14px;
  line-height: 1.65;

  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-actions {
  margin-top: 25px;
  display: flex;
  gap: 10px;

  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-actions .button {
  min-height: 48px;
  padding: 0 20px;
}

/* =========================================================
   INTERACTIVE HINT
========================================================= */

.interactive-hint {
  position: absolute;
  z-index: 20;
  right: var(--page-pad);
  bottom: 112px;

  padding: 12px 15px;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;

  border-right: 1px solid rgba(80, 184, 244, 0.28);

  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);

  transition:
    opacity 0.4s ease,
    transform 0.4s ease,
    visibility 0.4s ease;
}

.interactive-hint.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.interactive-hint strong {
  color: #8ab8d2;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.14em;
}

.interactive-hint span {
  color: #4d6f83;
  font-size: 8px;
}

/* =========================================================
   SYSTEM STRIP
========================================================= */

.system-strip {
  position: absolute;
  z-index: 21;
  left: 0;
  right: 0;
  bottom: 0;

  height: 72px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);

  border-top: 1px solid rgba(115, 174, 211, 0.09);

  background: rgba(2, 10, 16, 0.8);
  backdrop-filter: blur(14px);
}

.system-strip > div {
  padding: 0 28px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  border-right: 1px solid rgba(115, 174, 211, 0.07);
}

.system-strip > div:first-child {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 9px;
}

.system-strip > div:last-child {
  border-right: 0;
}

.system-strip strong {
  color: #8ca8ba;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
}

.system-strip small {
  margin-top: 3px;
  color: #3e5e71;
  font-size: 7px;
  letter-spacing: 0.06em;
}

.system-strip > div:first-child span {
  display: flex;
  flex-direction: column;
}

.strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.strip-dot.secure {
  background: var(--green);
  box-shadow: 0 0 10px rgba(62, 208, 154, 0.45);
}

/* =========================================================
   DRAWER
========================================================= */

.node-drawer {
  position: absolute;
  z-index: 90;
  top: 0;
  right: 0;
  bottom: 0;

  width: min(430px, 92vw);
  padding: 125px 38px 38px;

  border-left: 1px solid rgba(111, 178, 217, 0.14);

  background:
    linear-gradient(
      180deg,
      rgba(4, 18, 28, 0.99),
      rgba(2, 10, 17, 0.99)
    );

  backdrop-filter: blur(22px);
  box-shadow: -30px 0 100px rgba(0, 0, 0, 0.36);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform: translateX(100%);

  transition:
    transform 0.4s ease,
    opacity 0.4s ease,
    visibility 0.4s ease;
}

.node-drawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(0);
}

.drawer-backdrop {
  position: absolute;
  z-index: 80;
  inset: 0;

  border: 0;
  background: rgba(0, 5, 9, 0.35);
  backdrop-filter: blur(2px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.drawer-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.drawer-close {
  position: absolute;
  top: 104px;
  right: 28px;

  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(110, 176, 216, 0.13);
  border-radius: 50%;

  background: rgba(5, 21, 31, 0.72);
  color: #7999ad;

  cursor: pointer;
  font-size: 21px;

  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}

.drawer-close:hover {
  color: white;
  border-color: rgba(90, 192, 250, 0.35);
}

.drawer-kicker {
  color: #4ba8de;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.19em;
}

.node-drawer h2 {
  margin: 13px 0 28px;

  color: white;

  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.045em;
}

.drawer-body {
  color: #88a3b4;
}

.drawer-body dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 18px;
  margin: 0;
}

.drawer-body dt,
.drawer-body dd {
  font-family: var(--font-mono);
  font-size: 8px;
}

.drawer-body dt {
  color: #56788d;
}

.drawer-body dd {
  margin: 0;
  color: #b5cbd8;
  text-align: right;
}

.drawer-body p {
  color: #829dac;
  font-size: 10px;
  line-height: 1.75;
}

.drawer-action {
  width: 100%;
  margin-top: 34px;
}

/* =========================================================
   NETWORK BRIDGE
========================================================= */

.network-bridge {
  position: relative;
  min-height: 820px;
  padding: 150px var(--page-pad);
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;

  background:
    radial-gradient(circle at 50% 58%, rgba(17, 89, 131, 0.15), transparent 27%),
    linear-gradient(180deg, #02070c 0%, #03101a 100%);
  text-align: center;
}

.network-bridge::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.11;
  background-image:
    linear-gradient(rgba(92, 169, 217, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 169, 217, 0.12) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 72%);
}

.bridge-eyebrow {
  position: relative;
  z-index: 2;
  color: #5a86a1;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.22em;
}

.network-bridge h2 {
  position: relative;
  z-index: 2;

  max-width: 850px;
  margin: 20px 0 0;

  color: white;

  font-size: clamp(44px, 5.2vw, 78px);
  font-weight: 600;
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.network-bridge h2 span {
  display: block;
  color: var(--blue);
}

.network-bridge > p {
  position: relative;
  z-index: 2;

  max-width: 620px;
  margin: 24px auto 0;

  color: #7993a4;
  font-size: 13px;
  line-height: 1.8;
}

.network-diagram {
  position: relative;
  z-index: 2;

  width: 580px;
  height: 350px;
  margin-top: 60px;
}

.network-center,
.network-node {
  position: absolute;
  display: grid;
  place-items: center;

  border: 1px solid rgba(95, 181, 231, 0.16);
  background: rgba(4, 20, 31, 0.78);
  backdrop-filter: blur(12px);
}

.network-center {
  left: 50%;
  top: 50%;

  width: 118px;
  height: 118px;

  border-radius: 50%;

  transform: translate(-50%, -50%);

  box-shadow:
    0 0 0 14px rgba(92, 188, 246, 0.025),
    0 0 55px rgba(92, 188, 246, 0.1);
}

.network-center span {
  color: var(--blue);
  font-size: 24px;
}

.network-center strong {
  margin-top: -18px;
  color: #b9d9ea;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.11em;
}

.network-node {
  width: 106px;
  height: 42px;

  border-radius: 8px;

  color: #7fa4b9;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.1em;
}

.network-client {
  left: 0;
  top: 44%;
}

.network-command {
  right: 0;
  top: 44%;
}

.network-officer {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.network-hq {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.network-line {
  position: absolute;
  left: 50%;
  top: 50%;

  height: 1px;
  width: 180px;

  transform-origin: left center;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(92, 188, 246, 0.35) 0 7px,
      transparent 7px 13px
    );
}

.line-client {
  transform: rotate(180deg);
}

.line-command {
  transform: rotate(0deg);
}

.line-officer {
  width: 120px;
  transform: rotate(90deg);
}

.line-hq {
  width: 120px;
  transform: rotate(-90deg);
}


/* =========================================================
   GUARDIANOS MOTION ENHANCEMENT V2
========================================================= */

.guardian {
  --px: 0px;
  --py: 0px;
  --spot-x: 50%;
  --spot-y: 50%;
}

.guardian::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 420px;
  height: 420px;
  left: calc(var(--spot-x) - 210px);
  top: calc(var(--spot-y) - 210px);
  border-radius: 50%;
  pointer-events: none;
  opacity: .22;
  background: radial-gradient(circle, rgba(73, 176, 236, .09), transparent 67%);
  transition: opacity .25s ease;
}

.environment-glow-one {
  transform: translate3d(calc(var(--px) * -.35), calc(var(--py) * -.35), 0);
  transition: transform .7s cubic-bezier(.2,.8,.2,1);
}

.environment-glow-two {
  transform: translate3d(calc(var(--px) * .25), calc(var(--py) * .25), 0);
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.facility {
  transform:
    translate3d(var(--px), var(--py), 0)
    perspective(1200px)
    rotateX(62deg)
    rotateZ(-16deg)
    scale(1.08);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}

.ambient-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(98, 191, 245, .45);
  box-shadow: 0 0 10px rgba(98, 191, 245, .32);
  opacity: .08;
  animation: particleDrift var(--d) linear var(--delay) infinite;
}

@keyframes particleDrift {
  0%   { transform: translate3d(0, 20px, 0); opacity: 0; }
  15%  { opacity: .28; }
  60%  { opacity: .12; }
  100% { transform: translate3d(40px, -120px, 0); opacity: 0; }
}

.live-telemetry {
  position: absolute;
  z-index: 26;
  top: 154px;
  right: var(--page-pad);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 11px;
  border: 1px solid rgba(104, 178, 221, .1);
  border-radius: 9px;
  background: rgba(3, 15, 24, .54);
  backdrop-filter: blur(12px);
}

.live-telemetry span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #486c80;
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: .08em;
}

.live-telemetry strong {
  color: #77a4bd;
  font-size: 6px;
  font-weight: 500;
}

.live-telemetry i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(62, 208, 154, .48);
  animation: telemetryPulse 1.8s ease-in-out infinite;
}

@keyframes telemetryPulse {
  50% { transform: scale(1.35); opacity: .65; }
}


/* Node live states + quick views */
.security-node {
  will-change: transform;
}

.security-node .node-orb::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(92,188,246,.09);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.65);
  transition: .25s ease;
}

.security-node:hover .node-orb::after {
  opacity: 1;
  transform: scale(1);
}

.node-quickview {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 12px);
  min-width: 158px;
  padding: 9px 11px;
  border: 1px solid rgba(101,180,226,.14);
  border-radius: 9px;
  background: rgba(3, 16, 26, .94);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 45px rgba(0,0,0,.24);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 7px) scale(.97);
  transition: .22s ease;
}

.security-node:hover .node-quickview,
.security-node:focus-visible .node-quickview {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.node-quickview b,
.node-quickview small {
  display: block;
  font-family: var(--font-mono);
  white-space: nowrap;
}

.node-quickview b {
  color: #b6d3e2;
  font-size: 7px;
  font-weight: 600;
}

.node-quickview small {
  margin-top: 4px;
  color: #53798f;
  font-size: 6px;
}

.security-node.node-alert .node-orb {
  border-color: rgba(255,81,87,.72);
  color: #ff7d82;
  box-shadow:
    0 0 0 7px rgba(255,81,87,.05),
    0 0 28px rgba(255,81,87,.34);
  animation: criticalNode .72s ease-in-out infinite alternate;
}

.security-node.node-active .node-orb {
  border-color: rgba(92,188,246,.72);
  box-shadow:
    0 0 0 8px rgba(92,188,246,.035),
    0 0 32px rgba(92,188,246,.27);
  animation: activeNode 1.05s ease-in-out infinite alternate;
}

.security-node.node-resolved .node-orb {
  border-color: rgba(62,208,154,.55);
  color: var(--green);
  box-shadow:
    0 0 0 7px rgba(62,208,154,.025),
    0 0 25px rgba(62,208,154,.2);
}

@keyframes criticalNode {
  to { transform: scale(1.09); }
}

@keyframes activeNode {
  to { transform: scale(1.07); }
}


/* Stronger route energy */
.security-routes path.active {
  stroke-width: 1.8;
  stroke-dasharray: 5 10 18 10;
  filter:
    drop-shadow(0 0 4px rgba(71,178,243,.78))
    drop-shadow(0 0 11px rgba(71,178,243,.26));
  animation: routeFlow .72s linear infinite;
}


/* Incident flash */
.incident-flash::before {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 48% 61%, rgba(255,81,87,.18), transparent 30%);
  animation: incidentFlash .55s ease-out both;
}

@keyframes incidentFlash {
  0% { opacity: 0; }
  24% { opacity: 1; }
  100% { opacity: 0; }
}


/* Live event stream */
.event-console {
  position: absolute;
  z-index: 22;
  top: 166px;
  left: var(--page-pad);
  width: 310px;
  padding: 12px 13px 11px;
  border: 1px solid rgba(103,177,221,.11);
  border-radius: 11px;
  background: rgba(3, 15, 24, .68);
  backdrop-filter: blur(14px);
  box-shadow: 0 18px 50px rgba(0,0,0,.17);
  transition:
    opacity .35s ease,
    transform .35s ease,
    width .35s ease;
}

.event-console-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(105,174,216,.07);
}

.event-console-head > span,
.event-console-head > strong {
  font-family: var(--font-mono);
  font-size: 6px;
  letter-spacing: .1em;
}

.event-console-head > span {
  color: #62879c;
  display: flex;
  align-items: center;
  gap: 7px;
}

.event-console-head > span i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 9px rgba(62,208,154,.36);
}

.event-console-head > strong {
  color: #4f7489;
  font-weight: 500;
}

.event-log {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.event-entry {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 8px;
  align-items: start;
  padding: 4px 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: .24s ease;
}

.event-entry.arrived {
  opacity: 1;
  transform: translateY(0);
}

.event-entry time,
.event-entry span {
  font-family: var(--font-mono);
  font-size: 6px;
  line-height: 1.45;
}

.event-entry time {
  color: #3e6175;
}

.event-entry span {
  color: #7895a6;
}

.event-danger span { color: #cb7478; }
.event-blue span,
.event-command span { color: #6ba9cc; }
.event-askari span { color: #80bfe2; }
.event-success span { color: #68b493; }
.event-system span { color: #596f7d; }

.event-console.console-compact {
  opacity: .38;
  transform: translateY(-5px) scale(.98);
}

.event-console.console-compact .event-log {
  max-height: 25px;
  overflow: hidden;
}


/* Progress timeline gets a true live fill */
.incident-progress {
  overflow: hidden;
}

.incident-progress-fill {
  position: absolute;
  z-index: -1;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(25,139,207,.08), rgba(92,188,246,.14));
  border-right: 1px solid rgba(92,188,246,.3);
  transition: width .12s linear;
}


/* Simulation control dock */
.simulation-controls {
  position: absolute;
  z-index: 27;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  display: flex;
  align-items: stretch;
  gap: 7px;
  padding: 6px;
  border: 1px solid rgba(101,177,222,.1);
  border-radius: 13px;
  background: rgba(2, 12, 19, .76);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.22);
}

.sim-control {
  min-width: 128px;
  min-height: 46px;
  padding: 0 11px;
  border: 1px solid rgba(101,177,222,.08);
  border-radius: 9px;
  background: rgba(5,22,33,.58);
  color: #7898aa;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  text-align: left;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    color .2s ease;
}

.sim-control:hover {
  transform: translateY(-1px);
  color: white;
  border-color: rgba(92,188,246,.22);
  background: rgba(15,61,89,.44);
}

.sim-control-primary {
  border-color: rgba(255,81,87,.13);
}

.sim-control-primary:hover {
  border-color: rgba(255,81,87,.3);
  background: rgba(82,24,28,.28);
}

.sim-control-icon {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(92,188,246,.12);
  border-radius: 7px;
  color: #67b4df;
  font-family: var(--font-mono);
  font-size: 9px;
}

.sim-control small,
.sim-control strong,
.simulation-clock small,
.simulation-clock strong {
  display: block;
  font-family: var(--font-mono);
}

.sim-control small,
.simulation-clock small {
  color: #42667b;
  font-size: 5px;
  letter-spacing: .11em;
}

.sim-control strong {
  margin-top: 3px;
  color: inherit;
  font-size: 7px;
  font-weight: 500;
}

.simulation-clock {
  min-width: 82px;
  padding: 0 10px;
  border-left: 1px solid rgba(101,177,222,.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.simulation-clock strong {
  margin-top: 4px;
  color: #789caf;
  font-size: 8px;
  font-weight: 500;
}

.guardian.simulation-paused .scan-overlay,
.guardian.simulation-paused .security-routes path,
.guardian.simulation-paused .node-pulse,
.guardian.simulation-paused .ambient-particle {
  animation-play-state: paused !important;
}

.guardian.simulation-paused::after {
  opacity: .08;
}


/* Responsive motion controls */
@media (max-width: 1100px) {
  .event-console {
    width: 270px;
  }

  .sim-control {
    min-width: 108px;
  }
}

@media (max-width: 720px) {
  .live-telemetry,
  .event-console {
    display: none;
  }

  .simulation-controls {
    left: 18px;
    right: 18px;
    bottom: 78px;
    transform: none;
    justify-content: space-between;
  }

  .sim-control {
    min-width: 0;
    flex: 1;
    justify-content: center;
  }

  .sim-control > span:last-child,
  .simulation-clock {
    display: none;
  }

  .sim-control-icon {
    width: 29px;
    height: 29px;
  }

  .node-quickview {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient-particle,
  .live-telemetry i,
  .security-node.node-alert .node-orb,
  .security-node.node-active .node-orb {
    animation: none !important;
  }
}