/* Velocity "Platform modules" centerpiece — dark band: morphing-artifact chain.
   Scoped under .vmod / .vmod-sec so it can't leak into other sections. */

.vmod-sec { background: #1E1F23; }

.vmod { position: relative; margin-top: 36px; }

/* ── Focal stage ── */
.vmod-stage {
  position: relative; height: 286px; overflow: hidden;
  background: #26272C; border: 1px solid #303138; border-radius: 18px;
}
.vmod-panel {
  position: absolute; inset: 0; display: grid; grid-template-columns: 1fr auto;
  align-items: center; gap: 56px; padding: 0 clamp(40px, 5vw, 72px);
  opacity: 0; transform: translateY(10px);
  transition: opacity .45s ease, transform .45s ease; pointer-events: none;
}
.vmod-panel.on { opacity: 1; transform: none; }
.vmod-meta { max-width: 460px; }
.vmod-verb { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #818cf8; margin-bottom: 10px; }
.vmod-name { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -.01em; color: #ECEEF2; margin-bottom: 12px; }
.vmod-desc { font-size: 16px; line-height: 1.55; color: #A3A9B5; }

/* ── Output artifact card (right side) ── */
.vmod-art { width: clamp(320px, 34vw, 440px); height: 224px; display: flex; align-items: center; justify-content: center; }
.vart {
  width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #26272d 0%, #1b1c21 100%);
  border: 1px solid #34353d; border-radius: 14px;
  box-shadow: 0 22px 48px -26px rgba(0,0,0,.75), inset 0 1px 0 rgba(255,255,255,.03);
}
.vart-head {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 11px 14px; border-bottom: 1px solid #2b2c33;
  font-family: var(--font-mono); font-size: 11px; color: #797f8d; letter-spacing: .02em;
}
.vart-dots { width: 8px; height: 8px; border-radius: 50%; background: #3c3d46; box-shadow: 13px 0 0 #3c3d46, 26px 0 0 #3c3d46; margin-right: 24px; flex: none; }
.vart-file { color: #9aa0ac; }
.vart-badge { margin-left: auto; font-size: 10px; color: #a5b4fc; background: rgba(129,140,248,.13); padding: 2px 8px; border-radius: 999px; letter-spacing: .03em; }
.vart-badge--ok { color: #34d399; background: rgba(52,211,153,.13); }
.vart-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 11px; padding: 16px; }
.vart-row { will-change: transform, opacity; }

/* M.01 — user story */
.vart-story { font-size: 14.5px; line-height: 1.5; color: #cfd3db; margin: 0; }
.vart-story b { color: #a5b4fc; font-weight: 600; }
.vart-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vart-checks li { display: flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12.5px; color: #9aa0ac; }
.vart-tick { width: 15px; height: 15px; flex: none; }
.vart-tick path { fill: none; stroke: #34d399; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* M.02 — test cases */
.vart-tc { display: flex; align-items: center; gap: 11px; font-size: 13px; }
.vart-id { font-family: var(--font-mono); font-size: 12px; color: #818cf8; flex: none; }
.vart-tc-name { color: #cfd3db; flex: 1; }
.vart-chip { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 5px; letter-spacing: .03em; flex: none; }
.vart-chip--pos { background: rgba(52,211,153,.14); color: #34d399; }
.vart-chip--neg { background: rgba(248,113,113,.14); color: #f87171; }
.vart-chip--edge { background: rgba(129,140,248,.14); color: #a5b4fc; }

/* M.03 — code */
.vart--code .vart-body { padding: 0; justify-content: flex-start; }
.vart-code { margin: 0; padding: 15px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.72; color: #c9cdd6; overflow: hidden; }
.vart-code .vln { display: block; white-space: pre; }
.vart-code .kw { color: #c4b5fd; }
.vart-code .str { color: #86efac; }

/* M.04 — API */
.vart-req { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; }
.vart-method { background: #6366f1; color: #fff; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 5px; letter-spacing: .03em; }
.vart-url { color: #cfd3db; }
.vart-json { font-family: var(--font-mono); font-size: 12.5px; color: #9aa0ac; background: #16171b; border: 1px solid #2b2c33; border-radius: 8px; padding: 9px 12px; }
.vart-res { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 13px; }
.vart-status { background: rgba(52,211,153,.16); color: #34d399; font-weight: 600; padding: 3px 8px; border-radius: 5px; }
.vart-ok { color: #34d399; }
.vart-time { margin-left: auto; color: #797f8d; }

/* M.05 — run results */
.vart-bars { display: flex; align-items: flex-end; gap: 9px; height: 78px; }
.vart-bars i { flex: 1; height: var(--h); background: linear-gradient(180deg, #818cf8, #6366f1); border-radius: 4px 4px 0 0; transform-origin: bottom; }
.vart-runstats { display: flex; gap: 16px; font-family: var(--font-mono); font-size: 12.5px; color: #9aa0ac; }
.vart-runstats b { color: #ECEEF2; font-weight: 600; }
.vart-rate { margin-left: auto; }
.vart-rate b { color: #34d399; }

/* M.06 — agent chat */
.vart--chat .vart-body { gap: 9px; }
.vart-msg { max-width: 88%; font-size: 13px; line-height: 1.45; padding: 9px 13px; border-radius: 13px; }
.vart-msg--user { align-self: flex-end; background: #6366f1; color: #fff; border-bottom-right-radius: 4px; }
.vart-msg--bot { align-self: flex-start; background: #24252b; border: 1px solid #34353d; color: #cfd3db; border-bottom-left-radius: 4px; }
.vart-msg--bot b { color: #a5b4fc; }

/* M.07 — learning summary */
.vart-learn { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: #cfd3db; }
.vart-learn b { color: #ECEEF2; font-weight: 600; }
.vart-loop { color: #818cf8; font-size: 17px; line-height: 1; }
.vart-up { color: #34d399; font-weight: 600; }
.vart-feed { color: #9aa0ac; font-size: 12.5px; }

/* ── Rail ── */
.vmod-rail { position: relative; margin-top: 30px; height: 120px; }
.vmod-line { position: absolute; top: 27px; left: 64px; right: 64px; height: 2px; background: #43454E; transform-origin: left; transform: scaleX(1); }
.vmod-fill { position: absolute; top: 27px; left: 64px; height: 2px; width: 0; background: #6366F1; box-shadow: 0 0 10px rgba(99,102,241,.7); z-index: 2; }
.vmod-tok { position: absolute; top: 23px; left: 64px; width: 10px; height: 10px; border-radius: 50%; background: #a5b4fc; box-shadow: 0 0 14px #818cf8; opacity: 0; z-index: 3; }
.vmod-track { position: absolute; inset: 0; display: flex; justify-content: space-between; }
.vmod-node {
  width: 128px; display: flex; flex-direction: column; align-items: center;
  cursor: pointer; background: none; border: none; padding: 0; color: inherit; font: inherit;
}
.vmod-dot {
  width: 54px; height: 54px; border-radius: 15px; background: #26272C; border: 1px solid #303138;
  display: flex; align-items: center; justify-content: center; color: #6C7280;
  transition: all .35s cubic-bezier(.2,.7,.2,1);
}
.vmod-dot svg { width: 24px; height: 24px; }
.vmod-node:hover .vmod-dot, .vmod-node.is-active .vmod-dot {
  color: #fff; border-color: #6366F1; background: #6366F1;
  box-shadow: 0 0 0 6px rgba(99,102,241,.16), 0 10px 26px rgba(99,102,241,.32);
  transform: translateY(-4px) scale(1.05);
}
.vmod-idx { font-family: var(--font-mono); font-size: 10px; color: #6C7280; margin-top: 12px; letter-spacing: .06em; }
.vmod-nm { font-size: 12.5px; font-weight: 500; color: #A3A9B5; margin-top: 4px; text-align: center; line-height: 1.2; transition: color .3s ease; }
.vmod-node:hover .vmod-nm, .vmod-node.is-active .vmod-nm { color: #ECEEF2; }
.vmod-node:focus-visible .vmod-dot { outline: 2px solid #818cf8; outline-offset: 3px; }

.vmod-loop { position: absolute; left: 64px; right: 64px; top: 54px; height: 54px; pointer-events: none; }
.vmod-loop svg { width: 100%; height: 100%; overflow: visible; }
.vmod-loop path { fill: none; stroke: #6366F1; stroke-width: 1.5; stroke-dasharray: 4 6; opacity: .5; }
.vmod-cap { text-align: center; font-family: var(--font-mono); font-size: 11px; color: #6C7280; letter-spacing: .04em; margin-top: 18px; }
.vmod-cap b { color: #818cf8; font-weight: 500; }

/* ── Stat strip ── */
.vmod-stats { display: flex; gap: 18px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.vmod-stat { display: flex; flex-direction: column; align-items: center; min-width: 120px; }
.vmod-stat-n { font-size: 34px; font-weight: 500; color: #ECEEF2; letter-spacing: -.02em; }
.vmod-stat-l { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #6C7280; margin-top: 4px; }

/* Screen-reader-only module list (kept for SEO + AT) */
.vmod-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Benefits: force an even 3-up so no lopsided row ── */
.pf-caps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ── Mobile: stage on top, rail becomes a vertical stepper ── */
@media (max-width: 768px) {
  .pf-caps-3 { grid-template-columns: 1fr; }
  .vmod-stage { height: auto; min-height: 260px; }
  .vmod-panel { position: relative; grid-template-columns: 1fr; gap: 20px; padding: 24px; text-align: left; justify-items: start; }
  .vmod-panel:not(.on) { display: none; }
  .vmod-panel.on { display: grid; }
  .vmod-meta, .vmod-art { width: 100%; max-width: none; }
  .vmod-art { height: auto; justify-content: flex-start; }
  .vart { height: auto; min-height: 188px; }

  .vmod-rail { height: auto; margin-top: 28px; }
  .vmod-line, .vmod-tok, .vmod-loop { display: none; }
  .vmod-track { position: static; flex-direction: column; gap: 8px; }
  .vmod-node { flex-direction: row; width: 100%; gap: 12px; justify-content: flex-start; padding: 8px 10px; border-radius: 12px; }
  .vmod-node.is-active { background: #26272C; }
  .vmod-dot { width: 40px; height: 40px; }
  .vmod-dot svg { width: 19px; height: 19px; }
  .vmod-idx { display: none; }
  .vmod-nm { margin-top: 0; font-size: 14px; }
  .vmod-stats { gap: 10px; }
  .vmod-stat { min-width: 90px; }
}

/* ── One-shot intro (added by JS via .vmod-in) ── */
@media (prefers-reduced-motion: no-preference) {
  .vmod .vmod-line { transform: scaleX(0); }
  .vmod.vmod-in .vmod-line { animation: vmod-draw 1s .15s cubic-bezier(.6,0,.2,1) forwards; }
  @keyframes vmod-draw { to { transform: scaleX(1); } }

  .vmod .vmod-node { opacity: 0; transform: translateY(8px); }
  .vmod.vmod-in .vmod-node { animation: vmod-pop .5s forwards; }
  .vmod.vmod-in .vmod-node:nth-child(1){animation-delay:.2s}
  .vmod.vmod-in .vmod-node:nth-child(2){animation-delay:.4s}
  .vmod.vmod-in .vmod-node:nth-child(3){animation-delay:.6s}
  .vmod.vmod-in .vmod-node:nth-child(4){animation-delay:.8s}
  .vmod.vmod-in .vmod-node:nth-child(5){animation-delay:1s}
  .vmod.vmod-in .vmod-node:nth-child(6){animation-delay:1.2s}
  .vmod.vmod-in .vmod-node:nth-child(7){animation-delay:1.4s}
  @keyframes vmod-pop { to { opacity: 1; transform: none; } }

  .vmod .vmod-loop path { opacity: 0; }
  .vmod.vmod-in .vmod-loop path { animation: vmod-fade .6s 2.3s forwards; }
  @keyframes vmod-fade { to { opacity: .5; } }

  .vmod .vmod-cap { opacity: 0; }
  .vmod.vmod-in .vmod-cap { animation: vmod-fade2 .6s 2.5s forwards; }
  @keyframes vmod-fade2 { to { opacity: 1; } }
}