/* Generated from the validated technical diagrams. Layout rules belong in site.css. */

.sl-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
}

.sl-svg text {
  font-family: var(--font-display);
  font-weight: 700;
  text-anchor: middle;
  user-select: none;
}

.sl-panel-bg {
  fill: rgba(3, 7, 13, 0.42);
  stroke: rgba(94, 235, 255, 0.12);
  stroke-width: 1.4;
}

.sl-signal-line,
.sl-direct-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sl-signal-line {
  stroke: rgba(94, 235, 255, 0.54);
  stroke-width: 2;
  stroke-dasharray: 10 14;
  animation: slDashFlow 7s linear infinite;
}

.sl-rendezvous-signal-lines {
  animation: slRendezvousSignalLines 10s ease-in-out infinite;
}

.sl-signal-line-soft {
  stroke: rgba(94, 235, 255, 0.36);
}

.sl-direct-line {
  stroke: rgba(141, 240, 194, 0.78);
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(141, 240, 194, 0.5));
  animation: slDirectPulse 6.8s ease-in-out infinite;
}

.sl-rendezvous-direct-lines {
  opacity: 0;
  animation: slRendezvousDirectLines 10s ease-in-out infinite;
}

.sl-rendezvous-direct-lines .sl-direct-line {
  stroke-width: 4;
  filter:
    drop-shadow(0 0 12px rgba(141, 240, 194, 0.58))
    drop-shadow(0 0 24px rgba(94, 235, 255, 0.18));
}

.sl-direct-line-encrypted {
  stroke: rgba(94, 235, 255, 0.78);
  filter: drop-shadow(0 0 10px rgba(94, 235, 255, 0.48));
}

.sl-encryption-network-line {
  fill: none;
  stroke: rgba(141, 240, 194, 0.76);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 12 12;
  filter: drop-shadow(0 0 12px rgba(141, 240, 194, 0.42));
  opacity: 0.2;
  animation: slEncryptionNetwork 14s ease-in-out infinite;
}

.sl-node-halo,
.sl-server-halo {
  fill: rgba(94, 235, 255, 0.08);
  stroke: rgba(94, 235, 255, 0.18);
  stroke-width: 1.4;
  transform-box: fill-box;
  transform-origin: center;
  animation: slNodeBreath 5.6s ease-in-out infinite;
}

.sl-node-core {
  fill: rgba(3, 7, 13, 0.92);
  stroke: rgba(141, 240, 194, 0.56);
  stroke-width: 2;
  filter: drop-shadow(0 0 12px rgba(141, 240, 194, 0.42));
}

.sl-server-core,
.sl-lock-block rect,
.sl-local-queue > rect {
  fill: rgba(3, 7, 13, 0.88);
  stroke: rgba(94, 235, 255, 0.34);
  stroke-width: 1.6;
}

