.cpk-public-gateway {
  --k-layout-marketing-current: min(1120px, calc(100vw - 48px));

  position: relative;
  min-height: 100vh;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  background-image:
    radial-gradient(
      900px 520px at 12% 0%,
      color-mix(in srgb, var(--k-color-primary) 22%, transparent),
      transparent 62%
    ),
    radial-gradient(
      780px 460px at 92% 12%,
      color-mix(in srgb, var(--k-color-accent) 12%, transparent),
      transparent 58%
    );
  background-size: cover;
}

.cpk-public-gateway .k-marketing-header,
.cpk-public-gateway .k-marketing-main,
.cpk-public-gateway .k-marketing-footer {
  position: relative;
  z-index: 2;
}

.cpk-public-gateway .k-marketing-main {
  flex: 0 0 auto;
}

.cpk-public-gateway .k-landing-stack {
  gap: var(--k-space-6);
  padding-top: var(--k-space-7);
  padding-bottom: var(--k-space-8);
}

.cpk-hero {
  margin-top: 0;
}

.cpk-access-section {
  margin-top: var(--k-space-5);
}

.cpk-service-grid {
  gap: var(--k-space-5);
}

.cpk-service-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px;
}

.cpk-service-grid--has-internal {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 1120px;
}

.cpk-internal-card[hidden] {
  display: none !important;
}

.cpk-muted-card {
  opacity: 0.88;
}

.cpk-footer-grid {
  grid-template-columns: 1fr;
}

.cpk-public-gateway .k-marketing-footer {
  margin-top: auto;
}

/* Background wave field - performance mode */

.cpk-bg-waves {
  position: absolute;
  left: -12vw;
  right: -12vw;
  bottom: 4.25rem;
  height: min(64vh, 680px);
  z-index: 1;
  pointer-events: none;
  opacity: 0.88;

  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 10%,
    black 84%,
    transparent 100%
  );

  transform: translateZ(0);
  will-change: transform;
}

.cpk-wave-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: translateZ(0);
}

.cpk-wave-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;

  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

/* Far background */

.cpk-wave-line--ghost {
  stroke: rgba(35, 88, 180, 0.12);
  stroke-width: 3.4;
  opacity: 0.28;
  animation-name: cpk-wave-drift-slow;
  animation-duration: 42s;
  animation-delay: -12s;
}

.cpk-wave-line--far-a {
  stroke: rgba(56, 135, 255, 0.15);
  stroke-width: 2.2;
  opacity: 0.36;
  animation-name: cpk-wave-drift-slow;
  animation-duration: 36s;
  animation-delay: -8s;
}

.cpk-wave-line--far-b {
  stroke: rgba(82, 205, 255, 0.18);
  stroke-width: 1.8;
  opacity: 0.42;
  animation-name: cpk-wave-drift-slow;
  animation-duration: 32s;
  animation-delay: -15s;
}

/* Mid depth */

.cpk-wave-line--mid-a {
  stroke: rgba(82, 205, 255, 0.26);
  stroke-width: 1.55;
  opacity: 0.58;
  animation-name: cpk-wave-drift-mid;
  animation-duration: 26s;
  animation-delay: -4s;
}

.cpk-wave-line--mid-b {
  stroke: rgba(56, 135, 255, 0.30);
  stroke-width: 1.35;
  opacity: 0.62;
  animation-name: cpk-wave-drift-mid;
  animation-duration: 23s;
  animation-delay: -11s;
}

/* Front signal lines */

.cpk-wave-line--front-a {
  stroke: rgba(82, 205, 255, 0.48);
  stroke-width: 1.15;
  opacity: 0.82;
  animation-name: cpk-wave-drift-fast;
  animation-duration: 20s;
  animation-delay: -6s;
}

.cpk-wave-line--front-b {
  stroke: rgba(82, 205, 255, 0.38);
  stroke-width: 1;
  opacity: 0.72;
  animation-name: cpk-wave-drift-fast;
  animation-duration: 18s;
  animation-delay: -2s;
}

.cpk-wave-line--high-a {
  stroke: rgba(56, 135, 255, 0.26);
  stroke-width: 0.95;
  opacity: 0.54;
  animation-name: cpk-wave-drift-fast;
  animation-duration: 24s;
  animation-delay: -9s;
}

@keyframes cpk-wave-drift-slow {
  0% {
    transform: translate3d(-0.8%, 0, 0);
    opacity: 0.24;
  }

  50% {
    transform: translate3d(0.8%, -0.5%, 0);
    opacity: 0.38;
  }

  100% {
    transform: translate3d(-0.8%, 0, 0);
    opacity: 0.24;
  }
}

@keyframes cpk-wave-drift-mid {
  0% {
    transform: translate3d(-1.1%, 0.2%, 0);
    opacity: 0.44;
  }

  50% {
    transform: translate3d(1%, -0.8%, 0);
    opacity: 0.64;
  }

  100% {
    transform: translate3d(-1.1%, 0.2%, 0);
    opacity: 0.44;
  }
}

@keyframes cpk-wave-drift-fast {
  0% {
    transform: translate3d(-1.4%, 0.4%, 0);
    opacity: 0.58;
  }

  50% {
    transform: translate3d(1.3%, -1.1%, 0);
    opacity: 0.82;
  }

  100% {
    transform: translate3d(-1.4%, 0.4%, 0);
    opacity: 0.58;
  }
}

@media (max-width: 991px) {
  .cpk-public-gateway {
    --k-layout-marketing-current: min(100%, calc(100vw - 32px));
  }

  .cpk-service-grid--two {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .cpk-service-grid--has-internal {
    grid-template-columns: 1fr;
    max-width: none;
  }

  .cpk-bg-waves {
    left: -44vw;
    right: -44vw;
    bottom: 5.5rem;
    height: 54vh;
    opacity: 0.66;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cpk-wave-line {
    animation: none;
  }
}