.elementor-kit-5{--e-global-color-primary:#00B16B;--e-global-color-secondary:#007A4D;--e-global-color-text:#111111;--e-global-color-accent:#003D2B;--e-global-color-270b88a:#FFFFFF;--e-global-color-a03d171:#000000;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-weight:300;--e-global-typography-5a18115-font-family:"Montserrat";--e-global-typography-5a18115-font-size:56px;--e-global-typography-5a18115-font-weight:700;--e-global-typography-5a18115-line-height:72px;--e-global-typography-5a18115-letter-spacing:1px;--e-global-typography-5a18115-word-spacing:1px;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1366px){.elementor-kit-5{--e-global-typography-5a18115-font-size:32px;--e-global-typography-5a18115-line-height:42px;--e-global-typography-5a18115-letter-spacing:1px;--e-global-typography-5a18115-word-spacing:1px;}}@media(max-width:1200px){.elementor-kit-5{--e-global-typography-5a18115-font-size:28px;--e-global-typography-5a18115-line-height:38px;--e-global-typography-5a18115-letter-spacing:1px;--e-global-typography-5a18115-word-spacing:1px;}}@media(max-width:1024px){.elementor-kit-5{--e-global-typography-5a18115-font-size:26px;--e-global-typography-5a18115-line-height:36px;--e-global-typography-5a18115-letter-spacing:1px;--e-global-typography-5a18115-word-spacing:1px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:880px){.elementor-kit-5{--e-global-typography-5a18115-font-size:26px;--e-global-typography-5a18115-line-height:36px;--e-global-typography-5a18115-letter-spacing:1px;--e-global-typography-5a18115-word-spacing:1px;}}@media(max-width:768px){.elementor-kit-5{--e-global-typography-5a18115-font-size:24px;--e-global-typography-5a18115-line-height:34px;--e-global-typography-5a18115-letter-spacing:1px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}@media(min-width:2400px){.elementor-kit-5{--e-global-typography-5a18115-font-size:62px;--e-global-typography-5a18115-line-height:72px;--e-global-typography-5a18115-letter-spacing:1px;--e-global-typography-5a18115-word-spacing:1px;}}
/* Start custom CSS *//* =========================================================
   SECURITY SHARK PREMIUM OCEAN LIVE HERO BACKGROUND
   Clean load + ocean-fluid motion + responsive height
   ========================================================= */

:root {
  --ss-green: #00B16B;
  --ss-green-dark: #007A4D;
  --ss-deep-green: #003D2B;
  --ss-ocean-black: #020D0A;
  --ss-ocean-deep: #031A14;
  --ss-ocean-mid: #063328;
  --ss-mint: #B8F2D5;
  --ss-mint-soft: #DFF5EC;
  --ss-white: #FFFFFF;
}

/* Main hero wrapper */
.ss-hero-section {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;

  /* Default desktop height */
  min-height: clamp(520px, 72vh, 680px) !important;

  /* Clean first paint, prevents black flash */
  background:
    radial-gradient(circle at 18% 34%, rgba(0, 177, 107, 0.22), transparent 30%),
    radial-gradient(circle at 72% 76%, rgba(0, 122, 77, 0.20), transparent 34%),
    linear-gradient(135deg, #031a14 0%, #020d0a 48%, #020907 100%) !important;
}

/* Large desktop */
@media (min-width: 1440px) {
  .ss-hero-section {
    min-height: clamp(600px, 76vh, 760px) !important;
  }
}

/* Laptop */
@media (min-width: 1025px) and (max-width: 1439px) {
  .ss-hero-section {
    min-height: 560px !important;
  }

  .ss-hero-section .elementor-widget-image img {
    max-height: 450px !important;
    width: auto !important;
    object-fit: contain !important;
  }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .ss-hero-section {
    min-height: clamp(520px, 62vh, 620px) !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .ss-hero-section {
    min-height: clamp(560px, 78vh, 680px) !important;
  }
}

/* Keep Elementor content above animated background */
.ss-hero-section > .elementor-container,
.ss-hero-section > .e-con-inner,
.ss-hero-section .elementor-widget-wrap,
.ss-hero-section .elementor-column,
.ss-hero-section .elementor-element:not(.elementor-widget-html) {
  position: relative !important;
  z-index: 4 !important;
}

/* HTML widget becomes background layer */
.ss-hero-section .elementor-widget-html {
  position: static !important;
}

.ss-hero-section .elementor-widget-html:has(.ss-live-hero-bg) {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Fallback */
.ss-hero-section .ss-live-hero-bg {
  position: absolute !important;
  inset: 0 !important;
}

/* Live background base */
.ss-live-hero-bg,
.ss-ocean-hero-bg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  overflow: hidden !important;
  pointer-events: none !important;

  background:
    radial-gradient(circle at 20% 30%, rgba(0, 177, 107, 0.24), transparent 30%),
    radial-gradient(circle at 78% 72%, rgba(0, 122, 77, 0.18), transparent 32%),
    linear-gradient(135deg, #031a14 0%, #020d0a 48%, #020907 100%) !important;

  opacity: 0;
  animation: ssHeroReveal 900ms ease-out forwards;
}

/* Text readability overlay */
.ss-live-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      90deg,
      rgba(2, 13, 10, 0.32) 0%,
      rgba(2, 13, 10, 0.20) 42%,
      rgba(2, 13, 10, 0.08) 70%,
      rgba(2, 13, 10, 0.18) 100%
    );
}

/* Product image side veil */
.ss-live-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 44%,
      rgba(2, 13, 10, 0.12) 70%,
      rgba(2, 13, 10, 0.32) 100%
    );
}

