/* ---- Solutions — VoIP communication platform ---- */

.vo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* core reveal clip-path clips small text */
html.motion [data-reveal].is-in:not([data-reveal="clip"]) { clip-path: none; }

.vo-head { padding-top: calc(var(--space-section) * .7); }
.vo-head .h2 { max-width: 22ch; }
.story__panel .h3 { margin-bottom: 14px; max-width: 18ch; }
.story__panel .body { font-size: clamp(.98rem, .94rem + .2vw, 1.1rem); }
.story__panel .eyebrow { color: var(--text-3); }
.story__panel .eyebrow::before { display: none; }

.vo-kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--pa);
  margin-bottom: 22px;
}
.vo-kicker::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(var(--pa-rgb), .15), 0 0 14px currentColor;
}

.pk { fill: #ffe6f2; filter: drop-shadow(0 0 4px rgba(var(--pa-rgb), 1)); }
.pk--back { fill: var(--pa-2); }
html:not(.motion) .cn__pk, html:not(.motion) .red__pks { display: none; }

/* shared dark panel look */
.arch__layer, .pair, .bx .ivr li, .flow span, .red__bar, .cn__core {
  border: 1px solid var(--line-strong);
}

/* ======================================================================
   1. HERO — live call network
   ====================================================================== */
.vo-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(16px, 4vw, 56px));
  padding-bottom: clamp(48px, 6vw, 96px);
}
.vo-hero__glow { right: -22%; top: -35%; }
.vo-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
.vo-hero__title { font-size: clamp(2.5rem, 1.45rem + 4vw, 5rem); }
.vo-hero__h { display: block; }
.vo-hero__lead { margin-top: 24px; }
.vo-hero__cta { margin-top: 30px; }
.vo-hero__chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.vo-hero__visual { position: relative; min-width: 0; }
.vo-hero__note {
  margin-top: 14px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

.cn {
  position: relative;
  width: min(100%, calc((100svh - 230px) * 1.2));
  margin-inline: auto;
  aspect-ratio: 6 / 5;
  container-type: inline-size;
  color: var(--text-2);
}
.cn__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cn__rings { stroke: rgba(255, 255, 255, .06); stroke-dasharray: 2 7; }
.cn__links path { fill: none; stroke: rgba(var(--pa-rgb), .32); stroke-width: 1.4; stroke-linecap: round; }
.cn__call {
  fill: none;
  stroke: var(--pa);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(var(--pa-rgb), .85));
}
.cn__pk { opacity: 0; }
html.motion .cn__call, html.motion .cn__pk, html.motion .cn__t { animation: cn-win 12s linear infinite; }
html.motion .cn__call--2, html.motion .cn__pk--2, html.motion .cn__t--2 { animation-delay: -8s; }
html.motion .cn__call--3, html.motion .cn__pk--3, html.motion .cn__t--3 { animation-delay: -4s; }
@keyframes cn-win {
  0% { opacity: 0; }
  3%, 29% { opacity: 1; }
  32%, 100% { opacity: 0; }
}
html:not(.motion) .cn__call--1, html:not(.motion) .cn__t--1 { opacity: 1; }

.cn__nodes { position: absolute; inset: 0; }
.hn {
  position: absolute;
  left: calc(var(--x) / 600 * 100%);
  top: calc(var(--y) / 500 * 100%);
  width: 0; height: 0;
}
.hn__in {
  --ic: clamp(30px, 7.6cqw, 46px);
  position: absolute;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transform: translate(-50%, calc(var(--ic) / -2));
}
.hn__ic {
  position: relative;
  width: var(--ic); height: var(--ic);
  display: grid; place-items: center;
  border-radius: 32%;
  color: var(--pa);
  background: linear-gradient(180deg, #1a1420, #0b0a12);
  border: 1px solid rgba(var(--pa-rgb), .35);
  box-shadow: 0 0 0 4px rgba(5, 7, 11, .92), 0 10px 26px -8px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.hn__ic svg { width: 50%; height: 50%; }
.hn__ic::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  border: 1.5px solid var(--pa);
  opacity: 0;
}
html.motion .hn__ic::after { animation: hn-ring 12s linear infinite; }
html.motion .hn--c2 .hn__ic::after { animation-delay: -8s; }
html.motion .hn--c3 .hn__ic::after { animation-delay: -4s; }
@keyframes hn-ring {
  0% { opacity: 0; transform: scale(1); }
  3% { opacity: 1; transform: scale(1); }
  10% { opacity: 0; transform: scale(1.7); }
  11% { opacity: 1; transform: scale(1); }
  29% { opacity: 1; transform: scale(1); }
  32%, 100% { opacity: 0; transform: scale(1); }
}
.hn__lb {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2cqw, 12px);
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
  letter-spacing: .02em;
}

