/* ProSoftIP — home page */

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1fr; row-gap: 20px; padding-top: 40px; padding-bottom: 24px; }
.hero-head, .hero-after { position: relative; z-index: 2; }
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); grid-template-areas: "head art" "after ctl"; align-items: center; column-gap: 32px; row-gap: 32px; min-height: calc(100vh - var(--nav-h) - 40px); padding-top: 24px; padding-bottom: 24px; }
  .hero-head { grid-area: head; align-self: end; }
  .hero-after { grid-area: after; align-self: start; }
  .hero-art { grid-area: art; align-self: end; }
  .hero-controls { grid-area: ctl; align-self: start; }
}
.hl { font-weight: 800; font-size: clamp(42px, 7.6vw, 84px); line-height: .98; letter-spacing: -.03em; color: var(--paper); }
@media (min-width: 1024px) { .hl { font-size: clamp(56px, 5.4vw, 84px); } }
.hl-line { display: block; }
html.js-motion .ch { visibility: hidden; }
.hl-zero { transition: color var(--d-micro) var(--ease-out-quart); }
.hl-zero.is-violet { color: var(--violet-lt); }
.hero-art { position: relative; }
.hero-art img { width: 100%; height: auto; }
@media (min-width: 1024px) {
  /* the sculpture gets more room than its column: it may run to the viewport edge, never under the copy */
  .hero-art { margin-right: calc(-1 * (100vw - var(--wrap)) / 2 - var(--gutter)); margin-left: -8px; }
  .hero-art img { width: 100%; max-width: none; }
}
@media (max-width: 1023px) { .hero-art { margin: 4px calc(-1 * var(--gutter)) 0; } .hero-art img { aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 48%; } }
.hero-art-cap { position: absolute; left: 0; bottom: 0; font-family: var(--font-mono); font-size: 11px; color: var(--slate); letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 1023px) { .hero-art-cap { left: var(--gutter); } }

/* ---------- request band ---------- */
.readouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.readout { border-top: 1px solid var(--rule); padding-top: 12px; }
.readout .val { font-family: var(--font-mono); font-size: 20px; color: var(--signal); margin-top: 4px; }

/* ---------- pipeline graph ---------- */
.graph { position: relative; }
@media (min-width: 1200px) { .graph { aspect-ratio: 820 / 640; } }
.graph-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* axons: a soft green luminous sheath under a crisp line; excited on hover/focus/tap */
.axon { fill: none; stroke: rgba(0,255,102,.34); stroke-width: 1.4; stroke-linecap: round; transition: stroke var(--d-fast) var(--ease-out-quart), opacity var(--d-fast) var(--ease-out-quart); }
.axon-glow { fill: none; stroke: rgba(0,255,102,.16); stroke-width: 7; stroke-linecap: round; transition: stroke var(--d-fast) var(--ease-out-quart), opacity var(--d-fast) var(--ease-out-quart); }
.axon.is-live { stroke: rgba(224,255,236,.95); }
.axon-glow.is-live { stroke: rgba(0,255,102,.5); }
.axon.is-dim { opacity: .45; } .axon-glow.is-dim { opacity: .35; }
.imp-trail { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; } /* stroke is the per-edge head->tail gradient set on the element */
.imp-halo2 { fill: rgba(0,255,102,.45); }
.imp-halo { fill: rgba(0,255,102,.55); }
.imp-core { fill: #DFFFE9; }
.hub-bloom { opacity: 0; } /* fill is the #hub-bloom-grad radial gradient set on the element */
/* static states: without JS the axons are plain; under reduced motion the selected axon reads green + bloom */
html:not(.js-motion) .axon, html:not(.js-motion) .axon-glow { opacity: 1; }
html.rm .axon-glow.is-live { stroke: rgba(0,255,102,.6); }
html.rm .impulse, html.rm .imp-trail, html.rm .hub-bloom { opacity: 0 !important; }
.hub { position: absolute; width: 112px; height: 112px; display: grid; place-items: center; transform: translate(-50%, -50%); }
.hub-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub-ring path { fill: var(--ink-1); stroke: var(--slate); stroke-width: 1; stroke-opacity: .4; animation: breathe 4s var(--ease-in-out) infinite; }
@keyframes breathe { 0%, 100% { stroke-opacity: .4; } 50% { stroke-opacity: .7; } }
.hub-mark { position: relative; width: 40px; height: 40px; }
.hub-label { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--slate); line-height: 1.4; }
.hub-latency { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--signal); font-family: var(--font-mono); font-size: 11px; opacity: 0; transition: opacity var(--d-fast) var(--ease-out-quart); }
.hub-latency.is-on { opacity: 1; }
.node { position: absolute; width: 240px; min-height: 88px; text-align: left; background: var(--ink-1); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-content: start;
  transition: border-color var(--d-fast) var(--ease-out-quart), background-color var(--d-fast) var(--ease-out-quart); }
