/* Platform and Solutions pages on the Orbit design. Loaded after assets/homepage-orbit/orbit.css and
   reuses its tokens, buttons, toggles, FAQ, CTA and footer */

/* ---------- page hero ---------- */
.pg-hero { position: relative; overflow: hidden; isolation: isolate; padding: 150px 0 90px;
  background: radial-gradient(55% 65% at 75% 45%, rgba(118, 79, 246, .16), transparent 70%), radial-gradient(40% 40% at 0% 100%, rgba(65, 51, 106, .32), transparent 70%), var(--bg); }
.pg-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 140px; background: linear-gradient(transparent, var(--bg)); z-index: -1; pointer-events: none; }
.pg-hero-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pg-hero h1 { margin-top: 26px; font-weight: 500; font-size: clamp(38px, 3.5vw, 52px); line-height: 1.04; letter-spacing: -.045em; }
.pg-hero h1 > span { display: block; }
.pg-hero h1 .h1b { margin-top: .08em; background: linear-gradient(92deg, #efe9ff 0%, #b597fb 50%, #7f5af7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pg-hero .lede { max-width: 540px; }

/* split section heading: title one side, a short paragraph the other */
.pg-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: end; }
.pg-split h2 { margin-top: 0; }
.pg-split p { color: var(--mute); font-size: 17px; max-width: 520px; }
/* a tighter section rhythm than the homepage */
.sec { padding: 112px 0; }
.sec-head { margin-bottom: 44px; }
.sec h2.pg-h2 { font-size: clamp(34px, 4vw, 54px); line-height: 1.06; letter-spacing: -.04em; font-weight: 500; }

/* ---------- platform hero: a crowd, one dot, one profile ---------- */
.pf-hero { padding: 128px 0 40px; }
.pf-hero .pg-hero-in { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 24px; }
/* the crowd sits open in the hero, without a frame, and runs into the page margin */
.pf-hero .zoom { margin-inline-end: calc(-1 * var(--gut)); border-color: transparent; background: radial-gradient(52% 50% at 50% 50%, rgba(118, 79, 246, .16), transparent 72%); }
.zoom { position: relative; height: 640px; border-radius: 28px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(70% 60% at 50% 50%, rgba(118, 79, 246, .12), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .008)); }
.zoom-cv { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.zoom-count { position: absolute; inset-block-start: 20px; inset-inline-start: 22px; display: flex; align-items: baseline; gap: 10px; pointer-events: none; }
.zoom-count b { font: 500 22px var(--sans); letter-spacing: -.02em; color: var(--ink); margin: 0; text-transform: none; }
.zoom-hint { position: absolute; inset-block-end: 14px; inset-inline-start: 22px; font-size: 10.5px; color: var(--dim); pointer-events: none; }
.zcard { position: absolute; left: 50%; top: 50%; width: 340px; padding: 18px; border-radius: 20px; pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 30, 58, .94), rgba(20, 18, 30, .94)); border: 1px solid rgba(146, 107, 247, .5);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 60px -10px rgba(118, 79, 246, .5); backdrop-filter: blur(12px);
  opacity: 0; transform: translate(-50%, -50%) scale(.3); }
