/* =========================================================
   AGENT NEXUS HQ — CIRCUIT BOARD DEMO CARDS v5
   Animated circuit wires, pulsing nodes, flowing signals
   ========================================================= */

/* ─── Demo Card Container ─── */
.demo-card {
  display: grid !important;
  grid-template-columns: 1.05fr .95fr !important;
  gap: 28px !important;
  align-items: center !important;
  border: 1px solid var(--line2) !important;
  border-radius: 32px !important;
  background: linear-gradient(180deg, rgba(18,24,44,.72), rgba(8,12,24,.78)) !important;
  box-shadow: var(--shadow) !important;
  padding: 30px !important;
}

/* ─── Circuit Board Visual ─── */
.demo-visual.circuit-board {
  height: 360px !important;
  min-height: 360px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(101, 233, 255, 0.2) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(101,233,255,.1), transparent 30%),
    radial-gradient(circle at 70% 70%, rgba(155,124,255,.1), transparent 30%),
    linear-gradient(180deg, #0a0f1e 0%, #070b18 50%, #0a0f1e 100%) !important;
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: 76px 86px 86px 44px !important;
  gap: 12px !important;
  padding: 18px 22px 28px !important;
  align-items: center !important;
  justify-items: stretch !important;
}

/* ─── Animated circuit trace background ─── */
.demo-visual.circuit-board::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    /* Horizontal traces */
    linear-gradient(90deg, transparent 48%, rgba(101,233,255,.15) 49%, rgba(101,233,255,.15) 51%, transparent 52%),
    linear-gradient(90deg, transparent 22%, rgba(101,233,255,.08) 23%, rgba(101,233,255,.08) 25%, transparent 26%),
    linear-gradient(90deg, transparent 76%, rgba(101,233,255,.08) 77%, rgba(101,233,255,.08) 79%, transparent 80%),
    /* Vertical traces */
    linear-gradient(0deg, transparent 35%, rgba(101,233,255,.1) 36%, rgba(101,233,255,.1) 40%, transparent 41%),
    linear-gradient(0deg, transparent 62%, rgba(101,233,255,.06) 63%, rgba(101,233,255,.06) 67%, transparent 68%),
    /* Corner accent brackets */
    linear-gradient(90deg, rgba(101,233,255,.3) 0%, rgba(101,233,255,.3) 100%),
    linear-gradient(0deg, rgba(101,233,255,.3) 0%, rgba(101,233,255,.3) 100%),
    linear-gradient(90deg, rgba(101,233,255,.3) 0%, rgba(101,233,255,.3) 100%),
    linear-gradient(0deg, rgba(101,233,255,.3) 0%, rgba(101,233,255,.3) 100%),
    linear-gradient(90deg, rgba(101,233,255,.3) 0%, rgba(101,233,255,.3) 100%),
    linear-gradient(0deg, rgba(101,233,255,.3) 0%, rgba(101,233,255,.3) 100%),
    linear-gradient(90deg, rgba(101,233,255,.3) 0%, rgba(101,233,255,.3) 100%),
    linear-gradient(0deg, rgba(101,233,255,.3) 0%, rgba(101,233,255,.3) 100%) !important;
  background-position:
    0 50%, 0 35%, 0 65%,
    50% 0, 50% 0,
    16px 16px, 16px 16px,
    calc(100% - 16px) 16px, calc(100% - 16px) 16px,
    16px calc(100% - 26px), 16px calc(100% - 26px),
    calc(100% - 16px) calc(100% - 26px), calc(100% - 16px) calc(100% - 26px) !important;
  background-repeat: no-repeat !important;
  background-size:
    100% 1px, 100% 1px, 100% 1px,
    1px 100%, 1px 100%,
    40px 2px, 2px 40px,
    40px 2px, 2px 40px,
    40px 2px, 2px 40px,
    40px 2px, 2px 40px !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: traceFlicker 5s ease-in-out infinite !important;
}

/* ─── Animated signal particles layer ─── */
.demo-visual.circuit-board .signal-layer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* Signal dots that travel along the wires */
.signal-dot {
  position: absolute !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: #65e9ff !important;
  box-shadow: 0 0 8px #65e9ff, 0 0 16px rgba(101,233,255,.5) !important;
  opacity: 0 !important;
}

