/* Connect: the live connection visual and the hero around it. */
.cx-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: center; padding: 34px 40px; margin-bottom: 30px; border-radius: 20px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23D9DCE6'/%3E%3C/svg%3E"); box-shadow: var(--sh-card); overflow: hidden; }
.cx-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 0 1px rgb(15 18 30 / 0.04); }
.cx-copy { position: relative; z-index: 1; max-width: 520px; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 6px; border-radius: 999px; background: var(--surface); box-shadow: var(--sh-card); font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.live-pill .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgb(18 161 80 / 0.5); animation: pulse 2s infinite; margin-left: 6px; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(18 161 80 / 0.45); } 70% { box-shadow: 0 0 0 7px rgb(18 161 80 / 0); } 100% { box-shadow: 0 0 0 0 rgb(18 161 80 / 0); } }
.cx-copy h1 { margin: 18px 0 10px; font: 700 40px/1.04 var(--font-display); letter-spacing: -0.04em; }
.cx-copy p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 460px; }
.cx-addr { display: flex; align-items: center; gap: 10px; margin-top: 24px; height: 48px; padding: 0 6px 0 16px; border-radius: 14px; background: var(--ink); color: #fff; max-width: 440px; box-shadow: 0 10px 30px -10px rgb(11 13 18 / 0.5); }
.cx-addr .lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8d93a8; }
.cx-addr code { flex: 1; font: 500 14px var(--mono); color: #fff; }
.cx-addr .btn { background: #fff; color: var(--ink); height: 36px; border-radius: 10px; }
.cx-addr .btn:hover { background: #eceef4; }
.cx-meta { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 12.5px; color: var(--muted); }
.orbit { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1; margin: 0 auto; }
.orbit > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit .ring { fill: none; stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 5; }
.orbit line { stroke: var(--line-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.orbit line.on { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 4 6; animation: flow 1.1s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -20; } }
.orb-core { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; transform: translate(-50%, -50%); border-radius: 22px; background: var(--surface); box-shadow: 0 0 0 1px rgb(15 18 30 / 0.06), 0 14px 34px -8px rgb(61 68 229 / 0.35); display: grid; place-items: center; }
.orb-core img { width: 38px; }
.orb-tile { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.orb-tile .ai { box-shadow: 0 0 0 1px rgb(15 18 30 / 0.06), 0 8px 18px -6px rgb(15 18 30 / 0.25); }
.orb-tile:not(.on) .ai { opacity: 0.45; filter: grayscale(0.6); }
.orb-tile span { font-size: 11px; font-weight: 550; color: var(--muted); white-space: nowrap; }
.orb-tile.on span { color: var(--ink-2); }
.orb-tile .ok, .pair-vis .ok { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px var(--surface); }
.orb-tile .ok::after, .pair-vis .ok::after { content: ""; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.pair-vis { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; }
.pair-vis .link { width: 160px; height: 20px; }
.pair-vis .link line { stroke: var(--line-2); stroke-width: 2; stroke-dasharray: 4 6; stroke-linecap: round; }
.pair-vis.waiting .link line { stroke: var(--accent); animation: flow 0.9s linear infinite; }
.pair-vis.connected .link line { stroke: var(--green); stroke-dasharray: none; }
.pair-z { width: 52px; height: 52px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px rgb(15 18 30 / 0.06), 0 10px 24px -8px rgb(61 68 229 / 0.35); display: grid; place-items: center; }
.pair-z img { width: 26px; }
.pair-vis .ok { top: -6px; right: -6px; width: 20px; height: 20px; }
.pair-vis .ok::after { left: 7px; top: 4px; width: 5px; height: 9px; }
@media (max-width: 900px) { .cx-hero { grid-template-columns: 1fr; padding: 26px 22px; } .cx-hero .orbit { max-width: 280px; } }
.orb-tile span { background: var(--surface); padding: 1px 7px; border-radius: 6px; box-shadow: 0 0 0 1px rgb(15 18 30 / 0.04); }