.zcard .pc-rows div { opacity: 0; transform: translateX(-8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.zcard .pc-rows div.on { opacity: 1; transform: none; }
.zcard .pc-tags span { opacity: 0; transition: opacity .4s var(--ease); }
.zcard .pc-tags span.on { opacity: 1; }
.zcard .av, .zcard .tag { flex: none; }
.zcard .av { width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8e0ff, #926bf7 55%, #41336a); box-shadow: 0 0 18px rgba(146, 107, 247, .7); }
.zcard .tag { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: rgba(111, 227, 156, .12); color: #8fe8b0; border: 1px solid rgba(111, 227, 156, .3); }

/* ---------- platform: the loop explorer ---------- */
.lx { border-radius: 28px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); overflow: hidden; }
.lx-stage { position: relative; height: 340px; border-bottom: 1px solid var(--line);
  background: radial-gradient(60% 70% at 50% 50%, rgba(118, 79, 246, .1), transparent 70%); }
.lx-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(80% 80% at 50% 50%, #000, transparent); mask: radial-gradient(80% 80% at 50% 50%, #000, transparent); }
.lx-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.lx-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.lx-tabs button { position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: baseline; padding: 20px 24px; text-align: start; color: var(--mute); transition: color .3s, background .3s; }
.lx-tabs button + button { border-inline-start: 1px solid var(--line); }
.lx-tabs button:hover { background: rgba(255, 255, 255, .03); color: var(--ink); }
.lx-tabs button.on { color: var(--ink); background: rgba(118, 79, 246, .1); }
.lx-tabs b { grid-row: span 2; font: 500 12px var(--mono); color: var(--dim); }
.lx-tabs button.on b { color: var(--trace); }
.lx-tabs span { font-size: 18px; font-weight: 500; letter-spacing: -.01em; }
.lx-tabs small { grid-column: 2; font-size: 12.5px; color: var(--dim); }
.lx-bar { position: absolute; inset-block-end: -1px; inset-inline-start: 0; width: 25%; height: 2px; background: linear-gradient(90deg, var(--trace), var(--purple)); box-shadow: 0 0 10px var(--sphere); transform-origin: left; transform: scaleX(var(--k, 0)); transition: inset-inline-start .45s var(--ease); }
html[dir="rtl"] .lx-bar { transform-origin: right; }
.lx-panels { padding: 30px; }
.lx-p { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "copy ui" "feats ui"; gap: 26px 40px; align-items: start; }
.lx-copy { grid-area: copy; }
.lx-feats { grid-area: feats; }
.lx-ui { grid-area: ui; }
.lx-p[hidden] { display: none; }
.lx-p.on { animation: lxIn .5s var(--ease); }
@keyframes lxIn { from { opacity: 0; transform: translateY(10px); } }
.lx-copy h3 { font-size: 28px; line-height: 1.15; letter-spacing: -.03em; font-weight: 500; }
.lx-copy p { margin-top: 14px; color: var(--mute); font-size: 16px; max-width: 460px; }
.lx-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--trace); font-weight: 500; font-size: 15px; }
.lx-more .arr { transition: transform .25s var(--ease); }
.lx-more:hover .arr { transform: translateX(4px); }
.lx-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lx-feats a { position: relative; display: grid; gap: 2px; height: 100%; padding: 12px 36px 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(9, 9, 13, .4); transition: border-color .25s, background .25s; }
html[dir="rtl"] .lx-feats a { padding: 12px 14px 12px 36px; }
.lx-feats a::after { content: "→"; position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--dim); transition: color .25s, transform .25s var(--ease); }
.lx-feats a:hover { border-color: rgba(146, 107, 247, .45); background: rgba(118, 79, 246, .08); }
.lx-feats a:hover::after { color: var(--trace); transform: translate(3px, -50%); }
.lx-feats b { font-weight: 500; font-size: 14.5px; }
.lx-feats span { color: var(--mute); font-size: 13px; line-height: 1.4; }

/* product previews inside the loop panels */
.lx-ui { position: relative; min-height: 100%; padding: 16px 18px 18px; border-radius: 20px; border: 1px solid var(--line-2); overflow: hidden;
  background: radial-gradient(80% 60% at 100% 0%, rgba(118, 79, 246, .16), transparent 70%), linear-gradient(180deg, rgba(30, 26, 46, .92), rgba(15, 14, 22, .92));
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.ui-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ui-top .mono { display: inline-flex; align-items: center; font-size: 10.5px; }
.ui-top .ui-il { color: var(--dim); font-size: 9.5px; }
.ui-live { width: 7px; height: 7px; margin-inline-end: 9px; border-radius: 50%; background: #6fe39c; box-shadow: 0 0 0 3px rgba(111, 227, 156, .16); animation: uiPulse 1.8s ease-in-out infinite; }
@keyframes uiPulse { 50% { box-shadow: 0 0 0 6px rgba(111, 227, 156, 0); } }
.lx-ui .ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); color: var(--trace); -webkit-mask: none; mask: none; position: relative; }
.lx-ui .ic::after { content: ""; position: absolute; inset: 7px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ui-ok { flex: none; font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: rgba(111, 227, 156, .1); color: #8fe8b0; border: 1px solid rgba(111, 227, 156, .28); }
/* collect: events arriving */
.ev { list-style: none; margin: 0; padding: 0; }
.ev li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ev li:last-child { border-bottom: 0; }
.ev .ic { grid-row: span 2; }
.ev b { font-size: 14px; font-weight: 500; }
.ev span { grid-column: 2; font-size: 12.5px; color: var(--mute); }
.ev time { grid-row: 1 / span 2; grid-column: 3; font: 500 11px var(--mono); color: var(--dim); }
.ev li:first-child time { color: #8fe8b0; }
.ev li.new { animation: evIn .6s var(--ease); }
.ev li.new .ic { color: #fff; border-color: rgba(167, 135, 255, .6); background: rgba(118, 79, 246, .35); }
@keyframes evIn { from { opacity: 0; transform: translateY(-12px); } }
/* unify: one profile, the identifiers behind it */
.pf-id { display: flex; align-items: center; gap: 12px; padding: 16px 0 14px; }
.pf-id .av { flex: none; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8e0ff, #926bf7 55%, #41336a); box-shadow: 0 0 18px rgba(146, 107, 247, .6); }
.pf-id > div { flex: 1; min-width: 0; }
.pf-id b { display: block; font-size: 15px; font-weight: 500; }
.pf-id small { display: block; margin-top: 2px; font-size: 12px; color: var(--mute); }
.pf-keys { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pf-keys li { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pf-keys span { color: var(--mute); }
.pf-keys b { font: 400 12.5px var(--mono); }
.pf-keys i { font-style: normal; font-size: 11.5px; color: var(--trace); padding: 2px 8px; border-radius: 999px; background: rgba(118, 79, 246, .14); white-space: nowrap; }
.lx-p.on .pf-keys li { animation: evIn .5s var(--ease) both; }
.lx-p.on .pf-keys li:nth-child(2) { animation-delay: .12s; } .lx-p.on .pf-keys li:nth-child(3) { animation-delay: .24s; } .lx-p.on .pf-keys li:nth-child(4) { animation-delay: .36s; }
.pf-consent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; font-size: 12.5px; }
.pf-consent span { color: var(--mute); margin-inline-end: 6px; }
.pf-consent b { font-weight: 500; font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-2); }
.pf-consent .y { color: #8fe8b0; border-color: rgba(111, 227, 156, .3); background: rgba(111, 227, 156, .08); }
.pf-consent .y::before { content: "✓ "; }
.pf-consent .n { color: var(--dim); text-decoration: line-through; }
/* act: a journey, one step lit at a time */
.jn { position: relative; list-style: none; margin: 0; padding: 6px 0 0; }
.jn::before { content: ""; position: absolute; inset-inline-start: 15px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(var(--trace), rgba(146, 107, 247, .2)); }
.jn li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 10px; padding: 10px 12px 10px 0; border-radius: 14px; transition: background .4s; }
.jn li > div { min-width: 0; }
.jn small { display: block; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.jn b { display: block; margin-top: 2px; font-size: 14px; font-weight: 500; }
.jn em { font: 500 11.5px var(--mono); font-style: normal; color: var(--mute); white-space: nowrap; }
.jn .ic { background: var(--bg); z-index: 1; }
.jn li.on { background: rgba(118, 79, 246, .1); }
.jn li.on .ic { color: #fff; background: rgba(118, 79, 246, .5); border-color: rgba(167, 135, 255, .7); box-shadow: 0 0 18px -2px rgba(146, 107, 247, .8); }
.jn li.on em { color: var(--trace); }
/* measure: one order, traced back; revenue counted once */
.ms-path { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 8px; }
.ms-path li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.ms-path b { font-size: 13.5px; font-weight: 500; }
.ms-path span { font: 500 11px var(--mono); color: var(--dim); white-space: nowrap; }
.ms-path .ord { border-color: rgba(240, 138, 93, .4); background: rgba(240, 138, 93, .07); }
.ms-path .ord .ic { color: #f6b08f; border-color: rgba(240, 138, 93, .45); }
.lx-p.on .ms-path li { animation: evIn .5s var(--ease) both; }
.lx-p.on .ms-path li:nth-child(2) { animation-delay: .25s; } .lx-p.on .ms-path li:nth-child(3) { animation-delay: .5s; }
.ms-rev { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.ms-rev span { font-size: 12.5px; color: var(--mute); }
.ms-rev b { font: 500 22px var(--sans); letter-spacing: -.02em; }
.ms-bars { display: flex; gap: 3px; height: 10px; margin-top: 12px; }
.ms-bars i { width: var(--w); border-radius: 3px; background: var(--purple); transform-origin: left; }
.ms-bars i:nth-child(2) { background: #b597fb; } .ms-bars i:nth-child(3) { background: #f08a5d; }
.lx-p.on .ms-bars i { animation: barIn .9s .6s var(--ease) both; }
@keyframes barIn { from { transform: scaleX(0); } }
.ms-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--mute); }
.ms-key span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 7px; border-radius: 2px; background: var(--purple); }
.ms-key span:nth-child(2)::before { background: #b597fb; } .ms-key span:nth-child(3)::before { background: #f08a5d; }

/* ---------- platform: stack ---------- */
.stk { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); gap: 40px; align-items: center; }
.stk h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.06; letter-spacing: -.04em; font-weight: 500; }
.stk-lede { margin-top: 18px; color: var(--mute); font-size: 17px; }
.stk-list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; }
.stk-list li { padding: 22px 0; border-top: 1px solid var(--line); }
.stk-list h3 { font-size: 19px; font-weight: 500; letter-spacing: -.01em; }
.stk-list p { margin-top: 6px; color: var(--mute); font-size: 15px; max-width: 480px; }
.stk-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; }
.stk-links a { font-size: 14px; color: var(--trace); border-bottom: 1px solid rgba(214, 199, 252, .3); }
.stk-links a:hover { border-color: var(--trace); }
.orb { position: relative; height: 620px; }
.orb-key { position: absolute; inset-inline: 0; bottom: 0; display: flex; justify-content: center; gap: 22px; font-size: 10.5px; color: var(--dim); pointer-events: none; }
.orb-key span { display: inline-flex; align-items: center; gap: 8px; }
.orb-key i { width: 7px; height: 7px; border-radius: 50%; background: var(--trace); box-shadow: 0 0 8px var(--sphere); }
.orb-key .k-out { background: #f6b08f; box-shadow: 0 0 8px rgba(240, 138, 93, .8); }
html:not(.js) .orb-key { display: none; }
.orb-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb-tags { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; pointer-events: none; }
.orb-tags li { position: absolute; left: 0; top: 0; padding: 7px 12px; border-radius: 12px; font-size: 12.5px; white-space: nowrap; background: rgba(20, 18, 30, .7); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); will-change: transform, opacity; transition: border-color .3s, color .3s; color: var(--ink); }
.orb-tags li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-inline-end: 8px; vertical-align: 1px; border-radius: 50%; background: var(--trace); }
.orb-tags li.out::before { background: #f6b08f; }
.orb-tags li.hot { border-color: rgba(146, 107, 247, .7); box-shadow: 0 0 24px -6px rgba(146, 107, 247, .8); }
.orb-core { position: absolute; left: 50%; top: calc(50% - 14px); width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(118, 79, 246, .5), rgba(20, 18, 30, .9) 70%); border: 1px solid rgba(146, 107, 247, .55); box-shadow: 0 0 60px -6px rgba(118, 79, 246, .8); pointer-events: none; }
.orb-core img { width: 46px; height: auto; filter: drop-shadow(0 0 12px rgba(146, 107, 247, .8)); }
/* without JavaScript the systems read as a simple list */
html:not(.js) .orb { height: auto; }
html:not(.js) .orb-tags { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
html:not(.js) .orb-tags li { position: static; }
html:not(.js) .orb-core, html:not(.js) .orb-cv { display: none; }
/* without JavaScript the four loop steps read one after another */
html:not(.js) .lx-tabs, html:not(.js) .lx-stage { display: none; }
html:not(.js) .lx-p + .lx-p { margin-top: 34px; padding-top: 34px; border-top: 1px solid var(--line); }

/* ---------- platform: team ---------- */
.tm { border-radius: 28px; border: 1px solid var(--line); padding: 48px; background: radial-gradient(50% 80% at 100% 0%, rgba(118, 79, 246, .14), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); }
.tm-head { max-width: 720px; }
.tm-head h2 { margin-top: 16px; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.08; letter-spacing: -.04em; font-weight: 500; }
.tm-head p { margin-top: 16px; color: var(--mute); font-size: 17px; }
.tm-line { position: relative; list-style: none; margin: 48px 0 0; padding: 30px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tm-line::before { content: ""; position: absolute; inset-inline: 0; top: 0; height: 2px; border-radius: 2px; background: var(--line-2); }
.tm-line::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--trace), var(--purple)); box-shadow: 0 0 10px var(--sphere); transform-origin: left; transform: scaleX(var(--k, 1)); }
html[dir="rtl"] .tm-line::after { transform-origin: right; }
.tm-line li { position: relative; }
.tm-line li::before { content: ""; position: absolute; top: -36px; inset-inline-start: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: all .4s var(--ease); }
.tm-line li.on::before { background: var(--sphere); border-color: var(--trace); box-shadow: 0 0 0 5px rgba(146, 107, 247, .2), 0 0 14px var(--sphere); }
.tm-line b { display: block; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--trace); }
.tm-line span { display: block; margin-top: 10px; font-size: 16px; line-height: 1.45; }
.tm-foot { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 22px; }
.tm-foot .cal-tile { width: auto; flex-direction: row; padding: 12px 18px; gap: 12px; }
.tm-foot .cal-tile img { width: 32px; }
.tm-foot p { flex: 1; color: var(--mute); font-size: 15px; }

/* ---------- active navigation item ---------- */
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(255, 255, 255, .06); }
.nav-panel a[aria-current="page"]:not(.btn) { background: rgba(118, 79, 246, .14); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .pg-hero-in { grid-template-columns: 1fr; gap: 40px; }
  .pg-hero-copy { max-width: 640px; }
  .pf-hero .pg-hero-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pf-hero .zoom { margin-inline: calc(-1 * var(--gut)); }
  .sec { padding: 96px 0; }
  .stk { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lx-p { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "ui" "feats"; gap: 24px; }
}
@media (max-width: 760px) {
  .pg-hero { padding: 112px 0 56px; }
  .pg-hero h1 { font-size: clamp(26px, 8.2vw, 38px); margin-top: 18px; }
  .pf-hero { padding: 108px 0 28px; }
  .sec { padding: 72px 0; }
  .sec-head { margin-bottom: 32px; }
  .zoom { height: 460px; border-radius: 22px; }
  .zcard { width: 286px; padding: 14px; }
  .zcard .pc-rows div { padding: 7px 0; font-size: 12.5px; }
  .zoom-count b { font-size: 18px; }
  .pg-split { grid-template-columns: 1fr; gap: 16px; }
  .lx { border-radius: 22px; }
  .lx-stage { height: 260px; }
  .lx-tabs { grid-template-columns: repeat(2, 1fr); }
  .lx-tabs button { padding: 14px 16px; }
  .lx-tabs button:nth-child(3) { border-inline-start: 0; }
  .lx-tabs button:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lx-tabs span { font-size: 16px; }
  .lx-bar { display: none; }
  .lx-panels { padding: 24px 20px; }
  .lx-copy h3 { font-size: 23px; }
  .lx-feats { grid-template-columns: minmax(0, 1fr); }
  .lx-ui { padding: 14px 14px 16px; border-radius: 18px; }
  .pf-id .ui-ok { display: none; }
  .pf-keys li { grid-template-columns: 82px minmax(0, 1fr); row-gap: 4px; }
  .pf-keys i { grid-column: 2; justify-self: start; }
  .jn b { font-size: 13.5px; }
  .jn em { display: none; }
  .ms-path b { font-size: 13px; }
  .orb { height: 480px; }
  .orb-key { gap: 14px; font-size: 9.5px; }
  .orb-tags li { font-size: 11px; padding: 5px 9px; }
  .orb-core { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
  .orb-core img { width: 34px; }
  .tm { padding: 26px 20px; border-radius: 22px; }
  .tm-line { grid-template-columns: 1fr; gap: 22px; padding: 0 0 0 30px; margin-top: 32px; }
  html[dir="rtl"] .tm-line { padding: 0 30px 0 0; }
  .tm-line::before, .tm-line::after { inset-inline: 5px auto; top: 4px; bottom: 4px; width: 2px; height: auto; }
  .tm-line::after { transform-origin: top; transform: scaleY(var(--k, 1)); }
  .tm-line li::before { top: 3px; inset-inline-start: -30px; }
  .tm-line span { margin-top: 4px; font-size: 15px; }
  .tm-foot { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-p.on, .lx-p.on .pf-keys li, .lx-p.on .ms-path li, .lx-p.on .ms-bars i, .ev li.new, .ui-live { animation: none; }
}

/* =========================================================
   SOLUTIONS
   ========================================================= */
.ic-db { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Cellipse cx='12' cy='6' rx='7' ry='3'/%3E%3Cpath d='M5 6v12c0 1.7 3.1 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3.1 3 7 3s7-1.3 7-3'/%3E%3C/svg%3E"); }
.ic-web { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E"); }
.ic-card { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Cpath d='M3 10h18M7 15h3'/%3E%3C/svg%3E"); }
.ic-cal { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='2'/%3E%3Cpath d='M4 10h16M8 3v4M16 3v4'/%3E%3C/svg%3E"); }

/* ---------- hero: the sphere takes the shape of each sector ---------- */
.vx-hero { padding-bottom: 70px; }
.vx-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: end; margin-bottom: 48px; }
.vx-head .lede { margin-top: 0; }
.vx-head .ctas { margin-top: 28px; }
.vx { display: grid; grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); border-radius: 30px; border: 1px solid var(--line); overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); box-shadow: 0 40px 120px -40px rgba(0, 0, 0, .9); }
.vx-side { display: flex; flex-direction: column; border-inline-end: 1px solid var(--line); background: rgba(9, 9, 13, .35); }
.vx-list { display: flex; flex-direction: column; }
.vx-list button { position: relative; display: grid; grid-template-columns: 26px 40px minmax(0, 1fr); align-items: center; gap: 12px; padding: 22px 20px; text-align: start;
  border-bottom: 1px solid var(--line); color: var(--dim); font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; letter-spacing: -.02em; line-height: 1.2; transition: color .3s, background .3s; }
.vx-list button > b { font-size: 11px; font-weight: 500; color: var(--dim); letter-spacing: .04em; }
.vx-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); color: var(--mute); transition: all .3s; }
.vx-ic .ic { width: 18px; height: 18px; }
.vx-list button:hover { color: var(--ink); background: rgba(255, 255, 255, .025); }
.vx-list button.on { color: var(--ink); background: linear-gradient(90deg, rgba(118, 79, 246, .16), rgba(118, 79, 246, 0) 80%); }
.vx-list button.on > b { color: var(--trace); }
.vx-list button.on .vx-ic { color: #fff; border-color: rgba(167, 135, 255, .7); background: linear-gradient(180deg, #8763f8, #6a42f0); box-shadow: 0 8px 26px -8px rgba(118, 79, 246, .9); }
.vx-k { position: absolute; inset-inline-start: 0; bottom: -1px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--purple), var(--trace)); transform-origin: left; transform: scaleX(0); }
html[dir="rtl"] .vx-k { transform-origin: right; }
.vx-list button.on .vx-k { transform: scaleX(var(--k, 1)); }
.vx-key { list-style: none; margin: auto 24px 0; padding: 18px 0 0; display: grid; gap: 12px; font-size: 13.5px; color: var(--mute); }
.vx-key li { display: flex; align-items: center; gap: 12px; }
.vx-key i { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; }
.vx-key .k1 { border: 1px solid rgba(255, 255, 255, .16); background: rgba(20, 18, 30, .9); }
.vx-key .k1::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--trace); box-shadow: 0 0 6px var(--trace); }
.vx-key .k2 { background: radial-gradient(circle, rgba(232, 224, 255, .95) 0 2px, rgba(146, 107, 247, .55) 3px 5px, transparent 6px), radial-gradient(circle, rgba(146, 107, 247, .25), transparent 70%); }
.vx-key .k3 { border: 1px solid rgba(167, 135, 255, .6); background: linear-gradient(180deg, rgba(60, 42, 128, .95), rgba(36, 26, 80, .95)); }
.vx-more { margin-top: 0; padding: 22px 24px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--dim); }
.vx-more a { color: var(--mute); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .2); text-underline-offset: 4px; }
.vx-more a:hover { color: var(--ink); }

