/* 2026-07-17: distinct visual language for homepage modules. */
.cjsr-capabilities .cjsr-section-label,
.cjsr-flow .cjsr-section-label,
.cjsr-value .cjsr-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cjsr-capabilities .cjsr-section-label::before,
.cjsr-flow .cjsr-section-label::before,
.cjsr-value .cjsr-section-label::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  flex: 0 0 auto !important;
  background: currentColor !important;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
  box-shadow: 0 0 12px currentColor !important;
}

.cjsr-flow .cjsr-section-label { color: #77a6ff !important; }
.cjsr-value .cjsr-section-label { color: #55dfba !important; }

/* Status rail: four functions, four accents and icon silhouettes. */
.cjsr-status:nth-child(1) { --cjsm-accent: #22d3ee; --cjsm-rgb: 34, 211, 238; }
.cjsr-status:nth-child(2) { --cjsm-accent: #4f8fff; --cjsm-rgb: 79, 143, 255; }
.cjsr-status:nth-child(3) { --cjsm-accent: #8b7bff; --cjsm-rgb: 139, 123, 255; }
.cjsr-status:nth-child(4) { --cjsm-accent: #47dfb5; --cjsm-rgb: 71, 223, 181; }

.cjsr-status::before {
  background: linear-gradient(112deg, rgba(var(--cjsm-rgb), 0.13), transparent 58%) !important;
}

.cjsr-status::after {
  background: linear-gradient(90deg, transparent, var(--cjsm-accent), transparent) !important;
}

.cjsr-status .cjsr-icon {
  border-color: rgba(var(--cjsm-rgb), 0.46) !important;
  background: linear-gradient(145deg, rgba(var(--cjsm-rgb), 0.2), rgba(7, 17, 42, 0.92)) !important;
  color: var(--cjsm-accent) !important;
}

.cjsr-status:nth-child(2) .cjsr-icon { border-radius: 50% !important; }
.cjsr-status:nth-child(3) .cjsr-icon { clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%) !important; }
.cjsr-status:nth-child(4) .cjsr-icon { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important; }
.cjsr-status-copy small { color: var(--cjsm-accent) !important; opacity: 0.72 !important; }

/* Capability cards: endpoint, routing, policy and observability. */
.cjsr-cap {
  --cjsm-accent: #22d3ee;
  --cjsm-rgb: 34, 211, 238;
  isolation: isolate !important;
  overflow: hidden !important;
  border-color: rgba(var(--cjsm-rgb), 0.28) !important;
  box-shadow:
    inset 0 3px 0 rgba(var(--cjsm-rgb), 0.58),
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 20px 52px rgba(1, 5, 20, 0.2) !important;
  transition: border-color 180ms ease, box-shadow 180ms ease !important;
}

.cjsr-cap-a {
  --cjsm-accent: #22d3ee;
  --cjsm-rgb: 34, 211, 238;
  background:
    linear-gradient(126deg, rgba(34, 211, 238, 0.13), transparent 42%),
    linear-gradient(145deg, #0a1b38 0%, #0c1631 58%, #10172e 100%) !important;
}

.cjsr-cap-b {
  --cjsm-accent: #4f8fff;
  --cjsm-rgb: 79, 143, 255;
  background:
    repeating-linear-gradient(135deg, rgba(79, 143, 255, 0.045) 0 1px, transparent 1px 26px),
    linear-gradient(145deg, #101b3e 0%, #111831 52%, #0b132c 100%) !important;
}

.cjsr-cap-c {
  --cjsm-accent: #8b7bff;
  --cjsm-rgb: 139, 123, 255;
  background:
    linear-gradient(90deg, rgba(139, 123, 255, 0.05) 1px, transparent 1px),
    linear-gradient(160deg, rgba(139, 123, 255, 0.15), transparent 46%),
    linear-gradient(145deg, #17163b, #11142d) !important;
  background-size: 34px 100%, auto, auto !important;
}

.cjsr-cap-d {
  --cjsm-accent: #47dfb5;
  --cjsm-rgb: 71, 223, 181;
  background:
    repeating-linear-gradient(0deg, rgba(71, 223, 181, 0.035) 0 1px, transparent 1px 32px),
    linear-gradient(132deg, rgba(71, 223, 181, 0.11), transparent 43%),
    linear-gradient(145deg, #092332, #10172f 64%, #0c142a) !important;
}

.cjsr-cap:hover {
  border-color: rgba(var(--cjsm-rgb), 0.72) !important;
  box-shadow:
    inset 0 3px 0 var(--cjsm-accent),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 22px 54px rgba(1, 5, 20, 0.28) !important;
}

.cjsr-cap::before {
  z-index: 0 !important;
  opacity: 0.36 !important;
}

.cjsr-cap::after {
  z-index: 4 !important;
  right: 34px !important;
  left: 34px !important;
  background: linear-gradient(90deg, transparent, var(--cjsm-accent), transparent) !important;
  transform: scaleX(0.18) !important;
  transform-origin: left !important;
}

.cjsr-cap:hover::after { transform: scaleX(1) !important; }

.cjsr-cap > :not(.cjsm-cap-graphic) {
  position: relative !important;
  z-index: 3 !important;
}

.cjsr-cap .cjsr-icon {
  width: 52px !important;
  height: 52px !important;
  border-color: rgba(var(--cjsm-rgb), 0.58) !important;
  background: linear-gradient(145deg, rgba(var(--cjsm-rgb), 0.22), rgba(6, 17, 43, 0.94)) !important;
  color: var(--cjsm-accent) !important;
  box-shadow: inset 0 0 24px rgba(var(--cjsm-rgb), 0.09), 0 12px 30px rgba(0, 5, 26, 0.22) !important;
}

.cjsr-cap-b .cjsr-icon { border-radius: 50% !important; }
.cjsr-cap-c .cjsr-icon { clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%) !important; }
.cjsr-cap-d .cjsr-icon { clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px)) !important; }

.cjsr-cap:hover .cjsr-icon {
  border-color: var(--cjsm-accent) !important;
  color: #ffffff !important;
  box-shadow: inset 0 0 24px rgba(var(--cjsm-rgb), 0.16), 0 0 28px rgba(var(--cjsm-rgb), 0.18) !important;
}

.cjsr-cap-no {
  padding-left: 10px !important;
  border-left: 2px solid var(--cjsm-accent) !important;
  color: var(--cjsm-accent) !important;
}

.cjsr-cap h3 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 26px !important;
}

.cjsr-cap-a h3,
.cjsr-cap-d h3 { font-size: 29px !important; }

.cjsr-cap h3::before {
  content: "" !important;
  width: 18px !important;
  height: 2px !important;
  flex: 0 0 auto !important;
  background: var(--cjsm-accent) !important;
  box-shadow: 0 0 12px rgba(var(--cjsm-rgb), 0.55) !important;
}

.cjsr-cap-tags span {
  border-color: rgba(var(--cjsm-rgb), 0.28) !important;
  background: rgba(var(--cjsm-rgb), 0.07) !important;
  color: #b9cee4 !important;
}

.cjsm-cap-graphic {
  position: absolute !important;
  z-index: 1 !important;
  top: 24px !important;
  right: 28px !important;
  width: min(46%, 280px) !important;
  height: 122px !important;
  color: var(--cjsm-accent) !important;
  opacity: 0.66 !important;
  pointer-events: none !important;
  transition: opacity 200ms ease, transform 200ms ease !important;
}

.cjsr-cap-c .cjsm-cap-graphic { width: min(54%, 220px) !important; }
.cjsr-cap:hover .cjsm-cap-graphic { opacity: 0.92 !important; transform: translateY(-2px) !important; }
.cjsm-cap-graphic svg { width: 100% !important; height: 100% !important; overflow: visible !important; }
.cjsm-grid-line { fill: none !important; stroke: currentColor !important; stroke-width: 0.65 !important; opacity: 0.18 !important; }
.cjsm-signal-line { fill: none !important; stroke: currentColor !important; stroke-width: 1.2 !important; opacity: 0.5 !important; vector-effect: non-scaling-stroke !important; }
.cjsm-signal-pulse { fill: none !important; stroke: #dffbff !important; stroke-width: 2 !important; stroke-linecap: square !important; stroke-dasharray: 10 90 !important; filter: drop-shadow(0 0 5px currentColor) !important; animation: cjsm-route-pulse 7s linear infinite !important; animation-play-state: paused !important; vector-effect: non-scaling-stroke !important; }
.cjsm-panel, .cjsm-policy-cell { fill: rgba(var(--cjsm-rgb), 0.06) !important; stroke: currentColor !important; stroke-width: 1 !important; opacity: 0.72 !important; }
.cjsm-detail { fill: none !important; stroke: currentColor !important; stroke-width: 1.4 !important; stroke-linecap: square !important; }
.cjsm-node { fill: currentColor !important; filter: drop-shadow(0 0 5px currentColor) !important; }
.cjsm-terminal, .cjsm-bar { fill: rgba(var(--cjsm-rgb), 0.42) !important; stroke: currentColor !important; stroke-width: 0.8 !important; }

/* Flow: modular process docks with a light streak instead of an isolated dot. */
.cjsr-flow-track {
  gap: 10px !important;
}

.cjsr-flow-track::before {
  z-index: 4 !important;
  right: 5% !important;
  left: 5% !important;
  background: linear-gradient(90deg, transparent, rgba(91, 170, 255, 0.28), rgba(89, 226, 255, 0.55), transparent) !important;
  pointer-events: none !important;
}

.cjsr-flow-track::after {
  z-index: 5 !important;
  top: 71px !important;
  left: 5% !important;
  width: 72px !important;
  height: 2px !important;
  border-radius: 0 !important;
  background: linear-gradient(90deg, transparent, #9cf4ff, transparent) !important;
  box-shadow: 0 0 16px rgba(34, 211, 238, 0.55) !important;
  animation: cjs-home-process-run 6.5s linear infinite !important;
}

.cjsr-flow-step {
  --cjsm-accent: #22d3ee;
  --cjsm-rgb: 34, 211, 238;
  z-index: 1 !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border: 1px solid rgba(var(--cjsm-rgb), 0.2) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(180deg, rgba(var(--cjsm-rgb), 0.13) 0 86px, rgba(8, 14, 35, 0.82) 86px 100%) !important;
  box-shadow: inset 0 3px 0 rgba(var(--cjsm-rgb), 0.42) !important;
}

.cjsr-flow-step:nth-child(1) { --cjsm-accent: #22d3ee; --cjsm-rgb: 34, 211, 238; }
.cjsr-flow-step:nth-child(2) { --cjsm-accent: #4f8fff; --cjsm-rgb: 79, 143, 255; }
.cjsr-flow-step:nth-child(3) { --cjsm-accent: #8b7bff; --cjsm-rgb: 139, 123, 255; }
.cjsr-flow-step:nth-child(4) { --cjsm-accent: #47dfb5; --cjsm-rgb: 71, 223, 181; }

.cjsr-flow-step + .cjsr-flow-step { border-left: 1px solid rgba(var(--cjsm-rgb), 0.2) !important; }
.cjsr-flow-step:hover { background: linear-gradient(180deg, rgba(var(--cjsm-rgb), 0.18) 0 86px, rgba(10, 17, 41, 0.94) 86px 100%) !important; }
.cjsr-flow-step > :not(.cjsm-flow-meter) { position: relative !important; z-index: 6 !important; }

.cjsr-flow-step .cjsr-icon {
  width: 58px !important;
  height: 58px !important;
  border-color: rgba(var(--cjsm-rgb), 0.6) !important;
  background: linear-gradient(145deg, rgba(var(--cjsm-rgb), 0.27), rgba(6, 17, 43, 0.96)) !important;
  color: var(--cjsm-accent) !important;
}

.cjsr-flow-step:nth-child(1) .cjsr-icon { border-radius: 50% !important; }
.cjsr-flow-step:nth-child(3) .cjsr-icon { clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%) !important; }
.cjsr-flow-step:nth-child(4) .cjsr-icon { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important; }

.cjsr-flow-step h3 {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 30px !important;
}

.cjsr-flow-step h3::before {
  content: "" !important;
  width: 14px !important;
  height: 2px !important;
  background: var(--cjsm-accent) !important;
  box-shadow: 0 0 10px rgba(var(--cjsm-rgb), 0.55) !important;
}

.cjsr-flow-step::after { color: rgba(var(--cjsm-rgb), 0.2) !important; }

.cjsm-flow-meter {
  position: absolute !important;
  z-index: 3 !important;
  top: 30px !important;
  right: 24px !important;
  width: 76px !important;
  height: 34px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-end !important;
  gap: 5px !important;
  opacity: 0.56 !important;
  pointer-events: none !important;
}

.cjsm-flow-meter i {
  display: block !important;
  width: 3px !important;
  height: 9px !important;
  background: var(--cjsm-accent) !important;
  box-shadow: 0 0 7px rgba(var(--cjsm-rgb), 0.48) !important;
  transform-origin: bottom !important;
  animation: cjsm-meter 2.4s ease-in-out infinite alternate !important;
  animation-play-state: paused !important;
}

.cjsm-flow-meter i:nth-child(2) { height: 20px !important; animation-delay: -0.8s !important; }
.cjsm-flow-meter i:nth-child(3) { height: 13px !important; animation-delay: -1.5s !important; }
.cjsm-flow-meter i:nth-child(4) { height: 28px !important; animation-delay: -0.35s !important; }
.cjsm-flow-meter i:nth-child(5) { height: 17px !important; animation-delay: -1.1s !important; }
.cjsm-flow-meter i:nth-child(6) { height: 24px !important; animation-delay: -1.8s !important; }

/* Value cards: redundancy, visibility and control. */
.cjsr-value-item {
  --cjsm-accent: #22d3ee;
  --cjsm-rgb: 34, 211, 238;
  isolation: isolate !important;
  overflow: hidden !important;
  border-color: rgba(var(--cjsm-rgb), 0.25) !important;
  box-shadow: inset 0 3px 0 rgba(var(--cjsm-rgb), 0.48), 0 18px 46px rgba(1, 5, 20, 0.2) !important;
}

.cjsr-value-item:nth-child(1) {
  --cjsm-accent: #47dfb5;
  --cjsm-rgb: 71, 223, 181;
  background: linear-gradient(145deg, #092536, #10172e 72%) !important;
}

.cjsr-value-item:nth-child(2) {
  --cjsm-accent: #4f8fff;
  --cjsm-rgb: 79, 143, 255;
  background: linear-gradient(145deg, #101e42, #10162f 72%) !important;
}

.cjsr-value-item:nth-child(3) {
  --cjsm-accent: #8b7bff;
  --cjsm-rgb: 139, 123, 255;
  background: linear-gradient(145deg, #1a173f, #10142d 72%) !important;
}

.cjsr-value-item::before { z-index: 0 !important; opacity: 0.3 !important; }
.cjsr-value-item > :not(.cjsm-value-graphic) { position: relative !important; z-index: 3 !important; }

.cjsr-value-item .cjsr-icon {
  width: 54px !important;
  height: 54px !important;
  border-color: rgba(var(--cjsm-rgb), 0.56) !important;
  background: linear-gradient(145deg, rgba(var(--cjsm-rgb), 0.24), rgba(6, 17, 43, 0.94)) !important;
  color: var(--cjsm-accent) !important;
}

.cjsr-value-item:nth-child(1) .cjsr-icon { border-radius: 50% !important; }
.cjsr-value-item:nth-child(2) .cjsr-icon { clip-path: polygon(50% 0, 94% 25%, 94% 75%, 50% 100%, 6% 75%, 6% 25%) !important; }
.cjsr-value-item:nth-child(3) .cjsr-icon { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important; }

.cjsr-value-item small {
  padding-left: 10px !important;
  border-left: 2px solid var(--cjsm-accent) !important;
  color: var(--cjsm-accent) !important;
}

.cjsr-value-item strong {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.cjsr-value-item strong::before {
  content: "" !important;
  width: 16px !important;
  height: 2px !important;
  background: var(--cjsm-accent) !important;
  box-shadow: 0 0 10px rgba(var(--cjsm-rgb), 0.55) !important;
}

.cjsm-value-graphic {
  position: absolute !important;
  z-index: 1 !important;
  top: 28px !important;
  right: 26px !important;
  width: min(52%, 230px) !important;
  height: 112px !important;
  color: var(--cjsm-accent) !important;
  opacity: 0.55 !important;
  pointer-events: none !important;
}

.cjsm-value-graphic svg { width: 100% !important; height: 100% !important; overflow: visible !important; }
.cjsm-value-line, .cjsm-value-grid, .cjsm-lock-cell { fill: none !important; stroke: currentColor !important; stroke-width: 1 !important; opacity: 0.52 !important; vector-effect: non-scaling-stroke !important; }
.cjsm-value-line-b { opacity: 0.24 !important; }
.cjsm-value-grid { opacity: 0.18 !important; }
.cjsm-lock-cell { fill: rgba(var(--cjsm-rgb), 0.05) !important; }
.cjsm-value-detail { fill: none !important; stroke: currentColor !important; stroke-width: 1.5 !important; }
.cjsm-value-node { fill: currentColor !important; filter: drop-shadow(0 0 5px currentColor) !important; }
.cjsm-value-pulse { fill: none !important; stroke: #eafcff !important; stroke-width: 2 !important; stroke-dasharray: 10 90 !important; filter: drop-shadow(0 0 5px currentColor) !important; animation: cjsm-route-pulse 8.5s linear infinite !important; animation-play-state: paused !important; vector-effect: non-scaling-stroke !important; }

.cjsm-inview .cjsm-signal-pulse,
.cjsm-inview .cjsm-flow-meter i,
.cjsm-inview .cjsm-value-pulse {
  animation-play-state: running !important;
}

.cjsm-paused .cjsm-signal-pulse,
.cjsm-paused .cjsm-flow-meter i,
.cjsm-paused .cjsm-value-pulse {
  animation-play-state: paused !important;
}

@keyframes cjsm-route-pulse {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes cjsm-meter {
  from { transform: scaleY(0.42); opacity: 0.42; }
  to { transform: scaleY(1); opacity: 1; }
}

@media (max-width: 1180px) {
  .cjsm-cap-graphic { width: 43% !important; opacity: 0.54 !important; }
  .cjsm-flow-meter { width: 58px !important; right: 18px !important; }
  .cjsm-value-graphic { width: 46% !important; opacity: 0.44 !important; }
}

@media (max-width: 780px) {
  .cjsm-cap-graphic {
    top: 20px !important;
    right: 18px !important;
    width: 46% !important;
    height: 100px !important;
    opacity: 0.42 !important;
  }

  .cjsr-cap h3,
  .cjsr-cap-a h3,
  .cjsr-cap-d h3 { font-size: 25px !important; }

  .cjsr-flow-track { gap: 10px !important; }
  .cjsr-flow-step { min-height: 220px !important; }
  .cjsr-flow-step + .cjsr-flow-step {
    border-top: 1px solid rgba(var(--cjsm-rgb), 0.24) !important;
    border-left: 1px solid rgba(var(--cjsm-rgb), 0.2) !important;
  }

  .cjsm-flow-meter { top: 22px !important; right: 20px !important; }
  .cjsm-value-graphic { top: 22px !important; right: 18px !important; height: 94px !important; }
}

@media (max-width: 420px) {
  .cjsm-cap-graphic { width: 50% !important; opacity: 0.34 !important; }
  .cjsm-flow-meter { opacity: 0.42 !important; }
  .cjsm-value-graphic { width: 50% !important; opacity: 0.36 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cjsm-signal-pulse,
  .cjsm-flow-meter i,
  .cjsm-value-pulse {
    animation: none !important;
  }
}

/* Contact and support panel. */
.cjsr-cta {
  isolation: isolate !important;
  background:
    linear-gradient(122deg, rgba(34, 211, 238, 0.09), transparent 34%),
    repeating-linear-gradient(135deg, rgba(79, 143, 255, 0.035) 0 1px, transparent 1px 30px),
    linear-gradient(145deg, #071329 0%, #0c1430 58%, #101432 100%) !important;
}

.cjsr-cta::before {
  top: -36px !important;
  right: 36px !important;
  color: rgba(72, 145, 255, 0.045) !important;
  font-size: 220px !important;
}

.cjsr-cta::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -28% !important;
  width: 24% !important;
  background: linear-gradient(90deg, transparent, rgba(104, 226, 255, 0.08), transparent) !important;
  transform: skewX(-18deg) !important;
  animation: cjsm-contact-scan 9s ease-in-out infinite !important;
  pointer-events: none !important;
}

.cjsr-cta-inner {
  min-height: 320px !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(480px, 0.85fr) !important;
  gap: 72px !important;
  padding-top: 58px !important;
  padding-bottom: 58px !important;
}

.cjsm-contact-copy {
  position: relative !important;
  z-index: 2 !important;
  max-width: 760px !important;
}

.cjsm-contact-kicker {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
  color: #59ddf5 !important;
  font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.cjsm-contact-kicker-mark {
  width: 22px !important;
  height: 8px !important;
  border-left: 2px solid #22d3ee !important;
  border-right: 7px solid #4f8fff !important;
  background: rgba(34, 211, 238, 0.22) !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.28) !important;
}

.cjsr-cta .cjsm-contact-copy h2 {
  max-width: 760px !important;
  margin: 0 !important;
  color: #f4f8ff !important;
  -webkit-text-fill-color: #f4f8ff !important;
  font-size: 36px !important;
  font-weight: 760 !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
}

.cjsm-contact-copy p {
  max-width: 720px !important;
  margin: 18px 0 0 !important;
  color: #a9bbd2 !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

.cjsm-contact-channels {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.cjsm-contact-card {
  --cjsm-contact-accent: #22d3ee;
  --cjsm-contact-rgb: 34, 211, 238;
  position: relative !important;
  min-width: 0 !important;
  min-height: 142px !important;
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 38px !important;
  gap: 14px !important;
  align-items: center !important;
  overflow: hidden !important;
  padding: 22px 18px !important;
  border: 1px solid rgba(var(--cjsm-contact-rgb), 0.31) !important;
  border-radius: 6px !important;
  background:
    linear-gradient(136deg, rgba(var(--cjsm-contact-rgb), 0.14), transparent 48%),
    repeating-linear-gradient(90deg, rgba(var(--cjsm-contact-rgb), 0.035) 0 1px, transparent 1px 24px),
    rgba(7, 17, 42, 0.82) !important;
  box-shadow: inset 0 3px 0 rgba(var(--cjsm-contact-rgb), 0.48), 0 20px 46px rgba(0, 4, 22, 0.2) !important;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease !important;
}

.cjsm-contact-card-group {
  --cjsm-contact-accent: #5b91ff;
  --cjsm-contact-rgb: 91, 145, 255;
}

.cjsm-contact-card::after {
  content: "" !important;
  position: absolute !important;
  right: -20px !important;
  bottom: -18px !important;
  width: 88px !important;
  height: 64px !important;
  border-top: 1px solid rgba(var(--cjsm-contact-rgb), 0.18) !important;
  border-left: 1px solid rgba(var(--cjsm-contact-rgb), 0.12) !important;
  transform: skewX(-20deg) !important;
  pointer-events: none !important;
}

.cjsm-contact-card:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(var(--cjsm-contact-rgb), 0.68) !important;
  box-shadow: inset 0 3px 0 var(--cjsm-contact-accent), 0 22px 50px rgba(0, 4, 22, 0.28) !important;
}

.cjsm-contact-icon {
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid rgba(var(--cjsm-contact-rgb), 0.52) !important;
  border-radius: 5px !important;
  background: linear-gradient(145deg, rgba(var(--cjsm-contact-rgb), 0.22), rgba(5, 15, 37, 0.94)) !important;
  color: var(--cjsm-contact-accent) !important;
  box-shadow: inset 0 0 20px rgba(var(--cjsm-contact-rgb), 0.08) !important;
}

.cjsm-contact-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.7 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.cjsm-contact-meta {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.cjsm-contact-meta small {
  color: var(--cjsm-contact-accent) !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
}

.cjsm-contact-meta strong {
  color: #f4f8ff !important;
  font-family: "Bahnschrift", "Microsoft YaHei UI", sans-serif !important;
  font-size: 23px !important;
  font-weight: 720 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
  white-space: nowrap !important;
}

.cjsm-copy-button {
  position: relative !important;
  z-index: 2 !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(var(--cjsm-contact-rgb), 0.35) !important;
  border-radius: 4px !important;
  background: rgba(var(--cjsm-contact-rgb), 0.08) !important;
  color: var(--cjsm-contact-accent) !important;
  cursor: pointer !important;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease !important;
}

.cjsm-copy-button:hover,
.cjsm-copy-button:focus-visible,
.cjsm-copy-button.is-copied {
  border-color: var(--cjsm-contact-accent) !important;
  background: rgba(var(--cjsm-contact-rgb), 0.18) !important;
  color: #ffffff !important;
  outline: none !important;
}

.cjsm-copy-button svg {
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.cjsm-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  clip-path: inset(50%) !important;
}

@keyframes cjsm-contact-scan {
  0%, 18% { left: -28%; opacity: 0; }
  38%, 62% { opacity: 1; }
  82%, 100% { left: 112%; opacity: 0; }
}

@media (max-width: 1180px) {
  .cjsr-cta-inner {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  .cjsm-contact-copy {
    max-width: 820px !important;
  }
}

@media (max-width: 640px) {
  .cjsr-cta-inner {
    gap: 28px !important;
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }

  .cjsr-cta .cjsm-contact-copy h2 {
    font-size: 28px !important;
    line-height: 1.38 !important;
  }

  .cjsm-contact-copy p {
    margin-top: 14px !important;
    font-size: 15px !important;
  }

  .cjsm-contact-channels {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .cjsm-contact-card {
    min-height: 116px !important;
    padding: 18px !important;
  }
}

@media (max-width: 420px) {
  .cjsr-cta .cjsm-contact-copy h2 {
    font-size: 26px !important;
  }

  .cjsm-contact-card {
    grid-template-columns: 42px minmax(0, 1fr) 36px !important;
    gap: 12px !important;
    padding: 16px !important;
  }

  .cjsm-contact-icon {
    width: 42px !important;
    height: 42px !important;
  }

  .cjsm-contact-meta strong {
    font-size: 22px !important;
  }

  .cjsm-copy-button {
    width: 36px !important;
    height: 36px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cjsr-cta::after,
  .cjsm-contact-card {
    animation: none !important;
    transition: none !important;
  }
}