/* Top-left to center */
.signal-dot.s1 {
  top: 15% !important;
  left: 15% !important;
  animation: signalTravelTL 3s ease-in-out infinite !important;
}

/* Top-right to center */
.signal-dot.s2 {
  top: 15% !important;
  right: 15% !important;
  animation: signalTravelTR 3s ease-in-out infinite !important;
  animation-delay: .75s !important;
}

/* Bottom-left to center */
.signal-dot.s3 {
  bottom: 15% !important;
  left: 15% !important;
  animation: signalTravelBL 3s ease-in-out infinite !important;
  animation-delay: 1.5s !important;
}

/* Bottom-right to center */
.signal-dot.s4 {
  bottom: 15% !important;
  right: 15% !important;
  animation: signalTravelBR 3s ease-in-out infinite !important;
  animation-delay: 2.25s !important;
}

/* ─── Pulsing circuit nodes ─── */
.circuit-node {
  position: absolute !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: #65e9ff !important;
  box-shadow: 0 0 12px #65e9ff, 0 0 24px rgba(101,233,255,.4) !important;
  z-index: 1 !important;
  animation: nodePulse 2s ease-in-out infinite !important;
}

.circuit-node.n1 { top: 15%; left: 15%; animation-delay: 0s !important; }
.circuit-node.n2 { top: 15%; right: 15%; animation-delay: .5s !important; }
.circuit-node.n3 { bottom: 15%; left: 15%; animation-delay: 1s !important; }
.circuit-node.n4 { bottom: 15%; right: 15%; animation-delay: 1.5s !important; }
.circuit-node.n5 { top: 50%; left: 50%; transform: translate(-50%,-50%) !important; width: 12px !important; height: 12px !important; animation-delay: .25s !important; }

/* ─── Scanning line effect ─── */
.scan-line {
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(101,233,255,.4), transparent) !important;
  z-index: 1 !important;
  animation: scanSweep 4s ease-in-out infinite !important;
  pointer-events: none !important;
}

/* ─── Old proof-orbit cleanup ─── */
.demo-visual.circuit-board .proof-badge,
.demo-visual.circuit-board .orbit-core,
.demo-visual.circuit-board .orbit-lines,
.demo-visual.circuit-board .orbit-card {
  display: none !important;
}

/* Ensure circuit-board itself is visible */
.demo-visual.circuit-board {
  display: grid !important;
}


/* ─── Center Badge (Nexus OS Demo) ─── */
.circuit-badge {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 2 !important;
  width: 178px !important;
  height: 74px !important;
  border-radius: 26px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(135deg, #69e8ff 0%, #93dcff 42%, #aa89ff 100%) !important;
  color: #06101b !important;
  box-shadow:
    0 0 70px rgba(101,233,255,.24),
    inset 0 1px 0 rgba(255,255,255,.45) !important;
  animation: circuitBadgePulse 4.2s ease-in-out infinite !important;
  justify-self: center !important;
  align-self: center !important;
}

.circuit-badge span {
  display: block !important;
  font-family: "SF Pro Display", "Avenir Next", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-weight: 860 !important;
  text-transform: uppercase !important;
  letter-spacing: .115em !important;
  font-size: .92rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  color: #06101b !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.circuit-badge span:last-child {
  font-size: .92rem !important;
  letter-spacing: .14em !important;
}

.circuit-badge::after {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  background: linear-gradient(135deg, rgba(255,255,255,.38), transparent 45%, rgba(255,255,255,.14)) !important;
  pointer-events: none !important;
}

/* ─── Circuit Cards ─── */
.circuit-card,
.demo-visual.circuit-board .circuit-card,
.demo-visual .circuit-card,
.circuit-card.oc1,
.circuit-card.oc2,
.circuit-card.oc3,
.circuit-card.oc4 {
  position: relative !important;
  z-index: 2 !important;
  padding: 14px 16px 14px 28px !important;
  border: 1px solid rgba(101, 233, 255, 0.2) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(11,16,31,.92), rgba(8,12,25,.86)) !important;
  box-shadow:
    0 18px 50px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 84px !important;
  width: auto !important;
  height: 100% !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  overflow: hidden !important;
  text-align: left !important;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}