.cn__core {
  position: absolute;
  left: 50%; top: 51%;
  transform: translate(-50%, -50%);
  width: clamp(130px, 32cqw, 210px);
  padding: clamp(10px, 2.4cqw, 16px) clamp(10px, 2.4cqw, 16px) clamp(10px, 2.2cqw, 14px);
  border-radius: clamp(12px, 3cqw, 18px);
  border-color: rgba(var(--pa-rgb), .55);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(var(--pa-rgb), .22), transparent 60%),
    linear-gradient(180deg, #17101a, #0a090f);
  box-shadow: 0 0 0 6px rgba(5, 7, 11, .9), 0 0 60px -10px rgba(var(--pa-rgb), .7);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.cn__core-t { font-family: var(--font-mono); font-size: clamp(10px, 2cqw, 12px); letter-spacing: .12em; text-transform: uppercase; color: var(--pa); line-height: 1.2; }
.cn__core-s { font-size: clamp(10.5px, 2.2cqw, 13px); color: var(--text); font-weight: 550; line-height: 1.25; }
.cn__srv { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.cn__srv b { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-weight: 500; }
.cn__pair { display: flex; gap: 3px; padding: 3px; border-radius: 5px; border: 1px solid var(--line-strong); }
.cn__pair i { width: clamp(12px, 3cqw, 18px); height: 6px; border-radius: 2px; background: var(--ok); box-shadow: 0 0 6px rgba(62, 230, 154, .8); }
html.motion .cn__pair i { animation: led 2.4s steps(2, jump-none) infinite; }
html.motion .cn__pair i:nth-child(2) { animation-delay: -.7s; }
html.motion .cn__pair + b + .cn__pair i { animation-delay: -1.3s; }
html.motion .cn__pair + b + .cn__pair i:nth-child(2) { animation-delay: -1.9s; }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

.cn__toast { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: grid; justify-items: center; }
.cn__t {
  grid-area: 1 / 1;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--pa-rgb), .45);
  background: rgba(10, 8, 14, .92);
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.9cqw, 11.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
}
.cn__t .dot { color: var(--ok); }

/* ======================================================================
   2. PROVEN IN RAILWAYS
   ====================================================================== */
.vo-case__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.vo-case__head .h2 { max-width: 14ch; }
.vo-case__head .lead { margin-top: 20px; }
.ledger { border-top: 1px solid var(--line); }
.ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.ledger dt { font-weight: 600; font-size: var(--fs-h4); letter-spacing: -.02em; line-height: 1.3; display: flex; align-items: baseline; gap: 12px; }
.ledger__n { font-size: var(--fs-2xs); color: var(--pa); letter-spacing: .1em; font-weight: 500; }
.ledger dd { color: var(--text-2); line-height: 1.6; }

.facts {
  list-style: none; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
  margin-top: clamp(40px, 5vw, 72px);
}
.fact {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--line-strong);
}
.fact::before {
  content: "";
  position: absolute; left: 0; top: -1px;
  width: 36px; height: 1px;
  background: var(--pa);
  box-shadow: 0 0 10px var(--pa);
}
.fact__k { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.9rem); font-weight: 600; letter-spacing: -.045em; line-height: 1; }
.fact__v { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.4; }

/* ======================================================================
   3. ARCHITECTURE story — the stack assembles
   ====================================================================== */