.node .node-idx { font-family: var(--font-mono); font-size: 11px; color: var(--slate); grid-column: 1; }
.node .node-dot { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 4px; }
.node .node-name { font-weight: 600; font-size: 17px; color: var(--paper); grid-column: 1 / -1; line-height: 1.15; letter-spacing: -.01em; transition: text-shadow var(--d-fast) var(--ease-out-quart); }
.node .node-sub { font-size: 13px; color: var(--slate); grid-column: 1 / -1; line-height: 1.35; margin-top: 2px; }
.node.is-active, .node:hover { border-color: rgba(0,255,102,.6); background: var(--ink-2); }
.node.is-active .node-name { text-shadow: 0 0 16px rgba(0,255,102,.2); }
.node-preview { display: none; }
@media (max-width: 1199px) {
  .graph { display: flex; flex-direction: column; align-items: stretch; gap: 16px; padding-top: 8px; }
  .hub { position: relative; transform: none; margin: 0 auto 36px; left: auto !important; top: auto !important; }
  .node { position: relative; width: calc(100% - 40px); left: auto !important; top: auto !important; margin-left: 40px; }
  .node-preview { display: block; grid-column: 1 / -1; margin-top: 12px; font-size: 12px; }
  .node-preview[hidden] { display: none; }
  .sidecar-col { display: none; }
}
.sidecar { position: sticky; top: calc(var(--nav-h) + 24px); }
.sidecar .term-body { min-height: 16em; }

/* ---------- speed band ---------- */
.band { background: var(--ink-1); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); position: relative; }
.band::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px); background-position-y: var(--scan-y, 0px); mix-blend-mode: screen; }
.band > * { position: relative; z-index: 1; }
.big-number { font-weight: 800; font-size: clamp(96px, 11vw, 160px); line-height: .85; letter-spacing: -.045em; color: var(--paper); }
.big-number .unit { color: var(--signal); }
.steps { position: relative; border-left: 1px solid var(--rule-strong); }
.step { position: relative; padding: 0 0 28px 28px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: -4.5px; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); }
.step.is-on::before { background: var(--signal); box-shadow: 0 0 0 4px rgba(0,255,102,.12); }
.step .k { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.step .t { font-weight: 600; font-size: 18px; color: var(--paper); margin-top: 4px; }
.step .d { font-size: 15px; color: var(--fog); margin-top: 4px; max-width: 48ch; }
.rule-signal { height: 2px; width: 64px; background: var(--signal); }

/* ---------- hero signal run (SVG overlay registered to the illustration) ---------- */
.hero-art { position: relative; }
.sig { position: absolute; left: 0; top: 0; width: 100%; height: auto; aspect-ratio: 1536 / 1024; pointer-events: none; overflow: visible; }
/* the overlay is positioned inside .art-clip */
.art-clip { position: relative; }
/* phones crop the image to 16:9 (object-position 50% 48%): size the overlay to the uncropped box so traces stay registered */
@media (max-width: 1023px) { .hero-art .art-clip { position: relative; overflow: hidden; } .sig { height: 118.52%; top: -8.89%; aspect-ratio: auto; } }
.sig-base { fill: none; stroke: rgba(193,138,255,.16); stroke-width: 2; }
.sig-halo { fill: none; stroke: rgba(0,255,102,.28); stroke-width: 12; stroke-linecap: round; opacity: 0; }
.sig-pkt { fill: none; stroke: var(--signal); stroke-width: 4; stroke-linecap: round; opacity: 0; }
.sig-pkt-out { stroke-width: 3.5; }
.sig-hl-shape { fill: none; stroke: var(--violet-lt); stroke-width: 2; opacity: 0; }
.core-ring { fill: none; stroke: var(--signal); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.core-ring-2 { stroke: var(--violet-lt); stroke-width: 1.5; }
.core-glow { fill: rgba(193,138,255,.0); }
.sig-block { fill: rgba(0,255,102,0); stroke: rgba(0,255,102,0); stroke-width: 2; }
/* static end state without JS or with reduced motion: the run is "done" */
html:not(.js-motion) .sig-base, html.rm .sig-base { stroke: rgba(193,138,255,.35); }
html:not(.js-motion) .sig-block, html.rm .sig-block { fill: rgba(0,255,102,.12); stroke: rgba(0,255,102,.45); }
html.rm .sig-pkt[data-in].is-lead, html.rm .sig-hl-shape.is-lead { opacity: .9; }
html.rm .sig-pkt[data-in].is-lead { stroke-dasharray: none; }
html:not(.js-motion) .hero-controls, html:not(.js-motion) #graph-ambient, html.rm #graph-ambient { display: none; }

.hero-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; position: relative; z-index: 3; }
@media (max-width: 1023px) { .hero-controls { margin-top: 8px; } }
.hero-art-cap { position: static; flex: 1 1 auto; min-width: 12ch; }
.seg { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius); overflow: hidden; }
.seg-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); transition: color var(--d-micro) var(--ease-out-quart), background-color var(--d-micro) var(--ease-out-quart); }
.seg .seg-btn + .seg-btn { border-left: 1px solid var(--rule-strong); }
.seg-btn:hover { color: var(--paper); }
.seg-btn[aria-pressed="true"] { color: var(--paper); background: var(--ink-2); box-shadow: inset 0 -2px 0 var(--violet); }
.seg-replay { border: 1px solid var(--rule-strong); border-radius: var(--radius); }
.seg-replay svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.seg-replay:focus-visible, .seg-btn:focus-visible { outline-offset: -3px; }