.vx-stage { position: relative; min-height: 640px; background: radial-gradient(45% 45% at 50% 36%, rgba(118, 79, 246, .2), transparent 70%); }
.vx-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask: radial-gradient(70% 60% at 50% 38%, #000, transparent); mask: radial-gradient(70% 60% at 50% 38%, #000, transparent); pointer-events: none; }
.vx-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vx-stage > .illus { inset-block: 18px auto; inset-inline-end: 22px; }
.vx-tag { position: absolute; inset-block-start: 16px; inset-inline-start: 22px; font-size: 10.5px; color: var(--dim); }
.vx-tag b { color: var(--trace); font-weight: 500; }
html:not(.js) .vx-tag, html:not(.js) .vx-list { display: none; }
.vx-p[hidden] { display: none; }
.vx-h { display: none; }
html:not(.js) .vx-h { display: block; font-size: 22px; font-weight: 500; margin-bottom: 16px; }
html:not(.js) .vx-p + .vx-p { border-top: 1px solid var(--line); }
.vx-p { position: relative; padding: 24px; }
.vx-sig { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vx-sig li, .vx-next { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 11px; align-content: start; padding: 12px 14px; border-radius: 16px;
  background: rgba(20, 18, 30, .82); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.vx-sig .ic, .vx-next .ic { grid-row: 1 / span 3; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: rgba(255, 255, 255, .1); color: var(--ink);
  -webkit-mask: none; mask: none; position: relative; }
.vx-sig .ic::after, .vx-next .ic::after { content: ""; position: absolute; inset: 7px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.vx-sig .ic, .vx-next .ic { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); }
.vx-sig span, .vx-next span { font-size: 10px; color: var(--dim); letter-spacing: .06em; text-transform: uppercase; }
.vx-sig b, .vx-next b { margin-top: 2px; font-size: 14px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.vx-sig small, .vx-next small { margin-top: 3px; font-size: 12px; color: var(--dim); }
.vx-next { margin-top: 10px; background: linear-gradient(180deg, rgba(60, 42, 128, .92), rgba(36, 26, 80, .92)); border-color: rgba(167, 135, 255, .6);
  box-shadow: 0 0 0 4px rgba(118, 79, 246, .12), 0 20px 60px -16px rgba(118, 79, 246, .7); }
.vx-next span { color: var(--trace); }
.vx-next small { color: rgba(214, 199, 252, .8); }
.vx-next .ic { color: #fff; background: rgba(118, 79, 246, .6); border-color: rgba(167, 135, 255, .6); }
.vx-foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.vx-foot p { color: var(--mute); font-size: 15px; max-width: 470px; }
.vx-foot a { flex: none; display: inline-flex; align-items: center; gap: 8px; color: var(--trace); font-weight: 500; font-size: 15px; }
.vx-foot a .arr { transition: transform .25s var(--ease); }
.vx-foot a:hover .arr { transform: translateX(4px); }
/* the story plays in order each time a sector opens */
@keyframes vxIn { from { opacity: 0; transform: translateY(10px) scale(.97); } }
html.js .vx-sig li, html.js .vx-next { animation: vxIn .6s var(--ease) both; }
html.js .vx-sig li:nth-child(1) { animation-delay: 1.1s; }
html.js .vx-sig li:nth-child(2) { animation-delay: 1.8s; }
html.js .vx-sig li:nth-child(3) { animation-delay: 2.5s; }
html.js .vx-sig li:nth-child(4) { animation-delay: 3.2s; }
html.js .vx-next { animation-delay: 4.3s; }
html.js .vx-foot { animation: jrIn .5s var(--ease) both; }
@keyframes jrIn { from { opacity: 0; } }
@media (min-width: 761px) {
  html.js .vx-p { position: absolute; inset: 0; padding: 0; }
  html.js .vx-sig { display: block; }
  html.js .vx-sig li { position: absolute; width: min(206px, 30%); }
  html.js .vx-s0 { inset-block-start: 62px; inset-inline-start: 22px; }
  html.js .vx-s1 { inset-block-start: 268px; inset-inline-start: 22px; }
  html.js .vx-s2 { inset-block-start: 112px; inset-inline-end: 22px; }
  html.js .vx-s3 { inset-block-start: 318px; inset-inline-end: 22px; }
  html.js .vx-next { position: absolute; inset-block-start: 430px; left: 50%; width: 320px; margin: 0 0 0 -160px; }
  html[dir="rtl"].js .vx-next { left: auto; right: 50%; margin: 0 -160px 0 0; }
  html.js .vx-foot { position: absolute; inset: auto 0 0 0; margin: 0; padding: 20px 26px; }
}

/* ---------- goals: the chart stays while the steps scroll ---------- */
.gs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 72px; margin-top: 40px; }
.gs-stick { position: sticky; top: max(100px, calc(50vh - 270px)); align-self: start; }
.gs-stage { position: relative; height: min(540px, calc(100vh - 190px)); border-radius: 28px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(60% 70% at 50% 50%, rgba(118, 79, 246, .12), transparent 70%), linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); }
.gs-stage::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(80% 80% at 50% 50%, #000, transparent); mask: radial-gradient(80% 80% at 50% 50%, #000, transparent); }
.gs-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.gs-stage > .illus { inset-block: 16px auto; }
.gs-dots { position: absolute; inset-block-start: 22px; inset-inline-start: 24px; display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.gs-dots li { width: 22px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); transition: background .3s, width .3s; }
.gs-dots li.on { width: 38px; background: var(--trace); }
.gs-step { min-height: 64vh; display: flex; flex-direction: column; justify-content: center; padding: 40px 0; }
.gs-step:first-child { min-height: 50vh; justify-content: flex-start; padding-top: 70px; }
html.js .gs-step { opacity: .32; transition: opacity .45s var(--ease); }
html.js .gs-step.on { opacity: 1; }
.gs-k { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--mute); }
.gs-k b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(167, 135, 255, .5); color: var(--trace); font-weight: 500; }
.gs-step.on .gs-k b { background: linear-gradient(180deg, #8763f8, #6a42f0); color: #fff; box-shadow: 0 8px 26px -8px rgba(118, 79, 246, .9); }
.gs-step h3 { margin-top: 22px; font-size: clamp(26px, 2.4vw, 34px); font-weight: 500; line-height: 1.12; letter-spacing: -.03em; }
.gs-step p { margin-top: 16px; color: var(--mute); font-size: 17px; max-width: 460px; }
html:not(.js) .gs { grid-template-columns: 1fr; }
html:not(.js) .gs-stick { display: none; }

/* ---------- teams: a small view of what each team works with ---------- */
.tw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.tw-c { display: flex; flex-direction: column; padding: 14px 14px 28px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)); transition: border-color .3s, transform .3s var(--ease); }
.tw-c:hover { border-color: rgba(146, 107, 247, .45); transform: translateY(-3px); }
.tw-c > .tw-k, .tw-c > h3, .tw-c > p, .tw-c > .tw-go { margin-inline: 12px; }
.tw-ui { height: 292px; margin-bottom: 26px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(80% 70% at 50% 100%, rgba(118, 79, 246, .16), transparent 70%), rgba(9, 9, 13, .6); }
.tw-bar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--line); font-size: 10.5px; color: var(--mute); }
.tw-bar::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sphere); box-shadow: 0 0 8px var(--sphere); }
.illus-in { margin-inline-start: auto; font-style: normal; color: var(--dim); font-size: 9.5px; }
.tw-k { font-size: 11px; color: var(--trace); }
.tw-c h3 { margin-top: 12px; font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.02em; }
.tw-c p { margin-top: 10px; color: var(--mute); font-size: 15px; }
.tw-go { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: var(--trace); font-weight: 500; font-size: 14.5px; }
.tw-go .arr { transition: transform .25s var(--ease); }
.tw-c:hover .tw-go .arr { transform: translateX(4px); }
.mk-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mk-rules li { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 10px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.mk-rules i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; background: rgba(118, 79, 246, .35); color: var(--trace); font-style: normal; font-size: 12px; }
.mk-out { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-top: 14px; }
.mk-out b { font-size: 28px; font-weight: 500; letter-spacing: -.03em; color: var(--ink); }
.mk-out span { font-size: 13px; color: var(--mute); }
.mk-out .mk-j { flex-basis: 100%; margin-top: 6px; padding: 6px 10px; border-radius: 9px; background: rgba(118, 79, 246, .22); border: 1px solid rgba(167, 135, 255, .45); color: var(--trace); font-size: 12px; }
.en-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.en-src li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 4px; }
.en-src .ic { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); -webkit-mask: none; mask: none; position: relative; color: var(--mute); }
.en-src .ic::after { content: ""; position: absolute; inset: 6px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.en-src span { font-size: 13.5px; color: var(--ink); }
.en-src small { grid-column: 2; font-size: 11px; color: var(--dim); }
.en-src b { grid-column: 3; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: var(--trace); }
.en-src b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sphere); box-shadow: 0 0 0 3px rgba(146, 107, 247, .2); animation: enPulse 2.4s ease-in-out infinite; }
.en-src li:nth-child(2) b::before { animation-delay: .6s; }
.en-src li:nth-child(3) b::before { animation-delay: 1.2s; }
.en-src li:nth-child(4) b::before { animation-delay: 1.8s; }
@keyframes enPulse { 50% { box-shadow: 0 0 0 6px rgba(146, 107, 247, 0); } }
.ai-q, .ai-a { width: fit-content; max-width: 88%; padding: 7px 11px; border-radius: 12px; font-size: 12.5px; line-height: 1.35; }
.ai-q { margin-inline-start: auto; background: rgba(255, 255, 255, .07); color: var(--ink); border-end-end-radius: 4px; }
.ai-a { background: linear-gradient(180deg, rgba(60, 42, 128, .9), rgba(36, 26, 80, .9)); border: 1px solid rgba(167, 135, 255, .5); color: #fff; border-end-start-radius: 4px; }
.ai-ctx { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 10px 0; }
.ai-ctx div { padding: 6px 9px; border-radius: 9px; border: 1px dashed rgba(167, 135, 255, .35); background: rgba(118, 79, 246, .07); }
.ai-ctx dt { font: 500 9.5px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .05em; }
.ai-ctx dd { margin: 2px 0 0; font-size: 12.5px; color: var(--ink); }
.ai-ctx dd.ok { color: var(--trace); }
.sol-band { margin-top: 48px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(90deg, rgba(118, 79, 246, .1), rgba(255, 255, 255, .015)); }

@media (max-width: 1100px) {
  .vx-head { grid-template-columns: 1fr; gap: 26px; }
  .vx { grid-template-columns: minmax(0, 1fr); }
  .vx-side, .vx-stage { min-width: 0; }
  .vx-side { border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .vx-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; padding: 10px; gap: 6px; }
  .vx-list::-webkit-scrollbar { display: none; }
  .vx-list button { flex: none; grid-template-columns: 30px auto; gap: 10px; padding: 8px 16px 8px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; }
  .vx-list button > b { display: none; }
  .vx-ic { width: 30px; height: 30px; border-radius: 50%; }
  .vx-ic .ic { width: 15px; height: 15px; }
  .vx-list button.on { background: rgba(118, 79, 246, .14); border-color: rgba(167, 135, 255, .45); }
  .vx-k { display: none; }
  .vx-more, .vx-key { display: none; }
  .gs { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 28px; }
  .gs-stick { top: 76px; z-index: 2; margin-inline: calc(-1 * var(--gut)); padding: 0 var(--gut) 22px; background: linear-gradient(var(--bg) calc(100% - 22px), transparent); }
  .gs-stick::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 76px; background: var(--bg); opacity: 0; pointer-events: none; }
  .gs-stick.stuck::before { opacity: 1; }
  .gs-stage { height: 340px; border-radius: 24px; background-color: var(--bg); }
  .gs-step, .gs-step:first-child { min-height: 52vh; justify-content: center; padding: 26px 0; }
  .tw { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .vx-hero { padding-bottom: 40px; }
  .vx { border-radius: 24px; }
  .vx-stage { min-height: 0; }
  html.js .vx-p { padding: 300px 14px 18px; }
  .vx-sig { gap: 8px; }
  .vx-sig li, .vx-next { grid-template-columns: 26px minmax(0, 1fr); column-gap: 9px; padding: 10px 11px; border-radius: 14px; }
  .vx-sig .ic, .vx-next .ic { width: 26px; height: 26px; }
  .vx-sig .ic::after, .vx-next .ic::after { inset: 6px; }
  .vx-sig b, .vx-next b { font-size: 13px; }
  .vx-sig small, .vx-next small { font-size: 11px; }
  .vx-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .vx-foot p { font-size: 14.5px; }
  .gs-stage { height: 280px; border-radius: 22px; }
  .gs-step, .gs-step:first-child { min-height: 58vh; }
  .gs-step h3 { font-size: 24px; }
  .gs-step p { font-size: 15.5px; }
  .tw-ui { height: auto; min-height: 210px; }
  .sol-band { margin-top: 36px; padding: 20px; }
}
@media (max-width: 380px) {
  .vx-sig { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .vx-sig li, html.js .vx-next, html.js .vx-foot { animation: none; }
  .en-src b::before { animation: none; }
}

/* ---------- Arabic: small labels move to the Arabic sans (the mono face has no Arabic) ---------- */
html[lang|="ar"] .zcard .pc-rows b, html[lang|="ar"] .ev time, html[lang|="ar"] .jn small, html[lang|="ar"] .jn em, html[lang|="ar"] .ms-path span, html[lang|="ar"] .tm-line b, html[lang|="ar"] .pf-keys b { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
html[lang|="ar"] .jn small { font-size: 11px; }
html[lang|="ar"] .tm-line b { font-size: 13px; }
html[lang|="ar"] .pf-keys bdi { font-family: var(--mono); }
html[dir="rtl"] .jn li { padding: 10px 0 10px 12px; }
html[lang|="ar"] main p { text-wrap: pretty; }
html[lang|="ar"] main h2 { text-wrap: balance; }
html[lang|="ar"] .ms-rev b { white-space: nowrap; letter-spacing: 0; }