.sl-server-line,
.sl-lock-loop,
.sl-envelope path {
  fill: none;
  stroke: rgba(94, 235, 255, 0.72);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.sl-node-label {
  fill: var(--white);
  font-size: 26px;
  letter-spacing: 0.05em;
}

.sl-node-caption {
  fill: rgba(248, 251, 255, 0.7);
  font-size: 16px;
  letter-spacing: 0.03em;
}

.sl-visual-badge {
  fill: rgba(94, 235, 255, 0.9);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sl-visual-badge-green {
  fill: rgba(141, 240, 194, 0.9);
}

.sl-packet {
  fill: var(--cyan);
  filter: drop-shadow(0 0 10px rgba(94, 235, 255, 0.74));
}

.sl-packet-signal {
  opacity: 0.92;
}

.sl-rendezvous-packet {
  opacity: 0;
}

.sl-packet-return {
  fill: rgba(94, 235, 255, 0.92);
  filter: drop-shadow(0 0 10px rgba(94, 235, 255, 0.76));
}

.sl-packet-direct {
  fill: var(--green);
  filter: drop-shadow(0 0 10px rgba(141, 240, 194, 0.72));
}

.sl-packet-direct-alt {
  fill: var(--cyan);
  filter: drop-shadow(0 0 10px rgba(94, 235, 255, 0.72));
}

.sl-packet-clear {
  fill: rgba(248, 251, 255, 0.86);
}

.sl-packet-message {
  fill: rgba(94, 235, 255, 0.96);
  filter: drop-shadow(0 0 11px rgba(94, 235, 255, 0.72));
}

.sl-encryption-packet {
  opacity: 0;
}

.sl-phase-label {
  opacity: 0;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.sl-phase-label-one {
  animation-name: slPhaseLabelOne;
}

.sl-phase-label-two {
  animation-name: slPhaseLabelTwo;
}

.sl-phase-label-three {
  animation-name: slPhaseLabelThree;
}

.sl-client-shell rect {
  fill: rgba(3, 7, 13, 0.58);
  stroke: rgba(94, 235, 255, 0.2);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 18px rgba(94, 235, 255, 0.1));
}

.sl-client-shell-b rect {
  stroke: rgba(141, 240, 194, 0.24);
}

.sl-app-zone rect,
.sl-transport-zone rect {
  fill: rgba(3, 7, 13, 0.84);
  stroke: rgba(94, 235, 255, 0.26);
  stroke-width: 1.4;
}

.sl-transport-zone rect {
  fill: rgba(94, 235, 255, 0.06);
  stroke: rgba(141, 240, 194, 0.24);
}

.sl-app-zone text,
.sl-transport-zone text {
  fill: rgba(248, 251, 255, 0.78);
  font-size: 14px;
  letter-spacing: 0.03em;
}

.sl-transport-zone text {
  fill: rgba(141, 240, 194, 0.84);
  font-size: 13px;
}

.sl-mini-lock {
  opacity: 0.72;
  filter: drop-shadow(0 0 10px rgba(94, 235, 255, 0.32));
}

.sl-mini-lock-message {
  animation: slMessageLockPulse 14s ease-in-out infinite;
}

.sl-mini-lock-transport {
  animation: slTransportLockPulse 14s ease-in-out infinite;
}

.sl-mini-lock text {
  fill: rgba(248, 251, 255, 0.62);
  font-size: 11px;
}

.sl-secure-envelope {
  opacity: 0;
  filter:
    drop-shadow(0 0 12px rgba(141, 240, 194, 0.56))
    drop-shadow(0 0 22px rgba(94, 235, 255, 0.28));
}

.sl-secure-envelope rect {
  fill: rgba(3, 7, 13, 0.92);
  stroke: rgba(141, 240, 194, 0.72);
  stroke-width: 1.6;
}

.sl-secure-envelope path {
  fill: none;
  stroke: rgba(141, 240, 194, 0.76);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.sl-secure-envelope .sl-envelope-lock-one,
.sl-secure-envelope .sl-envelope-lock-two {
  fill: rgba(3, 7, 13, 0.9);
  stroke-width: 1.5;
}

.sl-secure-envelope .sl-envelope-lock-one {
  stroke: rgba(94, 235, 255, 0.86);
}

.sl-secure-envelope .sl-envelope-lock-two {
  stroke: rgba(141, 240, 194, 0.86);
}

.sl-encryption-phase {
  opacity: 0;
  animation-duration: 14s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.sl-encryption-phase-one {
  animation-name: slEncryptionPhaseOne;
}

.sl-encryption-phase-two {
  animation-name: slEncryptionPhaseTwo;
}

.sl-encryption-phase-three {
  animation-name: slEncryptionPhaseThree;
}

.sl-message-card rect,
.sl-envelope rect {
  fill: rgba(3, 7, 13, 0.86);
  stroke: rgba(94, 235, 255, 0.3);
  stroke-width: 1.6;
}

.sl-message-card text {
  fill: rgba(248, 251, 255, 0.78);
  font-size: 16px;
}

.sl-lock-block {
  animation: slLockPulse 6.4s ease-in-out infinite;
}

.sl-lock-body {
  fill: rgba(94, 235, 255, 0.14);
}

.sl-lock-dot {
  fill: var(--green);
  filter: drop-shadow(0 0 10px rgba(141, 240, 194, 0.72));
}

.sl-envelope {
  animation: slEnvelopePulse 6.4s ease-in-out infinite;
}

.sl-queue-item {
  fill: rgba(94, 235, 255, 0.28);
  stroke: rgba(94, 235, 255, 0.22);
  stroke-width: 1;
  animation: slQueueItem 7s ease-in-out infinite;
}

.sl-queue-item-two {
  animation-delay: 320ms;
}

.sl-queue-item-three {
  animation-delay: 640ms;
}

.sl-offline-server-link-a {
  stroke: rgba(94, 235, 255, 0.58);
  animation:
    slDashFlow 7s linear infinite,
    slOfflineAConnection 12s ease-in-out infinite;
}

.sl-offline-alert-link {
  fill: none;
  stroke: rgba(255, 88, 88, 0.86);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8 12;
  opacity: 0;
  filter: drop-shadow(0 0 14px rgba(255, 88, 88, 0.72));
  animation: slOfflineAlertLink 12s ease-in-out infinite;
}

.sl-offline-server-link-b {
  opacity: 0;
  stroke: rgba(141, 240, 194, 0.72);
  animation:
    slDashFlow 7s linear infinite,
    slOfflineBConnection 12s ease-in-out infinite;
}

.sl-offline-delivery-line {
  opacity: 0;
  stroke-width: 4;
  filter:
    drop-shadow(0 0 14px rgba(141, 240, 194, 0.58))
    drop-shadow(0 0 24px rgba(94, 235, 255, 0.2));
  animation: slOfflineDeliveryLine 12s ease-in-out infinite;
}

.sl-offline-client-shell {
  fill: rgba(3, 7, 13, 0.64);
  stroke: rgba(94, 235, 255, 0.22);
  stroke-width: 1.6;
  filter:
    drop-shadow(0 0 18px rgba(94, 235, 255, 0.12))
    drop-shadow(0 0 42px rgba(0, 0, 0, 0.2));
}

.sl-offline-message-compose rect,
.sl-offline-queue-frame > rect {
  fill: rgba(3, 7, 13, 0.86);
  stroke: rgba(94, 235, 255, 0.28);
  stroke-width: 1.4;
}

.sl-offline-message-compose text {
  fill: rgba(248, 251, 255, 0.78);
  font-size: 14px;
}

.sl-offline-lock-local {
  animation: slOfflineLockPulse 12s ease-in-out infinite;
}

.sl-offline-queue-frame > text {
  fill: rgba(248, 251, 255, 0.64);
  font-size: 12px;
}

.sl-offline-queue-item {
  fill: rgba(94, 235, 255, 0.24);
  stroke: rgba(94, 235, 255, 0.22);
  stroke-width: 1;
  opacity: 0;
}

.sl-offline-queue-item-one {
  animation: slOfflineQueueOne 12s ease-in-out infinite;
}

.sl-offline-queue-item-two {
  animation: slOfflineQueueTwo 12s ease-in-out infinite;
}

.sl-offline-queue-item-three {
  animation: slOfflineQueueThree 12s ease-in-out infinite;
}

.sl-offline-client-b .sl-node-halo,
.sl-offline-client-b .sl-peer-core {
  animation-duration: 12s;
}

.sl-offline-phase {
  opacity: 0;
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.sl-offline-phase-one {
  animation-name: slOfflinePhaseOne;
}

.sl-offline-phase-two {
  animation-name: slOfflinePhaseTwo;
}

.sl-offline-phase-three {
  animation-name: slOfflinePhaseThree;
}

.sl-offline-server-packet,
.sl-offline-compose-packet,
.sl-offline-queued-packet,
.sl-offline-server-packet-b,
.sl-offline-server-packet-b-return,
.sl-offline-delivery-packet {
  opacity: 0;
}

.sl-offline-delivery-packet-two {
  filter:
    drop-shadow(0 0 10px rgba(141, 240, 194, 0.72))
    drop-shadow(0 0 18px rgba(94, 235, 255, 0.28));
}

.sl-peer-core {
  animation: slPeerCore 12s ease-in-out infinite;
}

.sl-state-offline {
  fill: rgba(255, 180, 95, 0.86);
}

.sl-state-online {
  fill: rgba(141, 240, 194, 0.9);
}

.ai-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 340px;
}

.ai-svg text {
  font-family: var(--font-display);
  font-weight: 700;
  text-anchor: middle;
  user-select: none;
}

.ai-panel-bg {
  fill: rgba(3, 7, 13, 0.42);
  stroke: rgba(94, 235, 255, 0.12);
  stroke-width: 1.4;
}

.ai-app-core rect,
.ai-scan-node circle,
.ai-signal-stack rect,
.ai-checklist rect,
.ai-issue-card rect,
.ai-ready-card rect {
  fill: rgba(3, 7, 13, 0.86);
  stroke: rgba(94, 235, 255, 0.32);
  stroke-width: 1.6;
}

.ai-app-core text,
.ai-scan-node text,
.ai-signal-stack text,
.ai-triage-core text,
.ai-priority-stack text,
.ai-issue-card text,
.ai-ready-card text {
  fill: rgba(248, 251, 255, 0.78);
  font-size: 15px;
  letter-spacing: 0.03em;
}

.ai-app-core rect {
  stroke: rgba(141, 240, 194, 0.46);
  filter: drop-shadow(0 0 18px rgba(94, 235, 255, 0.26));
}

.ai-scan-node circle {
  fill: rgba(94, 235, 255, 0.08);
  transform-box: fill-box;
  transform-origin: center;
  animation: aiNodePing 6.8s ease-in-out infinite;
}

.ai-link,
.ai-flow-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ai-link {
  stroke: rgba(94, 235, 255, 0.42);
  stroke-width: 2;
  stroke-dasharray: 7 11;
  animation: aiDashFlow 7s linear infinite;
}

.ai-link-two,
.ai-link-four {
  animation-delay: 680ms;
}

.ai-flow-line {
  stroke: rgba(94, 235, 255, 0.62);
  stroke-width: 3;
  stroke-dasharray: 14 16;
  filter: drop-shadow(0 0 10px rgba(94, 235, 255, 0.44));
  animation: aiDashFlow 7s linear infinite;
}

.ai-scan-sweep {
  fill: rgba(94, 235, 255, 0.13);
  stroke: rgba(94, 235, 255, 0.34);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 22px rgba(94, 235, 255, 0.32));
  animation: aiScanSweep 6.8s ease-in-out infinite;
}

.ai-finding {
  fill: #ffb45f;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 12px rgba(255, 180, 95, 0.7));
  animation: aiFindingPulse 6.8s ease-in-out infinite;
}

.ai-finding-two {
  animation-delay: 520ms;
}

.ai-visual-badge {
  fill: rgba(94, 235, 255, 0.9);
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ai-visual-badge-warn {
  fill: rgba(255, 180, 95, 0.92);
}

.ai-visual-badge-green {
  fill: rgba(141, 240, 194, 0.92);
}

.ai-triage-core path {
  fill: rgba(94, 235, 255, 0.08);
  stroke: rgba(94, 235, 255, 0.36);
  stroke-width: 1.8;
  filter: drop-shadow(0 0 18px rgba(94, 235, 255, 0.22));
}

.ai-priority-card {
  fill: rgba(3, 7, 13, 0.88);
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
  animation: aiPriorityCard 7s ease-in-out infinite;
}

.ai-priority-critical {
  stroke: rgba(255, 125, 115, 0.58);
}

.ai-priority-high {
  stroke: rgba(255, 180, 95, 0.58);
  animation-delay: 260ms;
}

.ai-priority-medium {
  stroke: rgba(94, 235, 255, 0.44);
  animation-delay: 520ms;
}

.ai-packet {
  fill: var(--cyan);
  filter: drop-shadow(0 0 11px rgba(94, 235, 255, 0.76));
}

.ai-packet-priority {
  fill: #ffb45f;
  filter: drop-shadow(0 0 11px rgba(255, 180, 95, 0.72));
}

.ai-packet-fix {
  fill: var(--green);
  filter: drop-shadow(0 0 11px rgba(141, 240, 194, 0.72));
}

.ai-issue-card rect {
  stroke: rgba(255, 180, 95, 0.46);
  animation: aiIssuePulse 7.4s ease-in-out infinite;
}

.ai-issue-card circle {
  fill: #ffb45f;
  filter: drop-shadow(0 0 10px rgba(255, 180, 95, 0.72));
}

.ai-checklist rect {
  stroke: rgba(94, 235, 255, 0.38);
}

.ai-checklist line {
  stroke: rgba(248, 251, 255, 0.28);
  stroke-width: 4;
  stroke-linecap: round;
}

.ai-check {
  fill: none;
  stroke: rgba(141, 240, 194, 0.88);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 72;
  stroke-dashoffset: 72;
  filter: drop-shadow(0 0 9px rgba(141, 240, 194, 0.6));
  animation: aiCheckDraw 7.4s ease-in-out infinite;
}

.ai-check-two {
  animation-delay: 320ms;
}

.ai-check-three {
  animation-delay: 640ms;
}

.ai-ready-card rect {
  stroke: rgba(141, 240, 194, 0.42);
  animation: aiReadyPulse 7.4s ease-in-out infinite;
}

.ai-ready-card path {
  fill: none;
  stroke: rgba(141, 240, 194, 0.88);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px rgba(141, 240, 194, 0.62));
  animation: aiReadyMark 7.4s ease-in-out infinite;
}

.antipulse-visual,
.argos-visual,
.shadow-relay-visual {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(94, 235, 255, 0.15);
  border-radius: 28px;
  background:
    linear-gradient(rgba(248, 251, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 251, 255, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(94, 235, 255, 0.16), transparent 48%),
    rgba(1, 4, 10, 0.72);
  background-size: 42px 42px, 42px 42px, auto, auto;
  box-shadow:
    inset 0 1px 0 rgba(248, 251, 255, 0.08),
    inset 0 0 78px rgba(94, 235, 255, 0.07);
}

.endpoint,
.route-node,
.data-pulse,
.route-label,
.argos-app,
.argos-vault,
.argos-shield,
.argos-attacker,
.argos-contact,
.argos-link,
.argos-fracture,
.route {
  position: absolute;
  display: block;
}

.argos-app,
.argos-vault,
.argos-shield,
.argos-attacker,
.argos-contact {
  z-index: 3;
  display: grid;
  place-items: center;
  border: 1px solid rgba(94, 235, 255, 0.18);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
}

.argos-app {
  top: 10%;
  left: 8%;
  width: 84px;
  height: 58px;
  border-radius: 18px;
  background: rgba(94, 235, 255, 0.1);
}

.argos-vault {
  top: 34%;
  left: 50%;
  width: 124px;
  height: 124px;
  border-color: rgba(141, 240, 194, 0.32);
  border-radius: 28px;
  color: var(--green);
  background:
    radial-gradient(circle at 50% 42%, rgba(141, 240, 194, 0.18), transparent 58%),
    rgba(3, 7, 13, 0.86);
  box-shadow: 0 0 42px rgba(141, 240, 194, 0.16);
  transform: translateX(-50%);
  animation: argosVaultState 8s ease-in-out infinite;
}

.argos-shield {
  top: 31%;
  left: 50%;
  z-index: 5;
  width: 154px;
  height: 154px;
  border-color: rgba(94, 235, 255, 0.42);
  border-radius: 999px;
  color: var(--cyan);
  background: rgba(3, 7, 13, 0.72);
  box-shadow: 0 0 52px rgba(94, 235, 255, 0.24);
  opacity: 0;
  transform: translateX(-50%) scale(0.82);
  animation: argosShield 8s ease-in-out infinite;
}

.argos-attacker {
  right: 8%;
  top: 13%;
  width: 112px;
  height: 42px;
  border-color: rgba(255, 125, 115, 0.28);
  border-radius: 999px;
  color: var(--gold);
  background: rgba(255, 125, 115, 0.08);
  font-size: 11px;
  animation: argosAttack 8s ease-in-out infinite;
}

.argos-contact {
  bottom: 14%;
  width: 56px;
  height: 56px;
  border-color: rgba(141, 240, 194, 0.28);
  border-radius: 18px;
  color: var(--green);
  background: rgba(141, 240, 194, 0.08);
  font-size: 0;
}

.argos-contact::before {
  width: 15px;
  height: 15px;
  border-radius: 999px;
  content: "";
  background: currentColor;
  box-shadow: 0 0 18px currentColor;
}

.argos-link {
  z-index: 1;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(94, 235, 255, 0.72), transparent);
  box-shadow: 0 0 18px rgba(94, 235, 255, 0.2);
  transform-origin: left center;
}

.argos-link-app {
  top: 25%;
  left: 22%;
  width: 28%;
  transform: rotate(24deg);
}

.argos-link-contact-one {
  top: 63%;
  left: 28%;
  width: 22%;
  transform: rotate(-28deg);
}

.argos-link-contact-two {
  top: 64%;
  left: 50%;
  width: 23%;
  transform: rotate(25deg);
}

.argos-fracture {
  top: 38%;
  left: 49%;
  z-index: 6;
  width: 80px;
  height: 80px;
  border-left: 2px solid rgba(255, 125, 115, 0.8);
  border-right: 2px solid rgba(255, 125, 115, 0.48);
  opacity: 0;
  transform: rotate(18deg);
  filter: drop-shadow(0 0 18px rgba(255, 125, 115, 0.4));
  animation: argosFracture 8s ease-in-out infinite;
}

.paranode-page .antipulse-visual,
.paranode-page .argos-visual {
  border-color: rgba(182, 123, 255, 0.18);
  background:
    linear-gradient(rgba(248, 251, 255, 0.042) 1px, transparent 1px),
    linear-gradient(90deg, rgba(248, 251, 255, 0.042) 1px, transparent 1px),
    radial-gradient(circle at 50% 50%, rgba(182, 123, 255, 0.16), transparent 48%),
    rgba(2, 2, 9, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(248, 251, 255, 0.08),
    inset 0 0 90px rgba(182, 123, 255, 0.08),
    0 0 44px rgba(122, 77, 255, 0.08);
}

.paranode-page .route-label-bypass,
.paranode-page .argos-vault,
.paranode-page .argos-contact {
  color: #d7c0ff;
}

.paranode-page .argos-app,
.paranode-page .argos-vault,
.paranode-page .argos-shield,
.paranode-page .argos-contact {
  border-color: rgba(182, 123, 255, 0.24);
}

.paranode-page .argos-app {
  background: rgba(182, 123, 255, 0.11);
}

.paranode-page .argos-vault {
  background:
    radial-gradient(circle at 50% 42%, rgba(182, 123, 255, 0.22), transparent 58%),
    rgba(3, 2, 10, 0.9);
  box-shadow: 0 0 48px rgba(182, 123, 255, 0.18);
}

.paranode-page .argos-shield {
  border-color: rgba(255, 79, 216, 0.46);
  color: var(--paranode-violet);
  box-shadow: 0 0 58px rgba(182, 123, 255, 0.26);
}

.paranode-page .argos-contact {
  background: rgba(182, 123, 255, 0.09);
}

.paranode-page .argos-link {
  background: linear-gradient(90deg, transparent, rgba(182, 123, 255, 0.74), transparent);
  box-shadow: 0 0 20px rgba(182, 123, 255, 0.2);
}

.mechanic-demo {
  min-height: clamp(360px, 28vw, 520px);
}

.mechanic-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: clamp(360px, 28vw, 520px);
}

.ap-panel,
.av-panel {
  fill: rgba(3, 2, 10, 0.62);
  stroke: rgba(182, 123, 255, 0.22);
  stroke-width: 1.4;
}

.ap-link,
.av-link,
.av-internal-link {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ap-link {
  stroke-width: 7;
}

.ap-primary-stable {
  stroke: url("#ap-primary-gradient");
  opacity: 0.88;
  filter: drop-shadow(0 0 12px rgba(182, 123, 255, 0.35));
}

.ap-risk-segment {
  stroke: url("#ap-primary-gradient");
  animation: apRiskSegment 12s ease-in-out infinite;
}

.ap-bypass-path {
  stroke: url("#ap-bypass-gradient");
  stroke-dasharray: 18 16;
  animation: apBypassPath 12s ease-in-out infinite;
}

.ap-endpoint circle {
  fill: rgba(3, 7, 13, 0.88);
  stroke: rgba(182, 123, 255, 0.62);
  stroke-width: 2;
  filter: drop-shadow(0 0 16px rgba(182, 123, 255, 0.35));
}

.ap-endpoint text,
.ap-node text,
.ap-status text,
.av-app text,
.av-attacker text,
.av-vault-title,
.av-vault-subtitle,
.av-cell text,
.av-shield text,
.av-quarantine text,
.av-wipe-label text {
  font-family: var(--font-display);
  font-weight: 700;
  text-anchor: middle;
  text-transform: uppercase;
}

.ap-endpoint text {
  fill: var(--white);
  font-size: 20px;
}

.ap-node circle {
  fill: #8df0c2;
  stroke: rgba(248, 251, 255, 0.58);
  stroke-width: 3;
  filter: drop-shadow(0 0 16px rgba(141, 240, 194, 0.35));
}

.ap-node text {
  fill: rgba(248, 251, 255, 0.72);
  font-size: 17px;
}

.ap-node-risk circle {
  animation: apNodeRiskState 12s ease-in-out infinite;
}

.ap-node-safe {
  animation: apSafeNodeReady 12s ease-in-out infinite;
}

.ap-risk-label-ok,
.ap-risk-label-watch {
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.ap-risk-label-ok {
  animation-name: apRiskLabelOk;
}

.ap-risk-label-watch {
  opacity: 0;
  animation-name: apRiskLabelWatch;
}

.ap-packet {
  fill: #8fdcff;
  opacity: 0.95;
}

.ap-packet-bypass {
  fill: #8df0c2;
}

.ap-status rect {
  fill: rgba(3, 2, 10, 0.74);
  stroke: rgba(182, 123, 255, 0.22);
  stroke-width: 1;
}

.ap-status text {
  fill: rgba(248, 251, 255, 0.72);
  font-size: 15px;
}

.ap-status-risk {
  animation: apStatusRisk 12s ease-in-out infinite;
}

.ap-status-bypass {
  animation: apStatusBypass 12s ease-in-out infinite;
}

.av-link,
.av-internal-link {
  stroke: rgba(182, 123, 255, 0.64);
  stroke-width: 4;
  filter: drop-shadow(0 0 10px rgba(182, 123, 255, 0.28));
}

.av-internal-link {
  stroke-width: 2.5;
  opacity: 0.58;
}

.av-internal-three {
  animation: avInternalContactAccess 12s ease-in-out infinite;
}

.av-app rect,
.av-attacker rect {
  fill: rgba(182, 123, 255, 0.12);
  stroke: rgba(182, 123, 255, 0.32);
  stroke-width: 2;
}

.av-app text {
  fill: var(--white);
  font-size: 24px;
}

.av-vault-shell {
  fill: url("#vault-gradient");
  stroke: rgba(182, 123, 255, 0.34);
  stroke-width: 2;
  filter: drop-shadow(0 0 28px rgba(182, 123, 255, 0.18));
  animation: avVaultPressure 12s ease-in-out infinite;
}

.av-vault-core {
  fill: rgba(3, 2, 10, 0.76);
  stroke: rgba(143, 220, 255, 0.24);
  stroke-width: 1.5;
}

.av-vault-title {
  fill: #d7c0ff;
  font-size: 25px;
}

.av-vault-subtitle {
  fill: rgba(248, 251, 255, 0.58);
  font-size: 15px;
  letter-spacing: 0.08em;
}

.av-cell rect {
  fill: rgba(182, 123, 255, 0.1);
  stroke: rgba(182, 123, 255, 0.34);
  stroke-width: 1.5;
  animation: avCellRectLockdown 12s ease-in-out infinite;
}

.av-cell circle {
  fill: #8df0c2;
  filter: drop-shadow(0 0 14px rgba(141, 240, 194, 0.58));
  animation: avCellSignalLockdown 12s ease-in-out infinite;
}

.av-cell text {
  fill: rgba(248, 251, 255, 0.64);
  font-size: 14px;
}

.av-cell-wipe rect {
  animation-name: avCellRectWipe;
}

.av-cell-wipe circle {
  animation-name: avCellSignalWipe;
}

.av-cell-wipe text {
  animation-name: avCellTextWipe;
}

.av-cell-wipe text {
  animation-duration: 12s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.av-attacker rect {
  fill: rgba(255, 125, 115, 0.08);
  stroke: rgba(255, 125, 115, 0.34);
}

.av-attacker {
  opacity: 0;
  animation: avAttackerAppear 12s ease-in-out infinite;
}

.av-attacker text {
  fill: var(--gold);
  font-size: 17px;
}

.av-attack-line {
  fill: none;
  stroke: rgba(255, 125, 115, 0.62);
  stroke-width: 4;
  stroke-dasharray: 14 12;
  stroke-linecap: round;
  animation:
    avAttackLineState 12s ease-in-out infinite,
    avAttackDash 12s linear infinite;
  filter: drop-shadow(0 0 12px rgba(255, 125, 115, 0.24));
}

.av-attack-pulse {
  fill: #ff7d73;
}

.av-data {
  fill: #8df0c2;
  animation: avDataAppFlow 12s ease-in-out infinite;
}

.av-data-contact {
  fill: #8df0c2;
  animation-name: avDataContactFlow;
}

.av-shield {
  opacity: 0;
  animation: avShieldLock 12s ease-in-out infinite;
}

.av-shield rect {
  fill: rgba(3, 2, 10, 0.18);
  stroke: rgba(182, 123, 255, 0.7);
  stroke-width: 4;
  filter: drop-shadow(0 0 24px rgba(182, 123, 255, 0.38));
}

.av-shield text,
.av-quarantine text,
.av-wipe-label text {
  fill: #d7c0ff;
  font-size: 17px;
  letter-spacing: 0.08em;
}

.av-quarantine {
  opacity: 0;
  animation: avQuarantineLabel 12s ease-in-out infinite;
}

.av-quarantine rect {
  fill: rgba(255, 125, 115, 0.08);
  stroke: rgba(255, 125, 115, 0.45);
  stroke-width: 2;
  stroke-dasharray: 8 8;
}

.av-wipe-label {
  opacity: 0;
  animation: avWipeLabel 12s ease-in-out infinite;
}

.av-wipe-label text {
  fill: #ffb45f;
  font-size: 15px;
}

.av-wipe-fragments {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: avWipeFragments 12s ease-in-out infinite;
}

.av-wipe-fragments circle {
  fill: #ff7d73;
  filter: drop-shadow(0 0 12px rgba(255, 125, 115, 0.56));
}

.av-wipe-fragments path {
  fill: none;
  stroke: rgba(255, 180, 95, 0.82);
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(255, 180, 95, 0.42));
}

.sr-panel {
  fill: rgba(3, 2, 10, 0.62);
  stroke: rgba(182, 123, 255, 0.22);
  stroke-width: 1.4;
}

.sr-route {
  fill: none;
  stroke: url("#sr-route-gradient");
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 16px rgba(182, 123, 255, 0.28));
}

.sr-shadow-path {
  stroke-dasharray: 18 14;
  animation: srDash 11s linear infinite;
}

.sr-relay-path {
  opacity: 0.54;
  stroke-dasharray: 8 14;
  animation: srRelayPath 11s ease-in-out infinite;
}

.sr-node rect,
.sr-package rect,
.sr-vault rect {
  fill: rgba(15, 8, 32, 0.72);
  stroke: rgba(182, 123, 255, 0.34);
  stroke-width: 2;
  filter: drop-shadow(0 0 22px rgba(182, 123, 255, 0.18));
}

.sr-node circle {
  fill: #8df0c2;
  filter: drop-shadow(0 0 14px rgba(141, 240, 194, 0.58));
}

.sr-node text,
.sr-package text,
.sr-vault text,
.sr-status text {
  font-family: var(--font-display);
  font-weight: 700;
  text-anchor: middle;
  text-transform: uppercase;
}

.sr-node text,
.sr-package text {
  fill: rgba(248, 251, 255, 0.72);
  font-size: 15px;
}

.sr-pass path,
.sr-package path {
  fill: none;
  stroke: rgba(143, 220, 255, 0.78);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(143, 220, 255, 0.36));
}

.sr-pass {
  animation: srPassPulse 11s ease-in-out infinite;
}

.sr-guest {
  animation: srGuestReady 11s ease-in-out infinite;
}

.sr-package {
  animation: srPackageReady 11s ease-in-out infinite;
}

.sr-vault text {
  fill: rgba(248, 251, 255, 0.62);
  font-size: 14px;
  letter-spacing: 0.08em;
}

.sr-vault {
  opacity: 0.86;
}

.sr-token {
  fill: #b67bff;
  opacity: 0.95;
}

.sr-token-relay {
  fill: #8df0c2;
}

.sr-status {
  opacity: 0;
  animation: srStatusPulse 11s ease-in-out infinite;
}

.sr-status-relay {
  animation-delay: 2.8s;
}

.sr-status rect {
  fill: rgba(3, 2, 10, 0.76);
  stroke: rgba(182, 123, 255, 0.24);
  stroke-width: 1;
}

.sr-status text {
  fill: rgba(248, 251, 255, 0.72);
  font-size: 15px;
}

@keyframes srDash {
  to {
    stroke-dashoffset: -160;
  }
}

@keyframes srRelayPath {
  0%,
  42% {
    opacity: 0.18;
  }

  56%,
  88% {
    opacity: 0.8;
  }

  100% {
    opacity: 0.18;
  }
}

@keyframes srPassPulse {
  0%,
  18%,
  100% {
    filter: drop-shadow(0 0 8px rgba(182, 123, 255, 0.18));
  }

  34%,
  54% {
    filter: drop-shadow(0 0 28px rgba(182, 123, 255, 0.42));
  }
}

@keyframes srGuestReady {
  0%,
  42%,
  100% {
    opacity: 0.72;
  }

  52%,
  86% {
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(141, 240, 194, 0.24));
  }
}

@keyframes srPackageReady {
  0%,
  48%,
  100% {
    opacity: 0.62;
  }

  58%,
  88% {
    opacity: 1;
    filter: drop-shadow(0 0 30px rgba(143, 220, 255, 0.22));
  }
}

@keyframes srStatusPulse {
  0%,
  14%,
  72%,
  100% {
    opacity: 0;
  }

  24%,
  58% {
    opacity: 1;
  }
}

@keyframes contactPanelReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 860px) {

  .seclink-mechanic-visual,
  .auditia-mechanic-visual,
  .ai-svg,
  .sl-svg {
    min-height: 300px;
  }
}

@media (max-width: 620px) {

  .antipulse-visual,
  .argos-visual {
    min-height: 330px;
  }

  .mechanic-demo,
  .mechanic-svg {
    min-height: 300px;
  }

  .mechanic-demo {
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .mechanic-svg {
    width: 820px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-primary,
  .ambient-orb,
  .ambient-line,
  .home-page .hero::before,
  .home-page .hero::after,
  .section-dark::before,
  .products-section::before,
  .contact-section::before,
  .assist-section::before,
  .hero-product-stage::after,
  .hero-stage-card,
  .stage-console span::before,
  .stage-node,
  .stage-orbit,
  .seclink-mechanic-card::before,
  .auditia-mechanic-card::before,
  .roadmap-card::after,
  .sl-signal-line,
  .sl-direct-line,
  .sl-node-halo,
  .sl-server-halo,
  .sl-lock-block,
  .sl-envelope,
  .sl-queue-item,
  .sl-peer-core,
  .sl-state-offline,
  .sl-state-online,
  .ai-scan-node circle,
  .ai-link,
  .ai-flow-line,
  .ai-scan-sweep,
  .ai-finding,
  .ai-priority-card,
  .ai-issue-card rect,
  .ai-check,
  .ai-ready-card rect,
  .ai-ready-card path,
  .hero-lead-copy,
  .hero-slogan,
  .hero-copy,
  .hero-actions,
  .company-section .prose::before,
  .product-card::before,
  .expertise-grid article::before,
  .assist-grid article::before,
  .chat-contact-card::before,
  .contact-chat-preview::before,
  .route-primary-three,
  .route-bypass,
  .node-three,
  .node-four,
  .data-pulse,
  .argos-vault,
  .argos-shield,
  .argos-attacker,
  .argos-fracture,
  .contact-two,
  .company-section::after,
  .products-section::after,
  .assist-section::after {
    animation: none;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroCopyIn {
  from {
    opacity: 0;
    transform: translate3d(-28px, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes heroItemIn {
  from {
    opacity: 0;
    transform: translate3d(0, 16px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes surfaceSheen {
  0%,
  24% {
    opacity: 0;
    transform: translateX(-135%) rotate(16deg);
  }

  44% {
    opacity: 0.72;
  }

  68%,
  100% {
    opacity: 0;
    transform: translateX(360%) rotate(16deg);
  }
}

@keyframes sectionBubble {
  0% {
    border-radius: 48% 52% 58% 42% / 44% 50% 50% 56%;
    transform: translate3d(var(--section-bubble-x, 0px), var(--section-bubble-y, 0px), 0) scale(0.94);
  }

  46% {
    border-radius: 57% 43% 46% 54% / 52% 42% 58% 48%;
    transform: translate3d(calc(var(--section-bubble-x, 0px) - 28px), calc(var(--section-bubble-y, 0px) + 24px), 0) scale(1.06);
  }

  100% {
    border-radius: 42% 58% 51% 49% / 47% 56% 44% 53%;
    transform: translate3d(calc(var(--section-bubble-x, 0px) + 34px), calc(var(--section-bubble-y, 0px) - 18px), 0) scale(1.01);
  }
}

@keyframes stageSweep {
  0% {
    opacity: 0;
    transform: translateX(0) rotate(18deg);
  }

  18%,
  48% {
    opacity: 0.9;
  }

  72%,
  100% {
    opacity: 0;
    transform: translateX(560%) rotate(18deg);
  }
}

@keyframes stageFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@keyframes stageOrbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes stagePulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.88);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes antipulseNodeRisk {
  0%,
  38% {
    border-color: rgba(141, 240, 194, 0.62);
    background: var(--green);
    box-shadow: 0 0 22px rgba(141, 240, 194, 0.3);
  }

  50%,
  62% {
    border-color: rgba(255, 190, 92, 0.72);
    background: var(--gold);
    box-shadow: 0 0 26px rgba(255, 190, 92, 0.48);
  }

  74%,
  100% {
    border-color: rgba(255, 125, 115, 0.76);
    background: var(--red);
    box-shadow: 0 0 30px rgba(255, 125, 115, 0.52);
  }
}

@keyframes antipulseBypassReady {
  0%,
  42% {
    border-color: rgba(248, 251, 255, 0.24);
    background: rgba(248, 251, 255, 0.18);
    box-shadow: none;
  }

  58%,
  100% {
    border-color: rgba(141, 240, 194, 0.7);
    background: var(--green);
    box-shadow: 0 0 28px rgba(141, 240, 194, 0.42);
  }
}

@keyframes routePrimaryCut {
  0%,
  58% {
    opacity: 1;
    filter: none;
  }

  72%,
  100% {
    opacity: 0.18;
    filter: saturate(0.3);
  }
}

@keyframes routeBypass {
  0%,
  46% {
    opacity: 0.18;
  }

  62%,
  100% {
    opacity: 0.92;
  }
}

@keyframes packetPrimary {
  0% {
    top: 52%;
    left: 12%;
    opacity: 0;
  }

  12%,
  42% {
    opacity: 1;
  }

  56% {
    top: 37%;
    left: 70%;
    opacity: 1;
  }

  66%,
  100% {
    top: 37%;
    left: 70%;
    opacity: 0;
  }
}

@keyframes packetBypass {
  0%,
  56% {
    top: 52%;
    left: 12%;
    opacity: 0;
  }

  64% {
    top: 18%;
    left: 48%;
    opacity: 1;
  }

  86% {
    top: 52%;
    left: 88%;
    opacity: 1;
  }

  100% {
    top: 52%;
    left: 88%;
    opacity: 0;
  }
}

@keyframes argosAttack {
  0%,
  34% {
    opacity: 0.5;
    transform: translateX(0);
  }

  48%,
  62% {
    opacity: 1;
    transform: translateX(-42px);
  }

  76%,
  100% {
    opacity: 0.46;
    transform: translateX(0);
  }
}

@keyframes argosVaultState {
  0%,
  44% {
    border-color: rgba(141, 240, 194, 0.32);
    color: var(--green);
    box-shadow: 0 0 42px rgba(141, 240, 194, 0.16);
  }

  56%,
  68% {
    border-color: rgba(255, 125, 115, 0.56);
    color: var(--gold);
    box-shadow: 0 0 48px rgba(255, 125, 115, 0.24);
  }

  82%,
  100% {
    border-color: rgba(94, 235, 255, 0.42);
    color: var(--cyan);
    box-shadow: 0 0 52px rgba(94, 235, 255, 0.2);
  }
}

@keyframes argosShield {
  0%,
  50% {
    opacity: 0;
    transform: translateX(-50%) scale(0.82);
  }

  62%,
  86% {
    opacity: 0.9;
    transform: translateX(-50%) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-50%) scale(1.06);
  }
}

@keyframes argosFracture {
  0%,
  52% {
    opacity: 0;
    transform: rotate(18deg) scaleY(0.7);
  }

  62%,
  72% {
    opacity: 1;
    transform: rotate(18deg) scaleY(1);
  }

  86%,
  100% {
    opacity: 0;
    transform: rotate(18deg) scaleY(0.6);
  }
}

@keyframes argosCellQuarantine {
  0%,
  58% {
    color: var(--green);
    border-color: rgba(141, 240, 194, 0.28);
    transform: translateX(-50%) scale(1);
  }

  70%,
  82% {
    color: var(--red);
    border-color: rgba(255, 125, 115, 0.42);
    transform: translateX(-50%) scale(1.08);
  }

  100% {
    color: rgba(255, 125, 115, 0.18);
    border-color: rgba(255, 125, 115, 0.12);
    transform: translateX(-50%) scale(0.2);
  }
}

@keyframes apRiskSegment {
  0%,
  48% {
    opacity: 0.88;
    stroke: url("#ap-primary-gradient");
    stroke-width: 7;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 12px rgba(182, 123, 255, 0.35));
  }

  54%,
  92% {
    opacity: 0.34;
    stroke: #ffb45f;
    stroke-width: 6;
    stroke-dasharray: 16 16;
    filter: drop-shadow(0 0 14px rgba(255, 180, 95, 0.32));
  }

  100% {
    opacity: 0.88;
    stroke: url("#ap-primary-gradient");
    stroke-width: 7;
    stroke-dasharray: none;
    filter: drop-shadow(0 0 12px rgba(182, 123, 255, 0.35));
  }
}

@keyframes apBypassPath {
  0%,
  52% {
    opacity: 0.18;
    stroke-dasharray: 18 16;
    stroke-dashoffset: 56;
  }

  58%,
  92% {
    opacity: 1;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 18px rgba(141, 240, 194, 0.34));
  }

  100% {
    opacity: 0.18;
    stroke-dasharray: 18 16;
    stroke-dashoffset: -42;
  }
}

@keyframes apNodeRiskState {
  0%,
  30% {
    fill: #8df0c2;
    stroke: rgba(248, 251, 255, 0.58);
    filter: drop-shadow(0 0 16px rgba(141, 240, 194, 0.35));
  }

  36%,
  92% {
    fill: #ffb45f;
    stroke: rgba(255, 180, 95, 0.88);
    filter: drop-shadow(0 0 22px rgba(255, 180, 95, 0.58));
  }

  100% {
    fill: #8df0c2;
    stroke: rgba(248, 251, 255, 0.58);
    filter: drop-shadow(0 0 16px rgba(141, 240, 194, 0.35));
  }
}

@keyframes apSafeNodeReady {
  0%,
  52% {
    opacity: 0.42;
  }

  58%,
  92% {
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(141, 240, 194, 0.42));
  }

  100% {
    opacity: 0.42;
  }
}

@keyframes apRiskLabelOk {
  0%,
  30% {
    opacity: 1;
  }

  36%,
  92% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes apRiskLabelWatch {
  0%,
  30% {
    opacity: 0;
  }

  36%,
  92% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes apStatusRisk {
  0%,
  30% {
    opacity: 0.28;
  }

  36%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0.28;
  }
}

@keyframes apStatusBypass {
  0%,
  52% {
    opacity: 0.3;
  }

  60%,
  92% {
    opacity: 1;
  }

  100% {
    opacity: 0.3;
  }
}

@keyframes avAttackDash {
  to {
    stroke-dashoffset: -104;
  }
}

@keyframes avVaultPressure {
  0%,
  12% {
    stroke: rgba(182, 123, 255, 0.34);
    filter: drop-shadow(0 0 28px rgba(182, 123, 255, 0.18));
  }

  18%,
  42% {
    stroke: rgba(141, 240, 194, 0.7);
    filter: drop-shadow(0 0 36px rgba(141, 240, 194, 0.34));
  }

  52%,
  66% {
    stroke: rgba(255, 125, 115, 0.7);
    filter: drop-shadow(0 0 42px rgba(255, 125, 115, 0.36));
  }

  76%,
  92% {
    stroke: rgba(182, 123, 255, 0.82);
    filter: drop-shadow(0 0 44px rgba(182, 123, 255, 0.36));
  }

  100% {
    stroke: rgba(182, 123, 255, 0.34);
    filter: drop-shadow(0 0 28px rgba(182, 123, 255, 0.18));
  }
}

@keyframes avAttackerAppear {
  0%,
  44% {
    opacity: 0;
    transform: translateX(18px);
  }

  52%,
  76% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(18px);
  }
}

@keyframes avAttackLineState {
  0%,
  44% {
    opacity: 0;
  }

  52%,
  76% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes avShieldLock {
  0%,
  56% {
    opacity: 0;
    transform: scale(0.97);
    transform-origin: center;
  }

  66%,
  92% {
    opacity: 1;
    transform: scale(1);
    transform-origin: center;
  }

  100% {
    opacity: 0;
    transform: scale(0.97);
    transform-origin: center;
  }
}

@keyframes avDataAppFlow {
  0%,
  8% {
    opacity: 0;
  }

  12%,
  26% {
    opacity: 1;
  }

  32%,
  100% {
    opacity: 0;
  }
}

@keyframes avDataContactFlow {
  0%,
  18% {
    opacity: 0;
  }

  24%,
  42% {
    opacity: 1;
  }

  46%,
  100% {
    opacity: 0;
  }
}

@keyframes avCellRectLockdown {
  0%,
  48% {
    fill: rgba(182, 123, 255, 0.1);
    stroke: rgba(182, 123, 255, 0.34);
    filter: none;
  }

  62%,
  92% {
    fill: rgba(255, 125, 115, 0.1);
    stroke: rgba(255, 125, 115, 0.56);
    filter: drop-shadow(0 0 18px rgba(255, 125, 115, 0.3));
  }

  100% {
    fill: rgba(182, 123, 255, 0.1);
    stroke: rgba(182, 123, 255, 0.34);
    filter: none;
  }
}

@keyframes avCellSignalLockdown {
  0%,
  48% {
    fill: #8df0c2;
    filter: drop-shadow(0 0 14px rgba(141, 240, 194, 0.58));
  }

  62%,
  92% {
    fill: #ff7d73;
    filter: drop-shadow(0 0 18px rgba(255, 125, 115, 0.5));
  }

  100% {
    fill: #8df0c2;
    filter: drop-shadow(0 0 14px rgba(141, 240, 194, 0.58));
  }
}

@keyframes avCellRectAccess {
  0%,
  14% {
    fill: rgba(182, 123, 255, 0.1);
    stroke: rgba(182, 123, 255, 0.34);
  }

  22%,
  38% {
    fill: rgba(141, 240, 194, 0.12);
    stroke: rgba(141, 240, 194, 0.62);
    filter: drop-shadow(0 0 20px rgba(141, 240, 194, 0.28));
  }

  62%,
  92% {
    fill: rgba(255, 125, 115, 0.1);
    stroke: rgba(255, 125, 115, 0.56);
    filter: drop-shadow(0 0 18px rgba(255, 125, 115, 0.3));
  }

  100% {
    fill: rgba(182, 123, 255, 0.1);
    stroke: rgba(182, 123, 255, 0.34);
    filter: none;
  }
}

@keyframes avCellSignalAccess {
  0%,
  14% {
    fill: #8df0c2;
    filter: drop-shadow(0 0 14px rgba(141, 240, 194, 0.58));
  }

  22%,
  38% {
    fill: #8df0c2;
    filter: drop-shadow(0 0 26px rgba(141, 240, 194, 0.74));
  }

  62%,
  92% {
    fill: #ff7d73;
    filter: drop-shadow(0 0 18px rgba(255, 125, 115, 0.5));
  }

  100% {
    fill: #8df0c2;
    filter: drop-shadow(0 0 14px rgba(141, 240, 194, 0.58));
  }
}

@keyframes avInternalContactAccess {
  0%,
  18% {
    opacity: 0.26;
    stroke: rgba(182, 123, 255, 0.42);
    filter: drop-shadow(0 0 8px rgba(182, 123, 255, 0.18));
  }

  24%,
  42% {
    opacity: 1;
    stroke: rgba(141, 240, 194, 0.78);
    filter: drop-shadow(0 0 16px rgba(141, 240, 194, 0.42));
  }

  52%,
  92% {
    opacity: 0.36;
    stroke: rgba(255, 125, 115, 0.46);
    filter: drop-shadow(0 0 14px rgba(255, 125, 115, 0.26));
  }

  100% {
    opacity: 0.26;
    stroke: rgba(182, 123, 255, 0.42);
    filter: drop-shadow(0 0 8px rgba(182, 123, 255, 0.18));
  }
}

@keyframes avCellRectWipe {
  0%,
  18% {
    opacity: 1;
    fill: rgba(182, 123, 255, 0.1);
    stroke: rgba(182, 123, 255, 0.34);
    filter: none;
  }

  24%,
  42% {
    opacity: 1;
    fill: rgba(141, 240, 194, 0.14);
    stroke: rgba(141, 240, 194, 0.7);
    filter: drop-shadow(0 0 22px rgba(141, 240, 194, 0.34));
  }

  56% {
    opacity: 1;
    fill: rgba(182, 123, 255, 0.1);
    stroke: rgba(182, 123, 255, 0.34);
    filter: none;
  }

  66%,
  76% {
    opacity: 0.72;
    fill: #ff7d73;
    stroke: rgba(255, 125, 115, 0.58);
    filter: drop-shadow(0 0 20px rgba(255, 125, 115, 0.45));
  }

  84%,
  94% {
    opacity: 0.08;
    fill: rgba(255, 125, 115, 0.18);
    stroke: rgba(255, 125, 115, 0.18);
    filter: drop-shadow(0 0 12px rgba(255, 125, 115, 0.22));
  }

  100% {
    opacity: 1;
  }
}

@keyframes avCellSignalWipe {
  0%,
  18% {
    opacity: 1;
    fill: #8df0c2;
    filter: drop-shadow(0 0 14px rgba(141, 240, 194, 0.58));
  }

  24%,
  42% {
    opacity: 1;
    fill: #8df0c2;
    filter: drop-shadow(0 0 28px rgba(141, 240, 194, 0.78));
  }

  56% {
    opacity: 1;
    fill: #8df0c2;
    filter: drop-shadow(0 0 14px rgba(141, 240, 194, 0.58));
  }

  66%,
  76% {
    opacity: 0.74;
    fill: #ff7d73;
    filter: drop-shadow(0 0 22px rgba(255, 125, 115, 0.58));
  }

  84%,
  94% {
    opacity: 0.08;
    fill: rgba(255, 125, 115, 0.18);
    filter: drop-shadow(0 0 12px rgba(255, 125, 115, 0.22));
  }

  100% {
    opacity: 1;
  }
}

@keyframes avCellTextWipe {
  0%,
  18% {
    opacity: 1;
    fill: rgba(248, 251, 255, 0.64);
  }

  24%,
  42% {
    opacity: 1;
    fill: #8df0c2;
  }

  56% {
    opacity: 1;
    fill: rgba(248, 251, 255, 0.64);
  }

  66%,
  76% {
    opacity: 0.74;
    fill: #ffb45f;
  }

  84%,
  94% {
    opacity: 0.08;
    fill: rgba(255, 125, 115, 0.32);
  }

  100% {
    opacity: 1;
    fill: rgba(248, 251, 255, 0.64);
  }
}

@keyframes avQuarantineLabel {
  0%,
  58% {
    opacity: 0;
  }

  68%,
  92% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes avWipeLabel {
  0%,
  66% {
    opacity: 0;
  }

  76%,
  94% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes avWipeFragments {
  0%,
  66% {
    opacity: 0;
    transform: scale(0.72);
  }

  76%,
  92% {
    opacity: 1;
    transform: scale(1.14);
  }

  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}

@keyframes auroraDrift {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }

  50% {
    transform: translate3d(2.5%, 1.5%, 0) scale(1.04);
  }

  100% {
    transform: translate3d(-1%, 2%, 0) scale(1.02);
  }
}

@keyframes heroBrandBreath {
  0% {
    opacity: 0.82;
    filter:
      saturate(1.06)
      brightness(1.04)
      contrast(1.16)
      drop-shadow(0 0 46px rgba(0, 191, 255, 0.27));
  }

  50% {
    opacity: 0.96;
    filter:
      saturate(1.16)
      brightness(1.12)
      contrast(1.22)
      drop-shadow(0 0 58px rgba(0, 191, 255, 0.34));
  }

  100% {
    opacity: 0.88;
    filter:
      saturate(1.1)
      brightness(1.08)
      contrast(1.2)
      drop-shadow(0 0 52px rgba(0, 191, 255, 0.31));
  }
}

@keyframes orbFloat {
  0% {
    border-radius: 42% 58% 54% 46% / 45% 48% 52% 55%;
    transform: translate3d(-18px, 10px, 0) scale(0.94);
  }

  45% {
    border-radius: 58% 42% 47% 53% / 52% 40% 60% 48%;
    transform: translate3d(24px, -28px, 0) scale(1.04);
  }

  100% {
    border-radius: 48% 52% 62% 38% / 44% 58% 42% 56%;
    transform: translate3d(-6px, 24px, 0) scale(1);
  }
}

@keyframes lineGlide {
  0%,
  100% {
    opacity: 0.22;
    clip-path: inset(0 100% 0 0);
  }

  32%,
  62% {
    opacity: 0.74;
    clip-path: inset(0 0 0 0);
  }

  86% {
    opacity: 0.08;
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes ctaFlow {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 100% 50%;
  }
}

@keyframes signalFlow {
  0%,
  18% {
    opacity: 0;
    transform: translateX(-70%);
  }

  40%,
  58% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateX(72%);
  }
}

@keyframes slDashFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -168;
  }
}

@keyframes slDirectPulse {
  0%,
  20% {
    opacity: 0.18;
    stroke-width: 2;
  }

  34%,
  82% {
    opacity: 0.92;
    stroke-width: 3.6;
  }

  100% {
    opacity: 0.28;
    stroke-width: 2.2;
  }
}

@keyframes slRendezvousSignalLines {
  0%,
  42% {
    opacity: 0.9;
  }

  48%,
  100% {
    opacity: 0;
  }
}

@keyframes slRendezvousDirectLines {
  0%,
  44% {
    opacity: 0;
  }

  50%,
  92% {
    opacity: 0.95;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slPhaseLabelOne {
  0%,
  5% {
    opacity: 0;
  }

  8%,
  22% {
    opacity: 1;
  }

  28%,
  100% {
    opacity: 0;
  }
}

@keyframes slPhaseLabelTwo {
  0%,
  25% {
    opacity: 0;
  }

  29%,
  42% {
    opacity: 1;
  }

  48%,
  100% {
    opacity: 0;
  }
}

@keyframes slPhaseLabelThree {
  0%,
  45% {
    opacity: 0;
  }

  52%,
  92% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slEncryptionNetwork {
  0%,
  18% {
    opacity: 0.12;
    stroke-dashoffset: 0;
  }

  24%,
  94% {
    opacity: 0.78;
    stroke-dashoffset: -96;
  }

  100% {
    opacity: 0.12;
    stroke-dashoffset: -128;
  }
}

@keyframes slMessageLockPulse {
  0%,
  6%,
  38%,
  61%,
  91%,
  100% {
    opacity: 0.58;
    filter: drop-shadow(0 0 8px rgba(94, 235, 255, 0.18));
  }

  10%,
  18%,
  45%,
  58%,
  66%,
  76%,
  96% {
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(94, 235, 255, 0.56));
  }
}

@keyframes slTransportLockPulse {
  0%,
  16%,
  38%,
  68%,
  94%,
  100% {
    opacity: 0.58;
    filter: drop-shadow(0 0 8px rgba(141, 240, 194, 0.18));
  }

  22%,
  34%,
  42%,
  50%,
  74%,
  90% {
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(141, 240, 194, 0.58));
  }
}

@keyframes slEncryptionPhaseOne {
  0%,
  4% {
    opacity: 0;
  }

  8%,
  20%,
  64%,
  76% {
    opacity: 1;
  }

  24%,
  60%,
  80%,
  100% {
    opacity: 0;
  }
}

@keyframes slEncryptionPhaseTwo {
  0%,
  20% {
    opacity: 0;
  }

  24%,
  38%,
  78%,
  92% {
    opacity: 1;
  }

  42%,
  74%,
  96%,
  100% {
    opacity: 0;
  }
}

@keyframes slEncryptionPhaseThree {
  0%,
  38% {
    opacity: 0;
  }

  44%,
  62%,
  94% {
    opacity: 1;
  }

  66%,
  100% {
    opacity: 0;
  }
}

@keyframes slNodeBreath {
  0%,
  100% {
    opacity: 0.46;
    transform: scale(1);
  }

  50% {
    opacity: 0.82;
    transform: scale(1.04);
  }
}

@keyframes slLockPulse {
  0%,
  22% {
    opacity: 0.86;
    filter: drop-shadow(0 0 0 rgba(94, 235, 255, 0));
  }

  34%,
  58% {
    opacity: 1;
    filter: drop-shadow(0 0 22px rgba(94, 235, 255, 0.34));
  }

  100% {
    opacity: 0.9;
  }
}

@keyframes slEnvelopePulse {
  0%,
  30% {
    opacity: 0.52;
    filter: drop-shadow(0 0 0 rgba(141, 240, 194, 0));
  }

  48%,
  78% {
    opacity: 1;
    filter: drop-shadow(0 0 24px rgba(141, 240, 194, 0.36));
  }

  100% {
    opacity: 0.72;
  }
}

@keyframes slQueueItem {
  0%,
  30% {
    fill: rgba(94, 235, 255, 0.28);
    opacity: 0.72;
  }

  38%,
  62% {
    fill: rgba(94, 235, 255, 0.62);
    opacity: 1;
  }

  70%,
  86% {
    fill: rgba(141, 240, 194, 0.62);
    opacity: 1;
  }

  100% {
    fill: rgba(94, 235, 255, 0.28);
    opacity: 0.72;
  }
}

@keyframes slOfflineAConnection {
  0%,
  100% {
    opacity: 0.72;
  }

  22%,
  48% {
    opacity: 0.32;
  }

  62%,
  92% {
    opacity: 0.88;
  }
}

@keyframes slOfflineAlertLink {
  0%,
  20% {
    opacity: 0;
  }

  24%,
  29%,
  36%,
  42% {
    opacity: 0.88;
  }

  27%,
  33%,
  40%,
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes slOfflineBConnection {
  0%,
  52% {
    opacity: 0;
  }

  56%,
  96% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slOfflineDeliveryLine {
  0%,
  74% {
    opacity: 0;
  }

  80%,
  96% {
    opacity: 0.96;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slOfflineLockPulse {
  0%,
  18%,
  50%,
  100% {
    opacity: 0.62;
    filter: drop-shadow(0 0 8px rgba(94, 235, 255, 0.2));
  }

  24%,
  42% {
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(94, 235, 255, 0.58));
  }
}

@keyframes slOfflineQueueOne {
  0%,
  30% {
    opacity: 0;
    fill: rgba(94, 235, 255, 0.22);
  }

  34%,
  78% {
    opacity: 1;
    fill: rgba(94, 235, 255, 0.62);
  }

  88%,
  100% {
    opacity: 0;
    fill: rgba(141, 240, 194, 0.68);
  }
}

@keyframes slOfflineQueueTwo {
  0%,
  39% {
    opacity: 0;
    fill: rgba(94, 235, 255, 0.22);
  }

  43%,
  84% {
    opacity: 1;
    fill: rgba(94, 235, 255, 0.58);
  }

  94%,
  100% {
    opacity: 0;
    fill: rgba(141, 240, 194, 0.68);
  }
}

@keyframes slOfflineQueueThree {
  0%,
  48% {
    opacity: 0;
    fill: rgba(94, 235, 255, 0.22);
  }

  52%,
  90% {
    opacity: 1;
    fill: rgba(94, 235, 255, 0.54);
  }

  98%,
  100% {
    opacity: 0;
    fill: rgba(141, 240, 194, 0.68);
  }
}

@keyframes slOfflinePhaseOne {
  0%,
  16% {
    opacity: 0;
  }

  22%,
  36% {
    opacity: 1;
  }

  44%,
  100% {
    opacity: 0;
  }
}

@keyframes slOfflinePhaseTwo {
  0%,
  36% {
    opacity: 0;
  }

  42%,
  60% {
    opacity: 1;
  }

  66%,
  100% {
    opacity: 0;
  }
}

@keyframes slOfflinePhaseThree {
  0%,
  70% {
    opacity: 0;
  }

  76%,
  96% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes slPeerCore {
  0%,
  72% {
    fill: rgba(3, 7, 13, 0.92);
    stroke: rgba(255, 180, 95, 0.52);
    filter: drop-shadow(0 0 12px rgba(255, 180, 95, 0.28));
  }

  76%,
  96% {
    fill: rgba(3, 7, 13, 0.92);
    stroke: rgba(141, 240, 194, 0.66);
    filter: drop-shadow(0 0 16px rgba(141, 240, 194, 0.46));
  }

  100% {
    fill: rgba(3, 7, 13, 0.92);
    stroke: rgba(255, 180, 95, 0.52);
    filter: drop-shadow(0 0 12px rgba(255, 180, 95, 0.28));
  }
}

@keyframes slOfflineLabel {
  0%,
  72% {
    opacity: 1;
  }

  76%,
  96% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slOnlineLabel {
  0%,
  72% {
    opacity: 0;
  }

  76%,
  96% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes aiDashFlow {
  from {
    stroke-dashoffset: 0;
  }

  to {
    stroke-dashoffset: -168;
  }
}

@keyframes aiNodePing {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(1);
    filter: drop-shadow(0 0 6px rgba(94, 235, 255, 0.18));
  }

  48% {
    opacity: 1;
    transform: scale(1.05);
    filter: drop-shadow(0 0 16px rgba(94, 235, 255, 0.36));
  }
}

@keyframes aiScanSweep {
  0% {
    opacity: 0;
    transform: translateX(-26px);
  }

  16%,
  72% {
    opacity: 0.82;
  }

  100% {
    opacity: 0;
    transform: translateX(438px);
  }
}

@keyframes aiFindingPulse {
  0%,
  34% {
    opacity: 0;
    transform: scale(0.72);
  }

  44%,
  76% {
    opacity: 1;
    transform: scale(1.12);
  }

  100% {
    opacity: 0;
    transform: scale(0.82);
  }
}

@keyframes aiPriorityCard {
  0%,
  34% {
    opacity: 0.58;
    filter: drop-shadow(0 0 0 rgba(255, 180, 95, 0));
    transform: translateX(0);
  }

  48%,
  72% {
    opacity: 1;
    filter: drop-shadow(0 0 18px rgba(255, 180, 95, 0.26));
    transform: translateX(-5px);
  }

  100% {
    opacity: 0.72;
    transform: translateX(0);
  }
}

@keyframes aiIssuePulse {
  0%,
  30% {
    stroke: rgba(255, 180, 95, 0.44);
    filter: drop-shadow(0 0 8px rgba(255, 180, 95, 0.16));
  }

  42%,
  62% {
    stroke: rgba(255, 125, 115, 0.68);
    filter: drop-shadow(0 0 20px rgba(255, 125, 115, 0.34));
  }

  82%,
  100% {
    stroke: rgba(255, 180, 95, 0.44);
    filter: drop-shadow(0 0 8px rgba(255, 180, 95, 0.16));
  }
}

@keyframes aiCheckDraw {
  0%,
  34% {
    opacity: 0.24;
    stroke-dashoffset: 72;
  }

  46%,
  82% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.44;
    stroke-dashoffset: 0;
  }
}

@keyframes aiReadyPulse {
  0%,
  54% {
    opacity: 0.62;
    filter: drop-shadow(0 0 0 rgba(141, 240, 194, 0));
  }

  68%,
  88% {
    opacity: 1;
    filter: drop-shadow(0 0 24px rgba(141, 240, 194, 0.3));
  }

  100% {
    opacity: 0.7;
  }
}

@keyframes aiReadyMark {
  0%,
  54% {
    opacity: 0.18;
    stroke-dasharray: 110;
    stroke-dashoffset: 110;
  }

  68%,
  88% {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  100% {
    opacity: 0.38;
    stroke-dashoffset: 0;
  }
}

@keyframes productHeroIrradiance {
  0% {
    filter:
      saturate(1.02)
      contrast(1.26)
      brightness(1.22)
      drop-shadow(0 0 38px var(--product-glow))
      drop-shadow(0 0 108px color-mix(in srgb, var(--product-accent) 24%, transparent));
  }

  48% {
    filter:
      saturate(1.14)
      contrast(1.42)
      brightness(1.42)
      drop-shadow(0 0 66px var(--product-glow))
      drop-shadow(0 0 166px color-mix(in srgb, var(--product-accent) 38%, transparent));
  }

  100% {
    filter:
      saturate(1.08)
      contrast(1.34)
      brightness(1.32)
      drop-shadow(0 0 52px var(--product-glow))
      drop-shadow(0 0 140px color-mix(in srgb, var(--product-accent) 32%, transparent));
  }
}

@keyframes seclinkHeroRefined {
  0% {
    filter:
      saturate(0.98)
      contrast(1.2)
      brightness(1.14)
      drop-shadow(0 0 34px rgba(94, 235, 255, 0.24))
      drop-shadow(0 0 96px rgba(94, 235, 255, 0.16))
      drop-shadow(0 0 168px rgba(141, 240, 194, 0.08));
  }

  54% {
    filter:
      saturate(1.06)
      contrast(1.32)
      brightness(1.3)
      drop-shadow(0 0 58px rgba(94, 235, 255, 0.38))
      drop-shadow(0 0 142px rgba(94, 235, 255, 0.24))
      drop-shadow(0 0 236px rgba(141, 240, 194, 0.14));
  }

  100% {
    filter:
      saturate(1.02)
      contrast(1.28)
      brightness(1.24)
      drop-shadow(0 0 46px rgba(94, 235, 255, 0.34))
      drop-shadow(0 0 126px rgba(94, 235, 255, 0.22))
      drop-shadow(0 0 210px rgba(141, 240, 194, 0.12));
  }
}

.paranode-page .paranode-mechanic-grid.motion-coverflow.is-coverflow-ready .mechanic-demo {
  min-height: clamp(360px, 24vw, 460px);
}

.paranode-page .paranode-mechanic-grid.motion-coverflow.is-coverflow-ready .mechanic-svg {
  min-height: clamp(360px, 24vw, 460px);
}

@keyframes paranodeHeroRefined {
  0% {
    filter:
      saturate(1.02)
      contrast(1.2)
      brightness(1.12)
      drop-shadow(0 0 38px rgba(182, 123, 255, 0.24))
      drop-shadow(0 0 102px rgba(122, 77, 255, 0.16))
      drop-shadow(0 0 54px rgba(94, 235, 255, 0.08));
  }

  52% {
    filter:
      saturate(1.12)
      contrast(1.38)
      brightness(1.32)
      drop-shadow(0 0 68px rgba(182, 123, 255, 0.44))
      drop-shadow(0 0 174px rgba(122, 77, 255, 0.3))
      drop-shadow(0 0 92px rgba(94, 235, 255, 0.16));
  }

  100% {
    filter:
      saturate(1.08)
      contrast(1.32)
      brightness(1.24)
      drop-shadow(0 0 54px rgba(182, 123, 255, 0.36))
      drop-shadow(0 0 148px rgba(122, 77, 255, 0.26))
      drop-shadow(0 0 82px rgba(94, 235, 255, 0.14));
  }
}

@keyframes auditiaHeroRefined {
  0% {
    filter:
      saturate(1.02)
      contrast(1.18)
      brightness(1.12)
      drop-shadow(0 0 34px rgba(217, 188, 112, 0.22))
      drop-shadow(0 0 92px rgba(94, 235, 255, 0.12))
      drop-shadow(0 0 142px rgba(217, 188, 112, 0.06));
  }

  52% {
    filter:
      saturate(1.1)
      contrast(1.36)
      brightness(1.32)
      drop-shadow(0 0 62px rgba(217, 188, 112, 0.42))
      drop-shadow(0 0 148px rgba(94, 235, 255, 0.24))
      drop-shadow(0 0 220px rgba(217, 188, 112, 0.12));
  }

  100% {
    filter:
      saturate(1.06)
      contrast(1.3)
      brightness(1.24)
      drop-shadow(0 0 50px rgba(217, 188, 112, 0.34))
      drop-shadow(0 0 126px rgba(94, 235, 255, 0.2))
      drop-shadow(0 0 180px rgba(217, 188, 112, 0.1));
  }
}