/* Home / Your stack: "Your sales data is everywhere. Your intelligence shouldn't be."
   Scroll-driven: FRAGMENTED -> CONNECTED -> INTELLIGENT. Positions/opacities are written by assets/js/home-connected.js
   (this file only holds the static look). Prefix: cn- */
.cn { position: relative; }
.cn-track { position: relative; height: 200vh; }  /* one screen of scroll drives the whole sequence */
.cn-sticky { position: sticky; top: 64px; height: calc(100vh - 64px); height: calc(100svh - 64px); min-height: 560px; display: flex; align-items: center; }
.cn-inner { width: 100%; height: 100%; max-height: 780px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); gap: 14px; align-items: center; }
@media (min-width: 1024px) { .cn-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: minmax(0, 1fr); gap: 48px; } .cn-text { order: 2; } .cn-box { order: 1; } }
.cn-text .hm-h2 { font-size: clamp(26px, 3.6vw, 44px); }
.cn-text .hm-h2 span { display: block; }
.cn-text .hm-h2 .cn-h2b { background: linear-gradient(135deg, var(--color-p-text-secondary), var(--color-p-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 767px) { .cn-text .hm-h2 { font-size: 23px; margin-bottom: 10px; } .cn-text .hm-lead { font-size: 14px; line-height: 1.5; } .cn-text .hm-eyebrow { margin-bottom: 8px; } .cn-text .hm-link { margin-top: 8px; font-size: 13px; } }

/* progress steps: Fragmented -> Connected -> Intelligent */
.cn-steps { margin-top: 22px; max-width: 420px; }
.cn-steps-row { display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-p-muted); }
.cn-steps-row span { transition: color .4s ease; }
.cn-steps-row span.on { color: var(--color-p-teal); }
.cn-steps-bar { height: 2px; margin-top: 10px; border-radius: 2px; background: var(--color-p-border-line); overflow: hidden; }
.cn-steps-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--color-p-accent), var(--color-p-teal)); }
@media (max-width: 767px) { .cn-steps { margin-top: 8px; } .cn-steps-row { font-size: 9.5px; letter-spacing: .05em; } }

/* the constellation */
.cn-box { --amp: 1; position: relative; width: 100%; height: 100%; min-height: 380px; max-height: 700px; }
.cn-box::before { content: ""; position: absolute; left: 50%; top: var(--cy, 42%); width: 62%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(20,184,166,0.07), rgba(232,108,93,0.03) 45%, transparent 70%); pointer-events: none; }
.cn-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cn-lines line { stroke-width: 1.2; stroke-linecap: round; opacity: 0; }
.cn-node { position: absolute; left: 0; top: 0; z-index: 2; will-change: transform, opacity; }
.cn-in { position: absolute; left: 0; top: 0; --ax: 5px; --ay: -4px; transform: translate(-50%, -50%); animation: cn-float 7s ease-in-out infinite; }
.cn-node:nth-of-type(3n) .cn-in { --ax: -4px; --ay: 5px; animation-duration: 8.5s; animation-delay: -2s; }
.cn-node:nth-of-type(3n+1) .cn-in { --ax: 3px; --ay: 5px; animation-duration: 6.2s; animation-delay: -4s; }
.cn-node:nth-of-type(4n) .cn-in { --ax: -5px; --ay: -3px; animation-duration: 9.4s; animation-delay: -1s; }
@keyframes cn-float {
    0%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
    50% { transform: translate(-50%, -50%) translate(calc(var(--ax) * var(--amp, 1)), calc(var(--ay) * var(--amp, 1))); }
}
.cn-logo { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 13px; background: var(--color-p-bg-secondary); border: 1px solid var(--color-p-border); box-shadow: 0 10px 30px -14px rgba(0,0,0,0.5); }
.cn-logo img, .cn-logo svg { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }
.cn-chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; color: var(--color-p-text); background: var(--color-p-bg-secondary); border: 1px solid var(--cn-c, var(--color-p-border)); opacity: 0; }
.cn-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--cn-c); box-shadow: 0 0 10px var(--cn-c); }
.cn-node[data-g="conv"] { --cn-c: #14B8A6; } .cn-node[data-g="ctx"] { --cn-c: #E86C5D; } .cn-node[data-g="act"] { --cn-c: #EAB308; } .cn-node[data-g="ai"] { --cn-c: #22C55E; }

.cn-center { position: absolute; left: 50%; top: var(--cy, 42%); z-index: 5; transform: translate(-50%, -50%); }
.cn-core { position: relative; display: flex; align-items: center; justify-content: center; padding: 22px 26px; border-radius: 22px; background: var(--color-p-bg-secondary); border: 1px solid rgba(232,108,93,0.25); box-shadow: 0 0 0 1px rgba(232,108,93,0.06), 0 0 calc(60px * var(--glow, 0)) calc(4px * var(--glow, 0)) rgba(20,184,166,0.5); will-change: transform; }
.cn-core::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(232,108,93,0.06); }
.cn-core img { position: relative; height: 36px; width: auto; }  /* same logo as the NavBar */
.cn-after { position: absolute; left: 50%; top: calc(100% + 16px); width: 320px; max-width: 86vw; transform: translateX(-50%); text-align: center; pointer-events: none; }
.cn-names { display: grid; }
.cn-names > span { grid-area: 1 / 1; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.cn-name1 { display: none; }  /* the logo already says Performy */
.cn-name2 { color: var(--color-p-teal); opacity: 0; }
.cn-rows { margin: 14px auto 0; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.cn-row { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--color-p-text); opacity: 0; }
.cn-row i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cn-pill { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 16px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--color-p-text); background: rgba(20,184,166,0.1); border: 1px solid rgba(20,184,166,0.45); opacity: 0; }
.cn-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-p-success); }
.cn-cap { margin: 10px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--color-p-muted); opacity: 0; }

