/* Blueprint Pulse — homepage system expansion. */
.connected-system { overflow: hidden; }
.connected-system::before {
  content: "";
  position: absolute;
  inset: 18% -8% auto;
  height: 380px;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(37,142,255,.055), transparent 66%);
}
.system-card { isolation: isolate; }
.system-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  pointer-events: none;
  background: linear-gradient(90deg,transparent,rgba(53,167,255,.46),transparent) top left / 0 1px no-repeat;
  transition: background-size .42s ease;
}
.system-card:hover::after { background-size: 100% 1px; }

.record-convergence {
  border-top: 1px solid rgba(31,63,84,.5);
  border-bottom: 1px solid rgba(31,63,84,.5);
  background: linear-gradient(180deg,rgba(5,10,16,.76),rgba(7,18,28,.88));
  overflow: hidden;
}
.convergence-heading { max-width: 980px; margin-bottom: 46px; }
.convergence-heading h2 { margin: 12px 0 20px; font-size: clamp(2.35rem,4.6vw,4.85rem); line-height: .97; letter-spacing: -.055em; }
.convergence-heading p { max-width: 760px; color: var(--dim); font-size: 1rem; line-height: 1.72; }
.convergence-stage {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 72px;
  align-items: stretch;
  min-height: 460px;
}
.fragment-cloud { position: relative; min-height: 420px; border: 1px solid rgba(28,66,108,.55); border-radius: 18px; background: rgba(3,21,47,.34); overflow: hidden; }
.fragment-cloud::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(39,87,131,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(39,87,131,.07) 1px,transparent 1px); background-size: 28px 28px; }
.fragment-label { position: absolute; left: 22px; top: 18px; color: #4E718C; font: 750 8px var(--mono); letter-spacing: .12em; }
.fragment-chip { position: absolute; min-width: 112px; padding: 10px 12px; border: 1px solid #1C426C; border-radius: 9px; background: rgba(6,31,70,.88); color: #9BB1C9; font: 700 8px var(--mono); letter-spacing: .07em; box-shadow: 0 18px 35px -28px #000; animation: fragment-drift 8s ease-in-out infinite alternate; }
.fragment-chip b { display: block; margin-bottom: 3px; color: #EAF4FF; font-size: 9px; }
.fragment-chip.chip-a { left: 9%; top: 24%; }
.fragment-chip.chip-b { right: 8%; top: 16%; animation-delay: -2s; }
.fragment-chip.chip-c { left: 19%; top: 52%; animation-delay: -4s; }
.fragment-chip.chip-d { right: 10%; top: 61%; animation-delay: -1s; }

.fragment-chip.chip-e { left: 7%; bottom: 8%; animation-delay: -5s; }
.fragment-chip.chip-f { right: 6%; bottom: 9%; animation-delay: -3s; }
.convergence-flow { position: absolute; inset: 8% 33% 8% 31%; width: 36%; height: 84%; pointer-events: none; overflow: visible; }
.convergence-flow path { fill: none; stroke: rgba(53,167,255,.28); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 4 9; animation: blueprint-signal-flow 7s linear infinite; }
.convergence-flow circle { fill: #258EFF; opacity: .66; }
.record-core { position: relative; z-index: 2; border: 1px solid #275783; border-radius: 20px; padding: 22px; background: linear-gradient(145deg,rgba(10,41,79,.88),rgba(3,21,47,.96)); box-shadow: 0 38px 90px -56px rgba(37,142,255,.55), inset 0 1px rgba(255,255,255,.035); }
.record-core::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(39,87,131,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(39,87,131,.09) 1px,transparent 1px); background-size: 28px 28px; mask-image: linear-gradient(135deg,#000,transparent 76%); border-radius: inherit; }
.record-core-head { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 4px 3px 18px; border-bottom: 1px solid #1C426C; }
.record-core-head span { color: #35A7FF; font: 800 9px var(--mono); letter-spacing: .12em; }
.record-core-head b { color: var(--green); font: 750 8px var(--mono); letter-spacing: .08em; }
.record-row { position: relative; z-index: 1; display: grid; grid-template-columns: 110px 1fr auto; gap: 18px; align-items: center; min-height: 76px; border-bottom: 1px solid rgba(28,66,108,.72); }
.record-row:last-child { border-bottom: 0; }
.record-row small { color: #577994; font: 750 8px var(--mono); letter-spacing: .09em; }
.record-row strong { color: #EAF4FF; font-size: .94rem; }
.record-row em { color: #6F89A5; font: 650 8px var(--mono); font-style: normal; text-align: right; }

@keyframes blueprint-signal-flow { to { stroke-dashoffset: -56; } }
@keyframes fragment-drift {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(5px,-7px,0); }
}

@media (max-width: 980px) {
  .convergence-stage { grid-template-columns: 1fr; gap: 18px; }
  .convergence-flow { display: none; }
  .fragment-cloud { min-height: 330px; }
}

@media (max-width: 640px) {
  .convergence-heading h2 { font-size: clamp(2.15rem,11vw,3.25rem); }
  .fragment-cloud { min-height: 300px; }
  .fragment-chip { min-width: 96px; padding: 8px 9px; font-size: 7px; }
  .record-core { padding: 16px; }
  .record-row { grid-template-columns: 82px 1fr; gap: 10px; min-height: 70px; }
  .record-row em { grid-column: 2; text-align: left; margin-top: -8px; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .convergence-flow path, .fragment-chip { animation: none !important; }
}

.convergence-flow .convergence-datum-ticks,
.product-reality-wires .product-wire-ticks {
  stroke: rgba(124,200,255,.34);
  stroke-dasharray: none;
  animation: none;
}