.story__stage.arch-stage { --ratio: 4 / 5; }
.arch {
  position: absolute; inset: 0;
  container-type: inline-size;
  display: grid;
  grid-template-rows: auto minmax(14px, 1fr) auto minmax(14px, 1fr) auto minmax(14px, 1fr) auto;
}
.arch__layer {
  position: relative;
  padding: clamp(12px, 3.4cqw, 20px) clamp(12px, 3.6cqw, 22px);
  border-radius: clamp(12px, 3cqw, 18px);
  border-style: dashed;
  background: rgba(255, 255, 255, .015);
  opacity: .28;
  transform: scale(.97);
  transition: opacity .7s var(--ease-out), transform .9s var(--ease-out), border-color .6s, background-color .6s, box-shadow .6s;
}
.arch__layer.is-on {
  opacity: 1;
  transform: none;
  border-style: solid;
  border-color: rgba(var(--pa-rgb), .3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 60%),
    #0b0a10;
}
html:not(.motion) .arch__layer { opacity: 1; transform: none; border-style: solid; }
.vo-story--arch[data-step="0"] .arch__layer--ep,
.vo-story--arch[data-step="1"] .arch__layer--ast,
.vo-story--arch[data-step="2"] .arch__layer--app,
.vo-story--arch[data-step="3"] .arch__layer--ops {
  border-color: rgba(var(--pa-rgb), .75);
  box-shadow: 0 0 0 4px rgba(var(--pa-rgb), .08), 0 24px 70px -30px rgba(var(--pa-rgb), .8);
}
.arch__name {
  display: flex; align-items: baseline; gap: 10px;
  font-weight: 600;
  font-size: clamp(13px, 3.6cqw, 18px);
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--text);
}
.arch__n { font-family: var(--font-mono); font-size: clamp(10px, 2.2cqw, 11px); font-weight: 500; color: var(--pa); letter-spacing: .08em; }
.arch__desc { margin-top: 6px; font-size: clamp(11px, 2.8cqw, 14px); color: var(--text-2); line-height: 1.35; }
.arch__chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(8px, 2.2cqw, 12px); }
.arch__chips li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, .03);
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.3cqw, 11.5px);
  letter-spacing: .02em;
  color: var(--text-2);
  white-space: nowrap;
  line-height: 1.3;
}
.arch__chips svg { width: 13px; height: 13px; color: var(--pa); flex: none; }
.arch__layer--ast.is-on {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 181, 71, .12), transparent 60%),
    #0b0a10;
}
.arch__layer--ast .arch__n { color: var(--warn); }
.arch__layer--app.is-on {
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(var(--pa-rgb), .22), transparent 60%),
    #0e0a12;
}
.arch__layer--app .arch__chips li { color: var(--text); border-color: rgba(var(--pa-rgb), .35); background: rgba(var(--pa-rgb), .07); }

.arch__wire {
  position: relative;
  display: flex; align-items: center;
  padding-left: clamp(40px, 10cqw, 58px);
}
.arch__wire i {
  position: absolute;
  left: clamp(24px, 6.6cqw, 36px);
  top: 0; bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(180deg, rgba(var(--pa-rgb), .95) 0 6px, transparent 6px 12px);
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform .8s var(--ease-out);
}
.arch__wire span {
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.3cqw, 11.5px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pa);
  line-height: 1.2;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity .6s var(--ease-out) .2s, transform .7s var(--ease-out) .2s;
}
.arch__wire--ari span { color: var(--text); }
.arch__wire.is-on i { transform: scaleY(1); }
.arch__wire.is-on span { opacity: 1; transform: none; }
html.motion .arch__wire.is-on i { animation: wire-flow .9s linear infinite; }
@keyframes wire-flow { to { background-position: 0 12px; } }
html:not(.motion) .arch__wire i { transform: none; }
html:not(.motion) .arch__wire span { opacity: 1; transform: none; }

/* ======================================================================
   4. REDUNDANCY story — 2 + 2 servers, one fails, calls continue
   ====================================================================== */
.story__stage.red-stage { --ratio: 4 / 3; }
.red { position: absolute; inset: 0; container-type: inline-size; }
.red__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.red__ln {
  fill: none;
  stroke: rgba(var(--pa-rgb), .45);
  stroke-width: 1.6;
  stroke-linecap: round;
  transition: stroke .5s, stroke-dasharray .5s;
}
.vo-story--red[data-step="1"] .red__ln--p1 { stroke: var(--warn); stroke-dasharray: 4 5; }
.vo-story--red[data-step="2"] .red__ln--p1 { stroke: var(--pa); }