/* Ocean depth texture */
.ss-ocean-depth {
  position: absolute;
  inset: -18%;
  z-index: 0;
  opacity: 0.30;

  background:
    radial-gradient(ellipse at 20% 35%, rgba(0, 177, 107, 0.18), transparent 34%),
    radial-gradient(ellipse at 40% 82%, rgba(184, 242, 213, 0.07), transparent 28%),
    repeating-linear-gradient(
      115deg,
      rgba(184, 242, 213, 0.035) 0px,
      rgba(184, 242, 213, 0.035) 1px,
      transparent 1px,
      transparent 38px
    );

  animation: ssOceanDrift 42s linear infinite;
}

/* Underwater light beams */
.ss-water-light {
  position: absolute;
  z-index: 0;
  width: 44%;
  height: 180%;
  top: -40%;
  opacity: 0.11;
  transform: rotate(18deg);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(184, 242, 213, 0.24),
    transparent
  );
  filter: blur(24px);
  will-change: transform;
}

.ss-water-light-one {
  left: 4%;
  animation: ssWaterSweepOne 20s ease-in-out infinite alternate;
}

.ss-water-light-two {
  left: 42%;
  opacity: 0.07;
  animation: ssWaterSweepTwo 26s ease-in-out infinite alternate;
}

/* Digital water grid */
.ss-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.12;
  background-image:
    radial-gradient(rgba(184, 242, 213, 0.22) 1px, transparent 1px);
  background-size: 30px 30px;
  animation: ssGridMove 50s linear infinite;
}

/* Network lines */
.ss-network {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.24;
}

.ss-network path {
  fill: none;
  stroke: rgba(0, 177, 107, 0.28);
  stroke-width: 1;
  stroke-dasharray: 10 18;
  animation: ssLineFlow 24s linear infinite;
}

.ss-network circle {
  fill: rgba(184, 242, 213, 0.72);
  filter: drop-shadow(0 0 7px rgba(0, 177, 107, 0.85));
  animation: ssNetworkNodePulse 4.8s ease-in-out infinite;
}

/* Shark fin abstract shapes */
.ss-fin {
  position: absolute;
  z-index: 1;
  opacity: 0.13;
  background: linear-gradient(
    135deg,
    rgba(184, 242, 213, 0.22),
    rgba(0, 177, 107, 0.08)
  );
  clip-path: polygon(12% 100%, 62% 0%, 100% 100%);
  filter: blur(0.3px);
  transform-origin: center bottom;
  will-change: transform;
}

.ss-fin-one {
  width: 150px;
  height: 230px;
  left: 12%;
  bottom: 18%;
  animation: ssFinGlideOne 14s ease-in-out infinite;
}

.ss-fin-two {
  width: 90px;
  height: 150px;
  left: 31%;
  bottom: 28%;
  opacity: 0.08;
  animation: ssFinGlideTwo 18s ease-in-out infinite;
}

/* Fluid ocean waves */
.ss-wave {
  position: absolute;
  z-index: 1;
  width: 140%;
  height: 360px;
  left: -16%;
  bottom: -155px;
  border-radius: 50%;
  transform: rotate(-4deg);
  will-change: transform;
}

.ss-wave-one {
  background: linear-gradient(
    90deg,
    rgba(0, 177, 107, 0.54),
    rgba(0, 61, 43, 0.96)
  );
  box-shadow:
    0 -20px 80px rgba(0, 177, 107, 0.16),
    inset 0 18px 40px rgba(184, 242, 213, 0.045);
  animation: ssWavePrimary 18s ease-in-out infinite alternate;
}

