.cctv-page .cctv-process { background: #f4f8f5; }
.cctv-process ol { gap: 28px; }
.cctv-process .cctv-process-icon {
  width: 86px;
  height: 86px;
  border: 1px solid #357260;
  border-radius: 19px;
  background: linear-gradient(145deg, #235b49, #093327);
  box-shadow: inset 0 1px 0 #ffffff35, 0 8px 17px #103c2e20;
}
.cctv-process .cctv-process-icon svg {
  color: #effff6;
  filter: drop-shadow(0 2px 2px #06271d);
}
.cctv-process li:not(:last-child)::after {
  content: "···→";
  color: #437d65;
  right: -27px;
}
.cctv-process li:hover .cctv-process-icon {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px #103c2e28;
}
.cctv-solution-panel .cctv-camera-preview {
  display: grid;
  padding: 8px;
  background: radial-gradient(circle, #fafffb, #d5eadd);
}
.cctv-camera-preview img { width: 100%; height: auto; }
.cctv-brands.cctv-brands-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  background: #eef6f0;
  padding: 22px;
}
.cctv-brands-featured > strong { grid-column: 1 / -1; text-align: center; }
.cctv-brands-featured > span {
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  align-items: center;
  min-height: 68px;
  background: white;
  border: 1px solid #dce8df;
  border-radius: 12px;
  font-size: clamp(16px, 2.1vw, 30px);
  transition: transform .25s, box-shadow .25s;
}
.cctv-brands-featured > span:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 15px #103c2e14;
}
@media (max-width: 950px) {
  .cctv-solution-panel .cctv-camera-preview { max-width: 260px; grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 720px) {
  .cctv-process .cctv-process-icon { width: 62px; height: 62px; }
  .cctv-brands.cctv-brands-featured { padding: 12px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .cctv-brands-featured > span:hover, .cctv-process li:hover .cctv-process-icon { transform: none; }
}