.circuit-card:hover {
  border-color: rgba(101,233,255,.45) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35), 0 0 30px rgba(101,233,255,.1), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transform: translateY(-2px) !important;
}

/* Circuit card trace lines */
.circuit-card::after,
.demo-visual.circuit-board .circuit-card::after,
.demo-visual .circuit-card::after,
.circuit-card.oc1::after,
.circuit-card.oc2::after,
.circuit-card.oc3::after,
.circuit-card.oc4::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-image:
    linear-gradient(90deg, transparent 10%, rgba(101,233,255,.15) 11%, rgba(101,233,255,.15) 89%, transparent 90%),
    linear-gradient(90deg, transparent 10%, rgba(101,233,255,.1) 11%, rgba(101,233,255,.1) 89%, transparent 90%),
    linear-gradient(0deg, transparent 10%, rgba(101,233,255,.1) 11%, rgba(101,233,255,.1) 89%, transparent 90%),
    linear-gradient(0deg, transparent 10%, rgba(101,233,255,.1) 11%, rgba(101,233,255,.1) 89%, transparent 90%) !important;
  background-position: 0 0, 0 100%, 0 0, 100% 0 !important;
  background-repeat: no-repeat !important;
  background-size: 100% 1px, 100% 1px, 1px 100%, 1px 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 0.6 !important;
}

/* Animated edge glow on cards */
.circuit-card::before,
.demo-visual.circuit-board .circuit-card::before,
.demo-visual .circuit-card::before,
.circuit-card.oc1::before,
.circuit-card.oc2::before,
.circuit-card.oc3::before,
.circuit-card.oc4::before {
  content: "" !important;
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background: var(--green) !important;
  box-shadow: 0 0 14px rgba(109,255,197,.55) !important;
  animation: statusBlink 3s ease-in-out infinite !important;
}

.circuit-card.oc2::before { animation-delay: .75s !important; }
.circuit-card.oc3::before { animation-delay: 1.5s !important; }
.circuit-card.oc4::before { animation-delay: 2.25s !important; }