@media (max-width: 767px) {
    .cn-logo { width: 34px; height: 34px; border-radius: 10px; } .cn-logo img, .cn-logo svg { width: 20px; height: 20px; }
    .cn-chip { font-size: 9.5px; padding: 4px 9px; gap: 5px; }
    .cn-core { padding: 14px 18px; border-radius: 18px; } .cn-core img { height: 26px; width: auto; }
    .cn-after { top: calc(100% + 10px); } .cn-rows { margin-top: 8px; gap: 5px; } .cn-row { font-size: 13px; } .cn-pill { margin-top: 10px; padding: 6px 14px; } .cn-cap { margin-top: 6px; }
    .cn-box { min-height: 440px; }
}
/* mobile: the copy scrolls away normally and only the steps bar + the constellation stay pinned, so the pinned part
   always fits the screen (before, copy + box were pinned together and overflowed on phones <= 700px tall) */
@media (max-width: 767px) {
    .cn-track { height: auto; display: flex; flex-direction: column; padding: 0 24px; }
    .cn-track::after { content: ""; display: block; flex: none; height: 110svh; }
    .cn-sticky, .cn-inner, .cn-text { display: contents; }
    .cn-text .hm-link { align-self: flex-start; }
    .cn-steps { position: sticky; top: 64px; z-index: 6; box-sizing: border-box; height: 40px; margin: 0; padding-top: 12px; max-width: none; background: linear-gradient(var(--color-p-card), var(--color-p-card)), var(--color-p-bg, #FAFAF7); }
    .cn-box { position: sticky; top: 104px; flex: none; height: calc(100svh - 116px); max-height: 700px; }
    .cn-static .cn-track::after { display: none; }
    .cn-static .cn-steps, .cn-static .cn-box { position: relative; top: auto; }
    .cn-static .cn-steps { margin-top: 12px; }
}
/* reduced motion / no scroll-driving: static final state, no pinned track */
.cn-static .cn-track { height: auto; }
.cn-static .cn-sticky { position: relative; top: 0; height: auto; padding: 56px 0; }
.cn-static .cn-inner { max-height: none; }
.cn-static .cn-box { height: 640px; }
@media (max-width: 767px) { .cn-static .cn-box { height: 560px; } }
@media (prefers-reduced-motion: reduce) { .cn-in { animation: none; } }