.red__eps {
  position: absolute; left: 0; right: 0; top: 1%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.rep { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rep svg {
  width: clamp(28px, 8cqw, 42px); height: clamp(28px, 8cqw, 42px);
  padding: clamp(6px, 1.9cqw, 10px);
  border-radius: 30%;
  color: var(--pa);
  background: linear-gradient(180deg, #1a1420, #0b0a12);
  border: 1px solid rgba(var(--pa-rgb), .35);
  box-shadow: 0 0 0 4px rgba(5, 7, 11, .92);
}
.rep b { font-family: var(--font-mono); font-weight: 500; font-size: clamp(10px, 2.2cqw, 11.5px); color: var(--text-2); letter-spacing: .04em; line-height: 1; }

.red__pairs {
  position: absolute; left: 3%; right: 3%; top: 52%; bottom: 15%;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6.4%;
}
.pair {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: clamp(4px, 1.4cqw, 8px);
  padding: clamp(8px, 2.4cqw, 14px);
  border-radius: clamp(10px, 2.8cqw, 16px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), #0b0a10;
  transition: border-color .5s, box-shadow .5s;
}
.pair__t {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  padding: 2px 9px;
  border-radius: 999px;
  background: #0b0a10;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: clamp(10px, 2cqw, 11px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.3;
  white-space: nowrap;
}
.srv {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(6px, 1.8cqw, 10px);
  padding: clamp(3px, 1cqw, 6px) clamp(5px, 1.4cqw, 8px);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: border-color .5s, background-color .5s;
}
.srv__ic { display: grid; place-items: center; width: clamp(20px, 5.4cqw, 30px); height: clamp(20px, 5.4cqw, 30px); border-radius: 7px; color: var(--ok); background: rgba(62, 230, 154, .08); border: 1px solid rgba(62, 230, 154, .3); transition: color .5s, background-color .5s, border-color .5s; }
.srv__ic svg { width: 60%; height: 60%; }
.srv__n { font-family: var(--font-mono); font-size: clamp(11px, 2.6cqw, 13px); color: var(--text); font-weight: 500; }
.srv__st { display: grid; justify-items: end; }
.st {
  grid-area: 1 / 1;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(10px, 2cqw, 11px);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid;
}
.st--ok { color: var(--ok); border-color: rgba(62, 230, 154, .35); background: rgba(62, 230, 154, .08); }
.st--bad { color: var(--bad); border-color: rgba(255, 107, 107, .4); background: rgba(255, 107, 107, .1); }
.st--pa { color: var(--pa); border-color: rgba(var(--pa-rgb), .45); background: rgba(var(--pa-rgb), .1); }
html:not(.motion) .st--bad, html:not(.motion) .st--pa { display: none; }

.vo-story--red[data-step="1"] .srv--1a,
.vo-story--red[data-step="2"] .srv--1a { border-color: rgba(255, 107, 107, .35); background: rgba(255, 107, 107, .06); }
.vo-story--red[data-step="1"] .srv--1a .srv__ic,
.vo-story--red[data-step="2"] .srv--1a .srv__ic { color: var(--bad); background: rgba(255, 107, 107, .1); border-color: rgba(255, 107, 107, .45); }
.vo-story--red[data-step="1"] .srv--1a .srv__n,
.vo-story--red[data-step="2"] .srv--1a .srv__n { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 1px; }
.vo-story--red[data-step="1"] .pair--1 { border-color: rgba(255, 181, 71, .5); }
.vo-story--red[data-step="2"] .pair--1 { border-color: rgba(var(--pa-rgb), .6); box-shadow: 0 0 50px -16px rgba(var(--pa-rgb), .8); }
.vo-story--red[data-step="2"] .srv--1b { border-color: rgba(var(--pa-rgb), .5); background: rgba(var(--pa-rgb), .08); }
.vo-story--red[data-step="2"] .srv--1b .srv__ic { color: var(--pa); background: rgba(var(--pa-rgb), .12); border-color: rgba(var(--pa-rgb), .5); }

.red__bar {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(10, 8, 14, .92);
  font-family: var(--font-mono);
  font-size: clamp(10px, 2.2cqw, 12px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  transition: border-color .5s;
}
.red__bar .dot { color: var(--ok); transition: color .5s; }
.red__msg { display: grid; }
.red__msg b { grid-area: 1 / 1; font-weight: 500; }
html:not(.motion) .red__msg b + b { display: none; }
.vo-story--red[data-step="1"] .red__bar { border-color: rgba(255, 107, 107, .5); }
.vo-story--red[data-step="1"] .red__bar .dot { color: var(--bad); }
.vo-story--red[data-step="2"] .red__bar { border-color: rgba(62, 230, 154, .5); }

/* ======================================================================
   5. CAPABILITIES — bento
   ====================================================================== */
.vo-caps .section-head .h2 { max-width: 22ch; }
.bento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
}
.bx { display: flex; flex-direction: column; }
.bx--wide { grid-column: span 2; }
.bx__top { display: flex; align-items: center; gap: 12px; }
.bx__top .icon-box { margin: 0; }
.bx__top .h4 { margin: 0; }
.bx p { margin-top: 12px; }
.bx--wide > [aria-hidden] { margin-top: auto; padding-top: 18px; }

.ivr { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ivr li {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .025);
  font-size: .82rem;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ivr b {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--pa); border: 1px solid rgba(var(--pa-rgb), .4);
}
html.motion .ivr li { animation: ivr-hl 8s linear infinite; }
html.motion .ivr li:nth-child(2) { animation-delay: 2s; }
html.motion .ivr li:nth-child(3) { animation-delay: 4s; }
html.motion .ivr li:nth-child(4) { animation-delay: 6s; }
@keyframes ivr-hl {
  0%, 24% { border-color: rgba(var(--pa-rgb), .6); background-color: rgba(var(--pa-rgb), .1); color: var(--text); }
  26%, 100% { border-color: var(--line-strong); background-color: rgba(255, 255, 255, .025); color: var(--text-2); }
}

.q { display: flex; align-items: center; gap: 14px; }
.q__lane {
  position: relative; flex: 1; height: 34px;
  border-radius: 10px;
  border: 1px dashed var(--line-strong);
  overflow: hidden;
}
.q__lane i { position: absolute; inset: 0; }
.q__lane i::before {
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%;
  background: var(--pa);
  box-shadow: 0 0 10px rgba(var(--pa-rgb), .8);
}
.q__lane i:nth-child(1) { transform: translateX(8%); }
.q__lane i:nth-child(2) { transform: translateX(28%); }
.q__lane i:nth-child(3) { transform: translateX(48%); }
.q__lane i:nth-child(4) { transform: translateX(68%); }
html.motion .q__lane i { animation: q-move 6s linear infinite; }
html.motion .q__lane i:nth-child(2) { animation-delay: -1.5s; }
html.motion .q__lane i:nth-child(3) { animation-delay: -3s; }
html.motion .q__lane i:nth-child(4) { animation-delay: -4.5s; }
@keyframes q-move {
  0% { transform: translateX(-4%); opacity: 0; }
  10%, 85% { opacity: 1; }
  100% { transform: translateX(94%); opacity: 0; }
}
.q__agents { display: flex; flex-direction: column; gap: 4px; }
.q__a {
  padding: 2px 8px; border-radius: 999px;
  font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--warn); border: 1px solid rgba(255, 181, 71, .35); background: rgba(255, 181, 71, .08);
  white-space: nowrap; line-height: 1.3; text-align: center;
}
.q__a--free { color: var(--ok); border-color: rgba(62, 230, 154, .35); background: rgba(62, 230, 154, .08); }

.dash { display: flex; align-items: flex-end; gap: 14px; }
.dash__bars { flex: 1; display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.dash__bars i {
  flex: 1; height: 100%;
  border-radius: 3px 3px 1px 1px;
  background: linear-gradient(180deg, var(--pa), rgba(var(--pa-rgb), .25));
  transform-origin: 50% 100%;
  transform: scaleY(var(--h, .5));
}
.dash__bars i:nth-child(1) { --h: .35; } .dash__bars i:nth-child(2) { --h: .55; } .dash__bars i:nth-child(3) { --h: .45; }
.dash__bars i:nth-child(4) { --h: .7; } .dash__bars i:nth-child(5) { --h: .6; } .dash__bars i:nth-child(6) { --h: .85; }
.dash__bars i:nth-child(7) { --h: .75; } .dash__bars i:nth-child(8) { --h: .5; } .dash__bars i:nth-child(9) { --h: .65; }
.dash__bars i:nth-child(10) { --h: .9; } .dash__bars i:nth-child(11) { --h: .7; } .dash__bars i:nth-child(12) { --h: .8; }
html.motion .dash__bars i { animation: bar 3.2s var(--ease-in-out) infinite alternate; }
html.motion .dash__bars i:nth-child(odd) { animation-delay: -1.1s; }
html.motion .dash__bars i:nth-child(3n) { animation-delay: -2.2s; }
@keyframes bar { 0% { transform: scaleY(var(--h)); } 100% { transform: scaleY(calc(var(--h) * .55)); } }
.dash__live { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ok); }

.flow { display: flex; align-items: center; gap: 0; }
.flow span {
  flex: none;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--text-2);
  white-space: nowrap;
}
.flow .flow__mid { color: var(--pa); border-color: rgba(var(--pa-rgb), .45); background: rgba(var(--pa-rgb), .08); }
.flow i {
  flex: 1; min-width: 14px; height: 2px;
  background: repeating-linear-gradient(90deg, rgba(var(--pa-rgb), .9) 0 5px, transparent 5px 10px);
}
html.motion .flow i { animation: flow-x .8s linear infinite; }
@keyframes flow-x { to { background-position: 10px 0; } }

/* ======================================================================
   6. USE CASES — a line with stops that light up
   ====================================================================== */
.line { position: relative; --dot: 48px; }
.line__rail {
  position: absolute;
  left: calc(var(--dot) / 2); right: calc(100% / 12);
  top: calc(var(--dot) / 2 - 1px);
  height: 2px;
  background: var(--line-strong);
}
.line__rail i {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--pa), var(--pa-2));
  box-shadow: 0 0 12px rgba(var(--pa-rgb), .7);
  transform-origin: 0 50%;
  transform: scaleX(min(1, calc(var(--p) * 1.25)));
}
.line__stops {
  list-style: none; padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.stop {
  --k: calc(var(--t) / 5);
  --on: clamp(0, (var(--p) * 1.25 - var(--k)) * 12, 1);
  display: flex; flex-direction: column; gap: 18px;
}
.stop__dot {
  position: relative;
  display: grid; place-items: center;
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  color: var(--text-3);
  background: #0b0a10;
  border: 1px solid var(--line-strong);
  box-shadow: 0 0 0 6px var(--bg);
}
.stop__dot::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--pa);
  background: rgba(var(--pa-rgb), .14);
  box-shadow: 0 0 24px -2px rgba(var(--pa-rgb), .8);
  opacity: var(--on);
}
.stop__dot svg { position: relative; z-index: 1; width: 21px; height: 21px; color: color-mix(in srgb, var(--pa) calc(var(--on) * 100%), var(--text-3)); }
.stop__body { opacity: calc(.4 + var(--on) * .6); transform: translateY(calc((1 - var(--on)) * 10px)); }
.stop__body .h4 { margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.stop__body p { color: var(--text-2); font-size: .93rem; line-height: 1.5; }

/* ======================================================================
   7. WHY OURS
   ====================================================================== */
.vo-why__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.vo-why__head { position: sticky; top: calc(var(--header-h) + 84px); }
.vo-why__head .h2 { max-width: 14ch; }
.vo-why__head .lead { margin-top: 20px; }
.vo-why__more { margin-top: 24px; min-height: 44px; }
.vo-link { color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--pa-rgb), .55); text-underline-offset: 3px; transition: color .2s; }
.vo-link:hover { color: var(--pa); }
.why { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.why__i {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.why__i .icon-box { margin: 0; }
.why__i .h4 { margin-bottom: 6px; }
.why__i p { color: var(--text-2); line-height: 1.55; }

/* ======================================================================
   Responsive
   ====================================================================== */
@media (min-width: 901px) and (max-height: 780px) {
  .vo-hero__title { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.2rem); }
}
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ivr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .vo-hero__grid, .vo-case__grid, .vo-why__grid { grid-template-columns: minmax(0, 1fr); }
  .vo-hero__grid { gap: 36px; }
  .cn { width: 100%; max-width: 560px; }
  .vo-why__head { position: static; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story__stage.arch-stage { --ratio: 4 / 3; }

  /* use cases: vertical line */
  .line { --dot: 44px; }
  .line__rail {
    left: calc(var(--dot) / 2 - 1px); right: auto;
    top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2 + 20px);
    width: 2px; height: auto;
  }
  .line__rail i { transform-origin: 50% 0; transform: scaleY(min(1, calc(var(--p) * 1.25))); }
  .line__stops { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stop { flex-direction: row; gap: 16px; padding-bottom: 20px; }
  .stop__dot { flex: none; }
  .stop__body { padding-top: 2px; transform: translateX(calc((1 - var(--on)) * 8px)); }
  .stop__dot svg { width: 19px; height: 19px; }
}
@media (max-width: 640px) {
  .vo-hero { padding-top: calc(var(--header-h) + 22px); padding-bottom: 44px; }
  .vo-hero__title { font-size: clamp(2.3rem, 1.2rem + 6vw, 3rem); }
  .vo-kicker { margin-bottom: 16px; font-size: 10.5px; }
  .vo-hero__lead { margin-top: 18px; font-size: 1.02rem; }
  .vo-hero__cta { margin-top: 22px; }
  .vo-hero__cta .btn--lg { min-height: 50px; padding: 14px 20px; font-size: .95rem; }
  .vo-hero__chips { margin-top: 20px; }
  .vo-hero__grid { gap: 30px; }

  .ledger__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
  .ledger dd { font-size: .95rem; line-height: 1.55; }
  .facts { gap: 22px 16px; margin-top: 32px; }
  .fact { padding-top: 14px; gap: 6px; }
  .fact__v { font-size: .82rem; }

  .story__panel .h3 { font-size: 1.4rem; margin-bottom: 8px; }
  .story__panel .body { font-size: .95rem; line-height: 1.5; }
  .story__panel .eyebrow { margin-bottom: 10px; }

  /* architecture on phones: give the stack more of the sticky screen */
  html.motion .vo-story--arch .story__sticky { grid-template-rows: minmax(0, 1.25fr) minmax(0, .85fr); }
  .story__stage.arch-stage { --ratio: 6 / 5; width: min(100%, calc(46svh * 1.2)); }
  /* architecture on phones: compact single-row layers */
  .arch { grid-template-rows: auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto minmax(12px, 1fr) auto; }
  .arch__layer { padding: 8px 10px; border-radius: 11px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
  .arch__name { font-size: 13px; gap: 7px; }
  .arch__desc, .arch__chips { margin-top: 0; }
  .arch__desc { font-size: 11px; }
  .arch__chips { gap: 4px; }
  .arch__chips li { padding: 2px 7px; font-size: 10px; gap: 4px; }
  .arch__chips svg { width: 11px; height: 11px; }
  .arch__wire { padding-left: 34px; }
  .arch__wire i { left: 20px; }
  .arch__wire span { font-size: 10px; }

  .bento { gap: 10px; }
  .bx.card { padding: 14px; }
  .bx__top { gap: 9px; }
  .bx__top .icon-box { width: 30px; height: 30px; border-radius: 9px; }
  .bx__top .icon-box svg { width: 15px; height: 15px; }
  .bx__top .h4 { font-size: .95rem; line-height: 1.2; }
  .bx p { margin-top: 8px; font-size: .84rem; line-height: 1.45; }
  .bx--wide > [aria-hidden] { padding-top: 12px; }
  .ivr { gap: 6px; }
  .ivr li { padding: 6px 8px; font-size: .78rem; }
  .ivr b { width: 20px; height: 20px; }
  .q__lane { height: 30px; }
  .dash__bars { height: 34px; }
  .flow span { padding: 5px 8px; font-size: 10px; }

  .stop__body .h4 { font-size: 1.02rem; margin-bottom: 4px; }
  .stop__body p { font-size: .88rem; line-height: 1.45; }
  .stop { padding-bottom: 16px; }

  .why__i { gap: 14px; padding: 16px 0; }
  .why__i .icon-box { width: 32px; height: 32px; border-radius: 9px; }
  .why__i .icon-box svg { width: 16px; height: 16px; }
  .why__i .h4 { font-size: 1.02rem; margin-bottom: 4px; }
  .why__i p { font-size: .9rem; line-height: 1.5; }
}
@media (max-width: 380px) {
  .flow span { padding: 4px 6px; letter-spacing: 0; }
}