.ss-wave-two {
  bottom: -195px;
  background: linear-gradient(
    90deg,
    rgba(0, 122, 77, 0.38),
    rgba(0, 177, 107, 0.16)
  );
  animation: ssWaveSecondary 24s ease-in-out infinite alternate;
}

.ss-wave-three {
  bottom: -235px;
  height: 310px;
  opacity: 0.36;
  background: linear-gradient(
    90deg,
    rgba(184, 242, 213, 0.07),
    rgba(0, 177, 107, 0.22)
  );
  animation: ssWaveTertiary 30s ease-in-out infinite alternate;
}

/* Premium shield */
.ss-shield {
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 350px;
  left: 7%;
  top: 17%;
  opacity: 0.28;

  background:
    linear-gradient(135deg, rgba(184, 242, 213, 0.18), rgba(0, 177, 107, 0.34));

  clip-path: polygon(50% 0%, 92% 16%, 86% 66%, 50% 100%, 14% 66%, 8% 16%);

  border: 1px solid rgba(184, 242, 213, 0.34);
  box-shadow:
    0 0 38px rgba(0, 177, 107, 0.28),
    inset 0 0 48px rgba(184, 242, 213, 0.10);

  animation: ssShieldBreath 8s ease-in-out infinite;
  will-change: transform, opacity;
}

.ss-shield::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.14),
      transparent 38%,
      rgba(0, 177, 107, 0.13)
    );
}

.ss-shield-inner {
  position: absolute;
  inset: 34px;
  clip-path: polygon(50% 0%, 92% 16%, 86% 66%, 50% 100%, 14% 66%, 8% 16%);
  border: 1px solid rgba(184, 242, 213, 0.30);
  background:
    radial-gradient(circle, rgba(184, 242, 213, 0.12) 1px, transparent 1px);
  background-size: 9px 9px;
}

.ss-shield-scan {
  position: absolute;
  left: 8%;
  right: 8%;
  height: 2px;
  top: 18%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(184, 242, 213, 0.88),
    transparent
  );
  opacity: 0.58;
  filter: drop-shadow(0 0 8px rgba(0, 177, 107, 0.75));
  animation: ssShieldScan 5.5s ease-in-out infinite;
}

/* HUD rings */
.ss-orbit {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  border: 1px solid rgba(184, 242, 213, 0.12);
  opacity: 0.22;
  pointer-events: none;
}

.ss-orbit-one {
  width: 430px;
  height: 430px;
  left: 3.8%;
  top: 10%;
  animation: ssRingRotate 48s linear infinite;
}

.ss-orbit-two {
  width: 520px;
  height: 520px;
  left: 1.4%;
  top: 5.5%;
  border-style: dashed;
  animation: ssRingRotateReverse 64s linear infinite;
}

.ss-orbit-three {
  width: 300px;
  height: 300px;
  left: 11%;
  top: 24%;
  border-style: dotted;
  opacity: 0.16;
  animation: ssRingRotate 58s linear infinite;
}

/* Security glass icons */
.ss-security-node {
  position: absolute;
  z-index: 2;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(184, 242, 213, 0.22);

  background:
    linear-gradient(
      145deg,
      rgba(184, 242, 213, 0.16),
      rgba(0, 177, 107, 0.08) 45%,
      rgba(0, 61, 43, 0.20)
    );

  box-shadow:
    0 0 18px rgba(0, 177, 107, 0.16),
    inset 0 0 18px rgba(184, 242, 213, 0.06);

  opacity: 0.44;
  overflow: hidden;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  will-change: transform, opacity, filter, box-shadow;
}

.ss-security-node::before,
.ss-security-node::after {
  content: "";
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
}

/* Lock marker */
.ss-node-lock {
  left: 5.8%;
  top: 55%;
  animation:
    ssOceanFloatLock 12s ease-in-out infinite,
    ssSecurityNodeGlow 4.8s ease-in-out infinite;
}

.ss-node-lock::before {
  width: 16px;
  height: 12px;
  left: 21px;
  top: 28px;
  border-radius: 3px;
  background: rgba(184, 242, 213, 0.88);
}