.circuit-card span,
.demo-visual.circuit-board .circuit-card span,
.demo-visual .circuit-card span,
.proof-orbit .circuit-card span,
.circuit-card.oc1 span,
.circuit-card.oc2 span,
.circuit-card.oc3 span,
.circuit-card.oc4 span {
  display: block !important;
  color: #b8c8dc !important;
  font-size: .72rem !important;
  line-height: 1.2 !important;
  margin: 0 0 3px 0 !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.circuit-card b,
.demo-visual.circuit-board .circuit-card b,
.demo-visual .circuit-card b,
.proof-orbit .circuit-card b,
.circuit-card.oc1 b,
.circuit-card.oc2 b,
.circuit-card.oc3 b,
.circuit-card.oc4 b,
.orbit-card b {
  display: block !important;
  color: #ffffff !important;
  font-size: .88rem !important;
  line-height: 1.18 !important;
  margin: 0 !important;
  font-weight: 700 !important;
  padding-left: 0 !important;
  text-transform: none !important;
  letter-spacing: .02em !important;
  white-space: normal !important;
  text-wrap: balance !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.circuit-card em,
.demo-visual.circuit-board .circuit-card em {
  display: block !important;
  margin-top: 4px !important;
  color: #91ffd3 !important;
  font-size: .58rem !important;
  line-height: 1.15 !important;
  font-style: normal !important;
  letter-spacing: .02em !important;
  opacity: .9 !important;
  white-space: normal !important;
}

.circuit-card.oc3,
.circuit-card.oc4 {
  background:
    linear-gradient(135deg, rgba(101,233,255,.075), transparent 42%),
    linear-gradient(180deg, rgba(11,16,31,.94), rgba(8,12,25,.88)) !important;
  border-color: rgba(109,255,197,.24) !important;
}

/* Card positions */
.circuit-card.oc1 {
  grid-column: 1 !important;
  grid-row: 2 !important;
}

.circuit-card.oc2 {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

.circuit-card.oc3 {
  grid-column: 1 !important;
  grid-row: 3 !important;
}

.circuit-card.oc4 {
  grid-column: 2 !important;
  grid-row: 3 !important;
}

/* ─── Circuit Connection Lines ─── */
.circuit-connections {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: visible !important;
}

.circuit-connections .wire {
  fill: none !important;
  stroke: rgba(101,233,255,.24) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-dasharray: 10 12 !important;
  filter: url(#wireGlow) !important;
  animation: circuitFlow 2.4s linear infinite, wireBreathe 3.8s ease-in-out infinite !important;
}

.circuit-connections .backbone {
  stroke: rgba(101,233,255,.14) !important;
  stroke-width: 1.2 !important;
  stroke-dasharray: 6 14 !important;
  animation-duration: 4.2s, 4.8s !important;
}

.circuit-connections .wire-2,
.circuit-connections .wire-4 { animation-delay: .45s, .2s !important; }
.circuit-connections .wire-3 { animation-delay: .9s, .4s !important; }

.circuit-connections .packet {
  fill: url(#packetGlow) !important;
  filter: url(#wireGlow) !important;
  opacity: .95 !important;
  animation: packetPulse 1.1s ease-in-out infinite !important;
}

/* ─── Bottom Label ─── */
.circuit-label {
  grid-column: 1 / -1 !important;
  grid-row: 4 !important;
  justify-self: center !important;
  align-self: center !important;
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  color: #bfffe7 !important;
  font-size: .64rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-align: center !important;
  white-space: nowrap !important;
  text-shadow: 0 0 14px rgba(109,255,197,.28), 0 0 30px rgba(101,233,255,.14) !important;
  margin-top: -4px !important;
  line-height: 1 !important;
  padding: 8px 16px !important;
  border: 1px solid rgba(145,255,211,.18) !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(101,233,255,.035), rgba(145,255,211,.08), rgba(155,124,255,.035)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 26px rgba(101,233,255,.08) !important;
  backdrop-filter: blur(10px) !important;
}

/* ─── Animations ─── */
@keyframes circuitBadgePulse {
  0%, 100% { transform: scale(.985); }
  50% { transform: scale(1.025); }
}

@keyframes circuitFlow {
  to { stroke-dashoffset: -44; }
}

@keyframes wireBreathe {
  0%, 100% { opacity: .42; }
  50% { opacity: .95; }
}

@keyframes packetPulse {
  0%, 100% { opacity: .55; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.25); }
}

/* Signal dots traveling to center */
@keyframes signalTravelTL {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  10% { opacity: 1; transform: translate(0, 0) scale(1); }
  90% { opacity: 1; transform: translate(180px, 80px) scale(1); }
  100% { opacity: 0; transform: translate(180px, 80px) scale(0); }
}

@keyframes signalTravelTR {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  10% { opacity: 1; transform: translate(0, 0) scale(1); }
  90% { opacity: 1; transform: translate(-180px, 80px) scale(1); }
  100% { opacity: 0; transform: translate(-180px, 80px) scale(0); }
}

@keyframes signalTravelBL {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  10% { opacity: 1; transform: translate(0, 0) scale(1); }
  90% { opacity: 1; transform: translate(180px, -80px) scale(1); }
  100% { opacity: 0; transform: translate(180px, -80px) scale(0); }
}

@keyframes signalTravelBR {
  0% { opacity: 0; transform: translate(0, 0) scale(0); }
  10% { opacity: 1; transform: translate(0, 0) scale(1); }
  90% { opacity: 1; transform: translate(-180px, -80px) scale(1); }
  100% { opacity: 0; transform: translate(-180px, -80px) scale(0); }
}

/* Pulsing circuit nodes */
@keyframes nodePulse {
  0%, 100% { transform: scale(1); opacity: .7; box-shadow: 0 0 12px #65e9ff, 0 0 24px rgba(101,233,255,.3); }
  50% { transform: scale(1.4); opacity: 1; box-shadow: 0 0 20px #65e9ff, 0 0 40px rgba(101,233,255,.6); }
}

/* Status LED blink */
@keyframes statusBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 14px rgba(109,255,197,.55); }
  50% { opacity: .4; box-shadow: 0 0 6px rgba(109,255,197,.2); }
}

/* Trace flicker effect */
@keyframes traceFlicker {
  0%, 100% { opacity: 1; }
  50% { opacity: .85; }
  75% { opacity: .95; }
}

/* Scanning line sweep */
@keyframes scanSweep {
  0% { top: 0; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ─── Responsive ─── */
@media (max-width: 1000px) {
  .demo-card {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .demo-visual.circuit-board {
    height: 320px !important;
    min-height: 320px !important;
  }
}

@media (max-width: 640px) {
  .demo-card {
    padding: 20px !important;
    gap: 18px !important;
  }

  .demo-visual.circuit-board {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: 80px 100px 100px 44px !important;
    gap: 10px !important;
    padding: 14px 14px 18px !important;
    height: auto !important;
    min-height: 356px !important;
  }

  .circuit-badge {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 160px !important;
    height: 72px !important;
    border-radius: 24px !important;
    flex-direction: row !important;
    gap: 6px !important;
    justify-self: center !important;
  }

  .circuit-badge span {
    font-size: .9rem !important;
  }

  .circuit-badge span:last-child {
    font-size: .86rem !important;
    letter-spacing: .13em !important;
  }

  .circuit-card {
    min-height: 90px !important;
    padding: 12px 10px 12px 22px !important;
  }

  .circuit-card span {
    font-size: .64rem !important;
    margin-bottom: 4px !important;
  }

  .circuit-card b {
    font-size: .76rem !important;
  }

  .circuit-card em {
    font-size: .52rem !important;
    line-height: 1.1 !important;
    margin-top: 3px !important;
  }

  .circuit-card.oc1 {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .circuit-card.oc2 {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .circuit-card.oc3 {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .circuit-card.oc4 {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  /* Mobile first-paint hardening: prevents top cards from disappearing until tap */
  .demo-visual.circuit-board .circuit-card,
  .demo-visual.circuit-board .circuit-card.oc1,
  .demo-visual.circuit-board .circuit-card.oc2,
  .demo-visual.circuit-board .circuit-card.oc3,
  .demo-visual.circuit-board .circuit-card.oc4 {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 4 !important;
    background: linear-gradient(180deg, rgba(11,16,31,.94), rgba(8,12,25,.88)) !important;
    transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    contain: paint !important;
  }

  .demo-visual.circuit-board .circuit-card.oc1 *,
  .demo-visual.circuit-board .circuit-card.oc2 * {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .circuit-label {
    grid-row: 4 !important;
    font-size: .56rem !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.25 !important;
    margin-top: 4px !important;
    align-self: center !important;
    padding: 7px 12px !important;
    letter-spacing: .08em !important;
  }

  .circuit-connections,
  .signal-layer,
  .scan-line {
    display: block !important;
  }

  .circuit-connections {
    opacity: .8 !important;
  }

  .circuit-connections .wire {
    stroke-width: 1.25 !important;
    stroke-dasharray: 7 10 !important;
  }

  .circuit-connections .packet {
    transform-origin: center !important;
    opacity: .75 !important;
  }

  .signal-dot {
    width: 3px !important;
    height: 3px !important;
  }

  .signal-dot.s1 { top: 28% !important; left: 22% !important; }
  .signal-dot.s2 { top: 28% !important; right: 22% !important; }
  .signal-dot.s3 { bottom: 26% !important; left: 22% !important; }
  .signal-dot.s4 { bottom: 26% !important; right: 22% !important; }

  .circuit-node { width: 6px !important; height: 6px !important; }
  .circuit-node.n1 { top: 36% !important; left: 25% !important; }
  .circuit-node.n2 { top: 36% !important; right: 25% !important; }
  .circuit-node.n3 { bottom: 29% !important; left: 25% !important; }
  .circuit-node.n4 { bottom: 29% !important; right: 25% !important; }
  .circuit-node.n5 { top: 18% !important; left: 50% !important; }

  .scan-line {
    opacity: .55 !important;
  }
}

/* ─── Accessibility ─── */
@media (prefers-reduced-motion: reduce) {
  .circuit-badge,
  .circuit-connections line,
  .demo-visual.circuit-board::before,
  .signal-dot,
  .circuit-node,
  .circuit-card::before,
  .scan-line {
    animation: none !important;
  }
}

/* ─── Final sizing polish: desktop stays balanced, narrow mobile gets leaner ─── */
@media (min-width: 641px) {
  .demo-visual.circuit-board {
    height: 350px !important;
    min-height: 350px !important;
    grid-template-rows: 74px 82px 82px 40px !important;
    gap: 12px !important;
    padding: 18px 22px 24px !important;
  }

  .demo-visual.circuit-board .circuit-card {
    min-height: 80px !important;
    padding: 12px 15px 12px 28px !important;
    border-radius: 17px !important;
  }

  .demo-visual.circuit-board .circuit-card b {
    font-size: .86rem !important;
    line-height: 1.15 !important;
  }

  .demo-visual.circuit-board .circuit-card em {
    font-size: .56rem !important;
    line-height: 1.1 !important;
  }
}

@media (max-width: 640px) {
  .demo-visual.circuit-board {
    grid-template-rows: 72px 82px 82px 36px !important;
    gap: 8px !important;
    padding: 12px 12px 14px !important;
    min-height: 330px !important;
  }

  .demo-visual.circuit-board .circuit-badge {
    width: 152px !important;
    height: 66px !important;
    border-radius: 22px !important;
  }

  .demo-visual.circuit-board .circuit-badge span {
    font-size: .82rem !important;
    letter-spacing: .105em !important;
  }

  .demo-visual.circuit-board .circuit-badge span:last-child {
    font-size: .8rem !important;
    letter-spacing: .13em !important;
  }

  .demo-visual.circuit-board .circuit-card,
  .demo-visual.circuit-board .circuit-card.oc1,
  .demo-visual.circuit-board .circuit-card.oc2,
  .demo-visual.circuit-board .circuit-card.oc3,
  .demo-visual.circuit-board .circuit-card.oc4 {
    min-height: 78px !important;
    padding: 10px 8px 10px 20px !important;
    border-radius: 16px !important;
  }

  .demo-visual.circuit-board .circuit-card::before {
    left: 9px !important;
    width: 6px !important;
    height: 6px !important;
  }

  .demo-visual.circuit-board .circuit-card span {
    font-size: .58rem !important;
    line-height: 1.12 !important;
    margin-bottom: 3px !important;
  }

  .demo-visual.circuit-board .circuit-card b {
    font-size: .7rem !important;
    line-height: 1.08 !important;
    letter-spacing: .01em !important;
  }

  .demo-visual.circuit-board .circuit-card em {
    font-size: .47rem !important;
    line-height: 1.05 !important;
    margin-top: 3px !important;
  }

  .demo-visual.circuit-board .circuit-label {
    font-size: .48rem !important;
    line-height: 1.18 !important;
    padding: 6px 10px !important;
    margin-top: 2px !important;
  }
}

@media (max-width: 380px) {
  .demo-visual.circuit-board {
    grid-template-rows: 68px 76px 76px 34px !important;
    gap: 7px !important;
    padding: 11px 10px 13px !important;
    min-height: 314px !important;
  }

  .demo-visual.circuit-board .circuit-badge {
    width: 142px !important;
    height: 60px !important;
    border-radius: 20px !important;
  }

  .demo-visual.circuit-board .circuit-badge span {
    font-size: .76rem !important;
    letter-spacing: .1em !important;
  }

  .demo-visual.circuit-board .circuit-card,
  .demo-visual.circuit-board .circuit-card.oc1,
  .demo-visual.circuit-board .circuit-card.oc2,
  .demo-visual.circuit-board .circuit-card.oc3,
  .demo-visual.circuit-board .circuit-card.oc4 {
    min-height: 74px !important;
    padding: 9px 7px 9px 18px !important;
    border-radius: 15px !important;
  }

  .demo-visual.circuit-board .circuit-card span { font-size: .54rem !important; }
  .demo-visual.circuit-board .circuit-card b { font-size: .66rem !important; }
  .demo-visual.circuit-board .circuit-card em { font-size: .44rem !important; }
}

/* Extra safe space under Product Proof on very narrow phones so sticky CTA never crowds the visual */
@media (max-width: 640px) {
  .demo-section.compact-section {
    padding-bottom: 96px !important;
  }
}

@media (max-width: 380px) {
  .demo-section.compact-section {
    padding-bottom: 112px !important;
  }
}