/* KC interactive phone showcase: real app screenshots + spotlight + caption chip */
.kcp-phone {
  --kcp-w: 300px;
  position: relative;
  width: var(--kcp-w);
  max-width: 100%;
  margin: 0 auto;
  background: #0b0b0f;
  border-radius: 44px;
  padding: 12px;
  box-shadow: 0 30px 60px rgba(18, 20, 42, .28), inset 0 0 0 2px #2b2d36;
  transition: box-shadow .4s ease;
}
.kcp-phone.kcp-pulse { box-shadow: 0 30px 60px rgba(18, 20, 42, .28), inset 0 0 0 2px #2b2d36, 0 0 0 8px rgba(30, 136, 255, .22); }
.kcp-phone::before {            /* notch */  content: "";
  position: absolute;

  top: 12px; left: 50%;
  width: 36%; height: 20px;
  transform: translateX(-50%);
  background: #0b0b0f;
  border-radius: 0 0 16px 16px;
  z-index: 5;
}
.kcp-screen {
  position: relative;
  aspect-ratio: 0.48;
  background: #fff;
  border-radius: 34px;
  overflow: hidden;
}
.kcp-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .45s ease, transform .6s ease;
}
.kcp-img.active { opacity: 1; transform: scale(1); }

/* spotlight: ring + dimmed surroundings */
.kcp-spot {
  position: absolute;
  z-index: 3;
  border-radius: 14px;
  box-shadow: 0 0 0 999px rgba(11, 18, 40, .38), 0 0 0 3px #1e88ff;
  pointer-events: none;
  opacity: 0;
  left: 50%; top: 50%; width: 0; height: 0;
  transition: left .5s cubic-bezier(.4, 0, .2, 1), top .5s cubic-bezier(.4, 0, .2, 1),
              width .5s cubic-bezier(.4, 0, .2, 1), height .5s cubic-bezier(.4, 0, .2, 1),
              border-radius .3s ease, opacity .35s ease;
}
.kcp-spot.on { opacity: 1; animation: kcpPing 1.8s ease-out .5s infinite; }
.kcp-spot.circle { border-radius: 50%; }
@keyframes kcpPing {
  0%   { box-shadow: 0 0 0 999px rgba(11, 18, 40, .38), 0 0 0 3px #1e88ff, 0 0 0 3px rgba(30, 136, 255, .55); }
  100% { box-shadow: 0 0 0 999px rgba(11, 18, 40, .38), 0 0 0 3px #1e88ff, 0 0 0 16px rgba(30, 136, 255, 0); }
}

/* caption chip */
.kcp-chip {
  position: absolute;
  z-index: 4;
  left: 8%; right: 8%;
  padding: 9px 12px;
  border-radius: 12px;
  background: #fff;
  color: #12142a;
  font-size: 12px; line-height: 1.35; font-weight: 600;
  text-align: center;
  box-shadow: 0 8px 22px rgba(18, 20, 42, .28);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease .15s, transform .35s ease .15s, top .5s ease;
  pointer-events: none;
}
.kcp-chip.on { opacity: 1; transform: none; }
.kcp-chip b { display: block; color: #1e88ff; font-size: 12.5px; font-weight: 800; margin-bottom: 2px; }
.kcp-chip span { font-weight: 500; color: #3a3d55; }

/* clickable feature tiles on the features page */
.kcp-trigger { cursor: pointer; }
.kcp-trigger .card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; border: 2px solid transparent; border-radius: 16px; }
.kcp-trigger:hover .card { transform: translateX(4px); }
.kcp-trigger.active .card { border-color: #1e88ff; box-shadow: 0 12px 30px rgba(30, 136, 255, .18); }
.kcp-trigger.active .title { color: #1e88ff; }
.kcp-trigger:focus-visible { outline: 3px solid #1e88ff; outline-offset: 4px; border-radius: 16px; }
.kcp-hint { font-size: 13px; color: #747474; margin: 0 0 14px; }

@media (max-width: 991px) { .kcp-phone { --kcp-w: 280px; } }
@media (prefers-reduced-motion: reduce) {
  .kcp-img, .kcp-spot, .kcp-chip { transition: none; }
  .kcp-spot.on { animation: none; }
}