.ss-node-lock::after {
  width: 20px;
  height: 18px;
  left: 19px;
  top: 16px;
  border: 3px solid rgba(184, 242, 213, 0.88);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

/* Camera marker */
.ss-node-camera {
  left: 28%;
  top: 22%;
  animation:
    ssOceanPatrolCamera 15s cubic-bezier(.45, 0, .25, 1) infinite,
    ssSecurityNodeGlow 5.6s ease-in-out infinite;
  animation-delay: -2s, -1s;
}

.ss-node-camera::before {
  width: 28px;
  height: 18px;
  left: 15px;
  top: 22px;
  border-radius: 5px;
  background: rgba(184, 242, 213, 0.86);
}

.ss-node-camera::after {
  width: 10px;
  height: 10px;
  left: 24px;
  top: 26px;
  border-radius: 50%;
  background: var(--ss-deep-green);
  box-shadow: 0 0 0 3px rgba(0, 177, 107, 0.30);
}

/* Signal marker */
.ss-node-signal {
  left: 23%;
  top: 64%;
  animation:
    ssOceanSignalDrift 17s ease-in-out infinite,
    ssSecurityNodePing 3.8s ease-in-out infinite;
  animation-delay: -4s, 0s;
}

.ss-node-signal::before {
  width: 8px;
  height: 8px;
  left: 25px;
  top: 27px;
  border-radius: 50%;
  background: rgba(184, 242, 213, 0.90);
  box-shadow:
    0 0 0 8px rgba(184, 242, 213, 0.08),
    0 0 0 18px rgba(184, 242, 213, 0.045);
}

.ss-node-signal::after {
  width: 36px;
  height: 36px;
  left: 11px;
  top: 12px;
  border-radius: 50%;
  border: 1px solid rgba(184, 242, 213, 0.26);
}

/* Desktop positioning */
@media (min-width: 1025px) {
  .ss-shield {
    left: 7% !important;
    right: auto !important;
    top: 17% !important;
  }

  .ss-orbit-one {
    left: 3.8% !important;
    right: auto !important;
    top: 10% !important;
  }

  .ss-orbit-two {
    left: 1.4% !important;
    right: auto !important;
    top: 5.5% !important;
  }

  .ss-orbit-three {
    left: 11% !important;
    right: auto !important;
    top: 24% !important;
  }

  .ss-node-lock {
    left: 5.8% !important;
    right: auto !important;
    top: 55% !important;
  }

  .ss-node-camera {
    left: 28% !important;
    right: auto !important;
    top: 22% !important;
  }

  .ss-node-signal {
    left: 23% !important;
    right: auto !important;
    top: 64% !important;
  }
}

/* Tablet */
@media (max-width: 1024px) {
  .ss-shield {
    left: auto !important;
    right: 3% !important;
    top: 18% !important;
    width: 220px !important;
    height: 260px !important;
    opacity: 0.48 !important;
  }

  .ss-orbit-one {
    left: auto !important;
    right: -2% !important;
    top: 10% !important;
    width: 340px !important;
    height: 340px !important;
  }

  .ss-orbit-two {
    left: auto !important;
    right: -6% !important;
    top: 6% !important;
    width: 420px !important;
    height: 420px !important;
  }

  .ss-orbit-three {
    display: none !important;
  }

  .ss-node-lock {
    left: auto !important;
    right: 5% !important;
    top: 56% !important;
  }

  .ss-node-camera,
  .ss-node-signal {
    display: none !important;
  }

  .ss-fin-one {
    opacity: 0.10;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .ss-shield {
    right: -46px !important;
    top: 18% !important;
    width: 170px !important;
    height: 200px !important;
    opacity: 0.32 !important;
  }

  .ss-orbit-one,
  .ss-orbit-two,
  .ss-node-lock {
    display: none !important;
  }

  .ss-fin-one {
    left: 6% !important;
    width: 90px !important;
    height: 140px !important;
    opacity: 0.08 !important;
  }

  .ss-fin-two {
    display: none !important;
  }

  .ss-wave {
    height: 230px !important;
    bottom: -115px !important;
  }

  .ss-network {
    opacity: 0.15 !important;
  }

  .ss-grid {
    opacity: 0.08 !important;
  }

  .ss-water-light {
    opacity: 0.06 !important;
  }
}

/* Optional hero text/button colors */
.ss-hero-section h1,
.ss-hero-section h2,
.ss-hero-section .elementor-heading-title {
  color: #ffffff !important;
}

.ss-hero-section p,
.ss-hero-section .elementor-widget-text-editor,
.ss-hero-section .elementor-widget-text-editor p {
  color: #dff5ec !important;
}

.ss-hero-section .elementor-button {
  border-radius: 0 !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
}

.ss-hero-section .elementor-button-link {
  background-color: var(--ss-green) !important;
  border-color: var(--ss-green) !important;
  color: #ffffff !important;
}

.ss-hero-section .elementor-button-link:hover {
  background-color: var(--ss-green-dark) !important;
  border-color: var(--ss-green-dark) !important;
}

/* Animations */
@keyframes ssHeroReveal {
  from {
    opacity: 0;
    filter: brightness(0.82);
  }

  to {
    opacity: 1;
    filter: brightness(1);
  }
}

@keyframes ssOceanDrift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-100px, 70px, 0);
  }
}

@keyframes ssWaterSweepOne {
  from {
    transform: translateX(-50px) rotate(18deg);
  }

  to {
    transform: translateX(80px) rotate(18deg);
  }
}

@keyframes ssWaterSweepTwo {
  from {
    transform: translateX(70px) rotate(18deg);
  }

  to {
    transform: translateX(-70px) rotate(18deg);
  }
}

@keyframes ssGridMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 300px 300px;
  }
}

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

  to {
    stroke-dashoffset: -280;
  }
}

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

  50% {
    opacity: 0.92;
    transform: scale(1.08);
  }
}

@keyframes ssWavePrimary {
  from {
    transform: translateX(-30px) translateY(0) rotate(-4deg);
  }

  to {
    transform: translateX(46px) translateY(-22px) rotate(-2deg);
  }
}

@keyframes ssWaveSecondary {
  from {
    transform: translateX(42px) translateY(10px) rotate(-6deg);
  }

  to {
    transform: translateX(-48px) translateY(-18px) rotate(-3deg);
  }
}

@keyframes ssWaveTertiary {
  from {
    transform: translateX(-20px) translateY(14px) rotate(-5deg);
  }

  to {
    transform: translateX(56px) translateY(-16px) rotate(-2deg);
  }
}

@keyframes ssFinGlideOne {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-8deg);
  }

  50% {
    transform: translate3d(34px, -18px, 0) rotate(-4deg);
  }
}

@keyframes ssFinGlideTwo {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(8deg);
  }

  50% {
    transform: translate3d(-26px, -12px, 0) rotate(3deg);
  }
}

@keyframes ssShieldBreath {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-10px) scale(1.015);
  }
}

@keyframes ssShieldScan {
  0% {
    top: 18%;
    opacity: 0;
  }

  18% {
    opacity: 0.62;
  }

  72% {
    opacity: 0.62;
  }

  100% {
    top: 82%;
    opacity: 0;
  }
}

@keyframes ssRingRotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes ssRingRotateReverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* Lively ocean-current icon movement */
@keyframes ssOceanFloatLock {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  18% {
    transform: translate3d(10px, -14px, 0) rotate(1.5deg);
  }

  42% {
    transform: translate3d(26px, -6px, 0) rotate(-1deg);
  }

  66% {
    transform: translate3d(14px, 16px, 0) rotate(1deg);
  }

  84% {
    transform: translate3d(-8px, 8px, 0) rotate(-1.5deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes ssOceanPatrolCamera {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }

  20% {
    transform: translate3d(-18px, 10px, 0) rotate(-1deg) scale(1.02);
  }

  45% {
    transform: translate3d(-34px, -8px, 0) rotate(0.8deg) scale(1);
  }

  70% {
    transform: translate3d(-8px, -22px, 0) rotate(1.4deg) scale(1.03);
  }

  88% {
    transform: translate3d(12px, -8px, 0) rotate(-0.6deg) scale(1.01);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
}

@keyframes ssOceanSignalDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  16% {
    transform: translate3d(14px, 12px, 0) rotate(1deg);
  }

  38% {
    transform: translate3d(34px, 2px, 0) rotate(-0.8deg);
  }

  58% {
    transform: translate3d(24px, -18px, 0) rotate(1.3deg);
  }

  78% {
    transform: translate3d(-6px, -10px, 0) rotate(-1deg);
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@keyframes ssSecurityNodeGlow {
  0%,
  100% {
    opacity: 0.34;
    filter: brightness(0.9);
  }

  50% {
    opacity: 0.68;
    filter: brightness(1.22);
  }
}

@keyframes ssSecurityNodePing {
  0%,
  100% {
    box-shadow:
      0 0 18px rgba(0, 177, 107, 0.14),
      inset 0 0 18px rgba(184, 242, 213, 0.06);
  }

  50% {
    box-shadow:
      0 0 28px rgba(0, 177, 107, 0.32),
      0 0 0 12px rgba(0, 177, 107, 0.035),
      inset 0 0 20px rgba(184, 242, 213, 0.10);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .ss-live-hero-bg *,
  .ss-network path,
  .ss-network circle {
    animation: none !important;
  }
}/* End custom CSS */