.vp-section {
    --vp-ink: #161329;
    --vp-muted: #67627a;
    --vp-purple: #7c3aed;
    --vp-violet: #9c5cff;
    --vp-pink: #df4fc2;
    --vp-blue: #4467e8;
    --vp-line: #e6e1f0;
    position: relative;
    overflow: hidden;
    padding: 112px 0;
    color: var(--vp-ink);
}

.vp-section *,
.vp-section *::before,
.vp-section *::after { box-sizing: border-box; }

.vp-heading { max-width: 760px; margin: 0 auto 58px; }
.vp-heading h2,
.vp-team-intro h2 { color: var(--vp-ink); font-size: clamp(38px, 4.5vw, 62px); line-height: 1.04; letter-spacing: -0.045em; margin: 13px 0 20px; }
.vp-heading p,
.vp-team-intro p { color: var(--vp-muted); font-size: 18px; line-height: 1.7; margin: 0 auto; }
.vp-heading .vp-lead { color: var(--vp-ink); font-size: 21px; font-weight: 700; margin-bottom: 6px; }
.vp-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--vp-purple); font-size: 13px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.vp-eyebrow::before { width: 22px; height: 2px; content: ""; background: linear-gradient(90deg, var(--vp-purple), var(--vp-pink)); border-radius: 2px; }

/* Platform architecture */
.vp-architecture { background: radial-gradient(circle at 92% 48%, rgba(81,99,255,.1), transparent 31%), radial-gradient(circle at 7% 56%, rgba(137,65,255,.1), transparent 28%), linear-gradient(180deg, #fbfbff 0%, #f7f8ff 58%, #fff 100%); }
.vp-architecture::before { position: absolute; inset: 280px 0 150px; content: ""; background-image: radial-gradient(rgba(119,78,246,.18) .7px, transparent .7px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent); pointer-events: none; }
.vp-platform-map { position: relative; max-width: 1200px; margin: 0 auto; isolation: isolate; }
.vp-map-label { display: flex; align-items: center; justify-content: center; gap: 10px; color: #564a87; font-size: 12px; font-weight: 850; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.vp-map-label::before, .vp-map-label::after { display: block; width: min(15vw,150px); min-width: 28px; height: 2px; flex: 0 0 min(15vw,150px); content: ""; background: linear-gradient(90deg, rgba(132,111,211,0), #aa9ddb); border-radius: 2px; opacity: 1; visibility: visible; transform: translateZ(0); }
.vp-map-label::after { background: linear-gradient(90deg, #aa9ddb, rgba(132,111,211,0)); }
.vp-map-label i { color: #7768c4; font-size: 15px; }
.vp-channel-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 13px; margin: 22px 0 0; }
.vp-channel { position: relative; display: flex; min-height: 94px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(255,255,255,.88); border: 1px solid #e6e5f1; border-radius: 15px; box-shadow: 0 10px 30px rgba(40,32,84,.065); color: #302b55; font-size: 12px; font-weight: 750; transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; backdrop-filter: blur(10px); }
.vp-channel:hover { transform: translateY(-5px); border-color: #c9b5ff; box-shadow: 0 17px 38px rgba(76,48,147,.14); }
.vp-channel b { display: grid; width: 38px; height: 38px; place-items: center; background: linear-gradient(145deg, #f2ecff, #fff); border-radius: 11px; box-shadow: inset 0 0 0 1px rgba(123,69,255,.07); }
.vp-channel i { color: #7049f5; font-size: 19px; }
.vp-channel:nth-child(2) b { background: #ecfbf1; }.vp-channel:nth-child(2) i { color: #20b95b; }
.vp-channel:nth-child(4) b, .vp-channel:nth-child(6) b { background: #edf4ff; }.vp-channel:nth-child(4) i, .vp-channel:nth-child(6) i { color: #347af1; }
.vp-channel:nth-child(7) b { background: #fff0f6; }.vp-channel:nth-child(7) i { color: #f069a2; }
.vp-channel em { position: absolute; bottom: -5px; width: 8px; height: 8px; background: #7545ff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 10px rgba(117,69,255,.75); }
.vp-input-network, .vp-output-network { display: block; width: 100%; height: 82px; overflow: visible; }
.vp-output-network { height: 65px; }
.vp-input-network path, .vp-output-network path { fill: none; vector-effect: non-scaling-stroke; }
.vp-trace-base path { stroke: #cfc9ed; stroke-width: 1.15; }
.vp-trace-energy path { stroke: #8657ff; stroke-width: 2; stroke-dasharray: 1 15; stroke-linecap: round; animation: vp-trace-in 1.8s linear infinite; }
.vp-trace-energy path:nth-child(2n) { animation-delay: -.9s; }.vp-trace-energy path:nth-child(3n) { animation-delay: -.35s; }
.vp-trace-energy-out path { animation-name: vp-trace-out; }
@keyframes vp-trace-in { to { stroke-dashoffset: -32; } } @keyframes vp-trace-out { to { stroke-dashoffset: -32; } }
.vp-core { position: relative; z-index: 2; padding: 20px 52px 25px; overflow: visible; background: radial-gradient(circle at 50% -18%, rgba(134,76,255,.36), transparent 39%), linear-gradient(145deg, #21105b, #160d46 58%, #111a54); border: 1px solid #714dff; border-radius: 25px; box-shadow: 0 34px 85px rgba(39,24,109,.28), inset 0 1px rgba(255,255,255,.24), 0 0 0 3px rgba(113,77,255,.08); }
.vp-core::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 28px 28px; border-radius: inherit; mask-image: linear-gradient(#000, transparent 90%); pointer-events: none; }
.vp-core::after { position: absolute; inset: -2px; z-index: -1; content: ""; border: 1px solid rgba(160,106,255,.55); border-radius: 27px; filter: drop-shadow(0 0 15px rgba(110,65,255,.42)); pointer-events: none; }
.vp-core-glow { position: absolute; top: 47%; z-index: -2; width: 180px; height: 130px; background: radial-gradient(ellipse, rgba(115,71,255,.55), rgba(115,71,255,0) 68%); filter: blur(13px); animation: vp-side-breathe 3.2s ease-in-out infinite; }
.vp-core-glow-left { right: 94%; }.vp-core-glow-right { left: 94%; animation-delay: -1.6s; }
@keyframes vp-side-breathe { 50% { opacity: .48; transform: scale(1.18); } }
.vp-core-brand { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 13px; padding: 0 0 19px; color: #fff; }
.vp-core-brand > div { display: flex; flex-direction: column; align-items: center; text-align: center; }.vp-core-brand strong { font-size: 26px; font-weight: 850; letter-spacing: .16em; line-height: 1; }.vp-core-brand small { margin-top: 6px; color: #b7abe6; font-size: 11px; letter-spacing: .04em; }
.vp-layer-stack { position: relative; z-index: 1; display: grid; gap: 8px; }
.vp-layer { --vp-layer-accent: #d793ff; display: grid; grid-template-columns: 58px 235px 1fr; align-items: center; gap: 16px; min-height: 78px; padding: 11px 15px; background: linear-gradient(90deg, rgba(255,255,255,.065), rgba(255,255,255,.035)); border: 1px solid rgba(194,178,255,.19); border-radius: 14px; box-shadow: inset 0 1px rgba(255,255,255,.035); transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.vp-layer::after { position: absolute; right: 22px; width: 5px; height: 5px; content: ""; background: var(--vp-layer-accent); border-radius: 50%; box-shadow: 0 0 14px var(--vp-layer-accent); opacity: 0; }
.vp-platform-map.is-active .vp-layer { animation: vp-layer-wave 5.2s ease-in-out infinite; }.vp-platform-map.is-active .vp-layer:nth-child(2) { animation-delay: 1.3s; }.vp-platform-map.is-active .vp-layer:nth-child(3) { animation-delay: 2.6s; }.vp-platform-map.is-active .vp-layer:nth-child(4) { animation-delay: 3.9s; }
@keyframes vp-layer-wave { 0%,18%,100% { border-color: rgba(194,178,255,.19); transform: translateX(0); } 8% { border-color: color-mix(in srgb, var(--vp-layer-accent) 68%, transparent); transform: translateX(3px); } }
.vp-layer:hover { background: rgba(255,255,255,.1); border-color: rgba(210,188,255,.45); transform: translateX(4px) !important; }
.vp-layer-icon { display: grid; width: 50px; height: 50px; place-items: center; background: linear-gradient(145deg, rgba(145,67,255,.22), rgba(113,61,222,.08)); border: 1px solid rgba(208,149,255,.2); border-radius: 12px; box-shadow: inset 0 0 18px rgba(151,74,255,.08); color: var(--vp-layer-accent); font-size: 22px; }
.vp-layer-copy { display: flex; min-width: 0; flex-direction: column; gap: 2px; padding-right: 16px; border-right: 1px solid rgba(255,255,255,.13); }
.vp-layer-copy span { color: var(--vp-layer-accent); font-size: 10px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.vp-layer-copy strong { color: #fff; font-size: 15px; font-weight: 650; }
.vp-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.vp-pills span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; color: #eeeaff; font-size: 11px; font-weight: 600; white-space: nowrap; }
.vp-pills i { color: var(--vp-layer-accent); font-size: 11px; }
.vp-layer-automation { --vp-layer-accent: #83b5ff; }.vp-layer-data { --vp-layer-accent: #4ce1d3; }.vp-layer-connect { --vp-layer-accent: #ff79bd; }
.vp-action-row { display: grid; grid-template-columns: repeat(8, 1fr); gap: 9px; margin: 19px -35px 0; }
.vp-action-row span { display: flex; min-height: 50px; align-items: center; justify-content: center; gap: 8px; padding: 9px 7px; background: rgba(255,255,255,.92); border: 1px solid #e4e3ef; border-radius: 12px; box-shadow: 0 8px 24px rgba(42,35,91,.06); color: #373257; font-size: 10px; font-weight: 750; white-space: nowrap; }
.vp-action-row i { color: #7647f5; font-size: 15px; }.vp-action-row span:nth-child(2) i { color: #39c9c8; }.vp-action-row span:nth-child(4) i { color: #41bf5c; }.vp-action-row span:nth-child(5) i { color: #f0a900; }.vp-action-row span:nth-child(8) i { color: #ff4b7e; }

/* Animated operation */
.vp-operation { background: #181126; color: #fff; }
.vp-operation::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 55px 55px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.vp-heading-light { position: relative; }
.vp-heading-light h2 { color: #fff; }
.vp-heading-light p { color: #b9b0c7; }
.vp-heading-light .vp-eyebrow { color: #c785ff; }
.vp-usecase-tabs { position: relative; display: flex; width: max-content; max-width: 100%; gap: 5px; margin: 0 auto 35px; padding: 5px; overflow-x: auto; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); border-radius: 100px; scrollbar-width: none; }
.vp-usecase-tabs::-webkit-scrollbar { display: none; }
.vp-usecase-tab { flex: 0 0 auto; padding: 11px 17px; background: transparent; border: 0; border-radius: 100px; color: #aaa1b7; font-size: 13px; font-weight: 700; cursor: pointer; transition: .25s ease; }
.vp-usecase-tab:hover { color: #fff; }
.vp-usecase-tab.is-active { background: linear-gradient(135deg, #8a46f0, #c34fc7); box-shadow: 0 7px 22px rgba(132,54,221,.35); color: #fff; }
.vp-operation-board { position: relative; display: grid; grid-template-columns: 235px 1fr; gap: 32px; align-items: stretch; max-width: 1150px; margin: 0 auto; padding: 30px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 26px; box-shadow: 0 30px 70px rgba(0,0,0,.22); }
.vp-request-card { display: flex; min-height: 250px; flex-direction: column; justify-content: center; padding: 26px; background: linear-gradient(150deg, #fbf9ff, #eee5ff); border-radius: 19px; color: var(--vp-ink); }
.vp-request-avatar { display: grid; width: 45px; height: 45px; place-items: center; margin-bottom: 22px; background: #fff; border-radius: 14px; box-shadow: 0 8px 20px rgba(69,38,114,.13); color: var(--vp-purple); }
.vp-request-card > span { color: #7f778c; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.vp-request-card blockquote { margin: 9px 0 22px; color: #211731; font-size: 21px; font-weight: 750; line-height: 1.35; }
.vp-request-card small { display: flex; align-items: center; gap: 7px; color: #6d647c; font-weight: 600; }
.vp-request-card small i { color: #2dbb63; font-size: 16px; }
.vp-operation-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.vp-step { position: relative; display: flex; min-height: 118px; flex-direction: column; justify-content: center; padding: 19px; overflow: hidden; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.09); border-radius: 15px; transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.vp-step > span { position: absolute; top: 12px; right: 13px; color: rgba(255,255,255,.19); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.vp-step i { margin-bottom: 10px; color: #bc82fb; font-size: 19px; }
.vp-step strong { color: #fff; font-size: 14px; }
.vp-step small { margin-top: 2px; color: #968da2; font-size: 11px; }
.vp-step.is-live { background: rgba(137,70,240,.19); border-color: rgba(198,130,255,.65); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(103,48,183,.18); }
.vp-step.is-live::after { position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; content: ""; background: linear-gradient(90deg, #8549f0, #e15ec0); animation: vp-progress 2s linear infinite; transform-origin: left; }
.vp-operation-note { position: relative; display: flex; align-items: center; justify-content: center; gap: 11px; margin: 25px 0 0; color: #ddd5e8; font-size: 15px; font-weight: 650; text-align: center; }
.vp-operation-note span { width: 7px; height: 7px; background: #9a5cf6; border-radius: 50%; box-shadow: 0 0 0 5px rgba(154,92,246,.14); }
@keyframes vp-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Builder */
.vp-builder { background: radial-gradient(circle at 50% 60%, rgba(124,58,237,.07), transparent 40%), #fff; }
.vp-build-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 22px; max-width: 1160px; margin: 0 auto; }
.vp-build-grid::before { position: absolute; top: 35px; bottom: 35px; left: 50%; width: 1px; content: ""; background: linear-gradient(transparent, #ddd4ea 12%, #ddd4ea 88%, transparent); transform: translateX(-50%); }
.vp-build-card { position: relative; min-width: 0; padding: 30px; overflow: hidden; border: 1px solid var(--vp-line); border-radius: 25px; }
.vp-build-manual { background: linear-gradient(145deg, #fbfaff, #f5f1fb); box-shadow: 0 18px 50px rgba(43,28,73,.08); }
.vp-build-studio { background: radial-gradient(circle at 95% 0%, rgba(214,95,255,.25), transparent 36%), radial-gradient(circle at 0% 100%, rgba(113,62,200,.17), transparent 38%), linear-gradient(145deg, #1d102f, #371950); border-color: #4d286c; box-shadow: 0 25px 65px rgba(51,27,78,.2); color: #fff; }
.vp-build-studio::before { position: absolute; inset: 0; content: ""; background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px); background-size: 24px 24px; mask-image: linear-gradient(to bottom, black, transparent 72%); pointer-events: none; }
.vp-build-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 23px; color: var(--vp-ink); }
.vp-build-topline > div { display: flex; flex-direction: column; }
.vp-build-topline span { font-size: 13px; font-weight: 850; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; }
.vp-build-topline small { margin-top: 6px; color: #83798f; font-size: 12px; font-weight: 600; }
.vp-build-topline em { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: #ede7f7; border-radius: 100px; color: #675d76; font-size: 9px; font-style: normal; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.vp-build-studio .vp-build-topline { color: #fff; }
.vp-build-studio .vp-build-topline small { color: #b8a8c7; }
.vp-build-studio .vp-build-topline em { background: rgba(201,128,255,.14); color: #e3baff; }
.vp-mini-builder { position: relative; min-height: 250px; margin-bottom: 25px; padding: 58px 14px 20px; overflow: hidden; background-color: #fff; background-image: radial-gradient(#dcd3e8 .8px, transparent .8px); background-size: 14px 14px; border: 1px solid #e7e0ee; border-radius: 17px; box-shadow: inset 0 0 35px rgba(92,56,132,.035); }
.vp-canvas-bar { position: absolute; top: 0; right: 0; left: 0; display: flex; height: 38px; align-items: center; gap: 6px; padding: 0 12px; background: rgba(248,246,251,.95); border-bottom: 1px solid #ebe5f0; }
.vp-canvas-bar > span { width: 6px; height: 6px; background: #d7cfdf; border-radius: 50%; }
.vp-canvas-bar > b { margin-left: 5px; color: #746b80; font-size: 9px; font-weight: 700; }
.vp-canvas-bar > i { display: grid; width: 20px; height: 20px; place-items: center; background: #eee6fa; border-radius: 6px; color: var(--vp-purple); font-size: 8px; }
.vp-canvas-bar > b + i { margin-left: auto; }
.vp-flow-canvas { position: relative; display: grid; height: 172px; grid-template-columns: minmax(78px,1fr) 24px minmax(78px,1fr) 24px minmax(78px,1fr) 36px minmax(78px,1fr); grid-template-rows: 72px 18px 72px; align-content: center; }
.vp-flow-node { position: relative; z-index: 2; display: flex; height: 72px; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 5px; background: rgba(255,255,255,.96); border: 1px solid #e3dbea; border-radius: 11px; box-shadow: 0 7px 19px rgba(57,38,82,.08); color: #51475e; text-align: center; opacity: .72; transition: border-color .25s ease, box-shadow .25s ease, opacity .25s ease, background-color .25s ease; }
.vp-flow-node > i { display: grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; margin-bottom: 2px; background: #eee7fa; border-radius: 7px; color: var(--vp-purple); font-size: 9px; }
.vp-flow-node > span { display: block; width: 100%; overflow: hidden; color: #493b57; font-size: 8px; font-weight: 800; letter-spacing: .01em; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.vp-flow-node > strong { display: block; width: 100%; overflow: hidden; color: #8c8296; font-size: 6.2px; font-weight: 650; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.vp-flow-node > b { position: absolute; top: -5px; right: -5px; display: flex; width: 16px; height: 16px; align-items: center; justify-content: center; padding: 0; background: #fff; border: 1px solid #dfd5e8; border-radius: 50%; box-shadow: 0 3px 8px rgba(52,35,73,.1); color: #8b7a98; font-family: Arial, sans-serif; font-size: 7px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; }
.vp-flow-trigger { grid-column: 1; grid-row: 1 / 4; align-self: center; }
.vp-flow-agent { grid-column: 3; grid-row: 1 / 4; align-self: center; }
.vp-flow-condition { grid-column: 5; grid-row: 1 / 4; align-self: center; }
.vp-flow-approval { grid-column: 7; grid-row: 1; }
.vp-flow-action { grid-column: 7; grid-row: 3; }
.vp-flow-approval > i { background: #e8f6f1; color: #149873; }
.vp-flow-action > i { background: #e9efff; color: #4467e8; }
.vp-flow-condition > i { background: #fff2dc; color: #c67912; }
.vp-flow-link { position: relative; z-index: 1; height: 1px; align-self: center; background: #c9bed4; }
.vp-flow-link::after { position: absolute; top: -3px; right: 0; width: 7px; height: 7px; content: ""; border-top: 1px solid #a99bb6; border-right: 1px solid #a99bb6; transform: rotate(45deg); }
.vp-flow-link-one { grid-column: 2; grid-row: 1 / 4; }
.vp-flow-link-two { grid-column: 4; grid-row: 1 / 4; }
.vp-flow-branch { position: relative; z-index: 1; grid-column: 6; grid-row: 1 / 4; }
.vp-flow-branch::before { position: absolute; top: 36px; bottom: 36px; left: 14px; width: 1px; content: ""; background: #c9bed4; }
.vp-flow-branch > span { position: absolute; height: 1px; background: #c9bed4; }
.vp-branch-in { top: 50%; left: 0; width: 15px; }
.vp-branch-top, .vp-branch-bottom { left: 14px; width: calc(100% - 14px); }
.vp-branch-top { top: 36px; }
.vp-branch-bottom { bottom: 36px; }
.vp-branch-top::after, .vp-branch-bottom::after { position: absolute; top: -3px; right: 0; width: 7px; height: 7px; content: ""; border-top: 1px solid #a99bb6; border-right: 1px solid #a99bb6; transform: rotate(45deg); }
.vp-flow-runner { position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 8px; height: 8px; background: #8a4dec; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 3px rgba(138,77,236,.14), 0 0 12px #8a4dec; opacity: 0; pointer-events: none; will-change: transform; }
.vp-flow-node.is-receiving { background: #fdfbff; border-color: #9f6bea; box-shadow: 0 10px 25px rgba(124,58,237,.2), 0 0 0 3px rgba(124,58,237,.07); opacity: 1; }
.vp-flow-node.is-receiving > i { box-shadow: 0 0 0 4px rgba(124,58,237,.08); }
.vp-check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.vp-check-grid span { display: flex; align-items: center; color: #5d5669; font-size: 12px; font-weight: 650; }
.vp-check-grid span:last-child { grid-column: 1 / -1; }
.vp-check-grid i { display: inline-grid; width: 19px; height: 19px; flex: 0 0 19px; place-items: center; margin-right: 7px; background: #eae0f8; border-radius: 50%; color: var(--vp-purple); font-size: 9px; }
.vp-studio-prompt { position: relative; z-index: 1; min-height: 316px; margin-bottom: 21px; padding: 16px; overflow: hidden; background: rgba(8,4,15,.38); border: 1px solid rgba(255,255,255,.11); border-radius: 18px; box-shadow: inset 0 1px rgba(255,255,255,.025); }
.vp-studio-input { position: relative; z-index: 3; display: flex; min-height: 58px; align-items: center; gap: 9px; padding: 9px 9px 9px 14px; background: #fff; border: 1px solid rgba(255,255,255,.62); border-radius: 14px; box-shadow: 0 14px 34px rgba(4,1,9,.28); color: #33243f; transition: box-shadow .3s ease, transform .3s ease; }
.vp-build-studio.is-typing .vp-studio-input { box-shadow: 0 15px 38px rgba(4,1,9,.3), 0 0 0 3px rgba(197,104,255,.12); transform: translateY(-1px); }
.vp-studio-input > i { color: #a345eb; font-size: 13px; }
.vp-studio-typed { min-width: 0; overflow: hidden; color: #2b1d37; font-size: 11.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vp-studio-input > b { width: 1px; height: 17px; flex: 0 0 1px; background: #9a45df; animation: vp-caret .8s steps(1) infinite; }
.vp-build-studio.is-complete .vp-studio-input > b { opacity: 0; }
.vp-studio-input button { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; margin-left: auto; padding: 0; background: linear-gradient(135deg, #984aec, #d24fc1); border: 0; border-radius: 11px; box-shadow: 0 8px 19px rgba(125,54,193,.35); color: #fff; cursor: pointer; transition: transform .22s ease, box-shadow .22s ease; }
.vp-studio-input button:hover, .vp-studio-input button:focus-visible { box-shadow: 0 10px 24px rgba(139,57,211,.45); outline: none; transform: translateY(-2px); }
.vp-studio-input button:active { transform: translateY(0) scale(.95); }
@keyframes vp-caret { 50% { opacity: 0; } }
.vp-generation-status { display: grid; grid-template-columns: auto 70px; align-items: center; justify-content: space-between; gap: 12px; margin: 15px 2px 11px; color: #cbbbd8; font-size: 8.5px; font-weight: 650; letter-spacing: .025em; }
.vp-generation-status span { display: inline-flex; min-width: 0; align-items: center; }
.vp-generation-status strong { overflow: hidden; font-size: inherit; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vp-generation-status i { margin-right: 6px; color: #d795ff; }
.vp-build-studio.is-building .vp-generation-status i { animation: vp-spin 1.1s linear infinite; }
.vp-build-studio.is-complete .vp-generation-status i::before { content: "\f058"; }
.vp-build-studio.is-complete .vp-generation-status i { animation: none; color: #73dfbc; }
.vp-generation-meter { width: 70px; height: 3px; overflow: hidden; background: rgba(255,255,255,.1); border-radius: 5px; }
.vp-generation-meter b { display: block; width: var(--vp-studio-progress, 5%); height: 100%; background: linear-gradient(90deg, #9854ef, #e160c3); border-radius: inherit; box-shadow: 0 0 10px rgba(209,93,213,.48); transition: width .45s cubic-bezier(.2,.8,.2,1); }
@keyframes vp-spin { to { transform: rotate(360deg); } }
.vp-studio-workspace { display: grid; min-height: 195px; grid-template-columns: 112px minmax(0,1fr); gap: 9px; }
.vp-studio-build-list { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.vp-studio-build-list > span { display: grid; min-height: 39px; grid-template-columns: 24px minmax(0,1fr) 8px; align-items: center; gap: 6px; padding: 6px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; color: #9f92aa; opacity: .58; transform: translateX(-3px); transition: opacity .35s ease, transform .35s ease, background .35s ease, border-color .35s ease; }
.vp-studio-build-list > span > i { display: grid; width: 24px; height: 24px; place-items: center; background: rgba(196,115,255,.09); border-radius: 7px; color: #bd7af0; font-size: 8px; }
.vp-studio-build-list > span > b { overflow: hidden; font-size: 7.8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vp-studio-build-list > span > em { width: 6px; height: 6px; background: rgba(255,255,255,.16); border-radius: 50%; }
.vp-studio-build-list > span.is-building { background: rgba(174,93,245,.11); border-color: rgba(204,139,255,.25); color: #f1e9f7; opacity: 1; transform: translateX(0); }
.vp-studio-build-list > span.is-building > em { background: #ce82ff; box-shadow: 0 0 0 3px rgba(206,130,255,.1); animation: vp-dot-pulse .75s ease-in-out infinite alternate; }
.vp-studio-build-list > span.is-built { color: #e9e1ef; opacity: 1; transform: translateX(0); }
.vp-studio-build-list > span.is-built > em { background: #69d9b3; box-shadow: 0 0 0 3px rgba(105,217,179,.08); }
@keyframes vp-dot-pulse { to { box-shadow: 0 0 0 6px rgba(206,130,255,0); } }
.vp-studio-preview { position: relative; min-width: 0; min-height: 195px; padding: 11px; overflow: hidden; background: linear-gradient(145deg, #fbfaff, #efe9f6); border: 1px solid rgba(255,255,255,.54); border-radius: 12px; box-shadow: 0 13px 28px rgba(2,0,8,.24); color: #34263f; }
.vp-preview-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid #dfd7e8; color: #554360; font-size: 7px; font-weight: 750; }
.vp-preview-head span { display: inline-flex; align-items: center; gap: 5px; }
.vp-preview-head i { color: #9e4ce3; }
.vp-preview-head em { padding: 3px 6px; background: #ebe4f3; border-radius: 100px; color: #897593; font-size: 5.5px; font-style: normal; text-transform: uppercase; }
.vp-preview-agent { display: flex; align-items: center; gap: 7px; margin: 9px 0 7px; padding: 7px; background: #fff; border: 1px solid #e4dce9; border-radius: 9px; box-shadow: 0 5px 12px rgba(47,29,66,.05); opacity: .2; transform: translateY(4px); transition: .4s ease; }
.vp-preview-agent > i { display: grid; width: 25px; height: 25px; flex: 0 0 25px; place-items: center; background: #eee6fa; border-radius: 7px; color: #8f47d8; font-size: 9px; }
.vp-preview-agent div { display: flex; min-width: 0; flex-direction: column; }
.vp-preview-agent b { overflow: hidden; color: #3b2b43; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.vp-preview-agent small { overflow: hidden; color: #918497; font-size: 5px; text-overflow: ellipsis; white-space: nowrap; }
.vp-preview-flow { display: flex; align-items: center; gap: 3px; margin-bottom: 7px; opacity: .18; transform: translateY(4px); transition: .4s ease; }
.vp-preview-flow span { flex: 1; padding: 5px 2px; background: #fff; border: 1px solid #e4dce9; border-radius: 5px; color: #76677f; font-size: 5px; font-weight: 700; text-align: center; }
.vp-preview-flow i { position: relative; width: 8px; height: 1px; flex: 0 0 8px; background: #bfb1c8; }
.vp-preview-flow i::after { position: absolute; top: -2px; right: 0; width: 4px; height: 4px; content: ""; border-top: 1px solid #a99ab3; border-right: 1px solid #a99ab3; transform: rotate(45deg); }
.vp-preview-table { display: grid; grid-template-columns: 1.1fr .8fr .6fr; gap: 3px; margin-bottom: 7px; padding: 5px; background: #fff; border: 1px solid #e4dce9; border-radius: 6px; opacity: .18; transform: translateY(4px); transition: .4s ease; }
.vp-preview-table span { height: 15px; background: repeating-linear-gradient(to bottom, #ded5e5 0 2px, transparent 2px 5px); border-right: 1px solid #eee9f1; }
.vp-preview-widget { display: flex; align-items: center; gap: 5px; padding: 6px; background: #2e1743; border-radius: 7px; color: #fff; opacity: .18; transform: translateY(4px); transition: .4s ease; }
.vp-preview-widget > i { color: #d28bff; font-size: 7px; }
.vp-preview-widget > span { font-size: 5.5px; font-weight: 650; }
.vp-preview-widget > b { width: 12px; height: 12px; margin-left: auto; background: linear-gradient(135deg, #934aed, #d150bd); border-radius: 4px; }
.vp-preview-agent.is-built, .vp-preview-flow.is-built, .vp-preview-table.is-built, .vp-preview-widget.is-built { opacity: 1; transform: translateY(0); }
.vp-preview-agent.is-building, .vp-preview-flow.is-building, .vp-preview-table.is-building, .vp-preview-widget.is-building { opacity: .58; transform: translateY(0); filter: saturate(1.2); }
.vp-preview-ready { position: absolute; right: 9px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; background: #e8f7f1; border: 1px solid #cfece1; border-radius: 100px; color: #188563; font-size: 5.5px; font-weight: 800; opacity: 0; transform: translateY(5px); transition: .4s ease; }
.vp-build-studio.is-complete .vp-preview-ready { opacity: 1; transform: translateY(0); }
.vp-studio-spark { position: absolute; width: 4px; height: 4px; background: #a653ee; border-radius: 50%; box-shadow: 0 0 9px #bc6cff; opacity: 0; pointer-events: none; }
.vp-studio-spark-one { top: 29%; left: 55%; }
.vp-studio-spark-two { right: 19%; bottom: 34%; }
.vp-build-studio.is-building .vp-studio-spark { animation: vp-studio-spark 1.25s ease-in-out infinite; }
.vp-build-studio.is-building .vp-studio-spark-two { animation-delay: .55s; }
@keyframes vp-studio-spark { 0% { opacity: 0; transform: scale(.4) translateY(7px); } 45% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7) translateY(-7px); } }
.vp-build-studio > p { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0; color: #cdbed7; font-size: 12px; line-height: 1.7; }
.vp-build-studio > p i { color: #cf8aff; font-size: 11px; }
.vp-platform-converge { position: relative; display: grid; width: min(77%, 870px); height: 62px; grid-template-columns: 1fr 42px 1fr; align-items: end; margin: 0 auto; }
.vp-platform-converge span { height: 32px; border-bottom: 1px solid #cfc5da; }
.vp-platform-converge span:first-child { border-right: 1px solid #cfc5da; border-radius: 0 0 13px; }
.vp-platform-converge span:last-child { border-left: 1px solid #cfc5da; border-radius: 0 0 0 13px; }
.vp-platform-converge b { display: grid; width: 42px; height: 42px; place-items: center; margin-bottom: -20px; background: #fff; border: 1px solid #d8cfdf; border-radius: 50%; box-shadow: 0 8px 22px rgba(52,33,75,.1); color: var(--vp-purple); font-size: 12px; }
.vp-builder.is-visible .vp-platform-converge b { animation: vp-arrow-pulse 2s ease-in-out infinite; }
@keyframes vp-arrow-pulse { 50% { box-shadow: 0 8px 22px rgba(52,33,75,.1), 0 0 0 8px rgba(124,58,237,.07); transform: translateY(3px); } }
.vp-same-platform { max-width: 820px; margin: 30px auto 0; text-align: center; }
.vp-same-platform small { display: block; margin-bottom: 15px; color: #62566f; font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.vp-same-platform div { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.vp-same-platform span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; background: #fff; border: 1px solid #e5deeb; border-radius: 100px; box-shadow: 0 7px 20px rgba(45,29,67,.055); color: #55495f; font-size: 11px; font-weight: 700; }
.vp-same-platform i { color: var(--vp-purple); font-size: 10px; }

/* Human control */
.vp-team { padding-top: 112px; background: #181126; }
.vp-team::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 12% 22%, rgba(132,70,230,.2), transparent 32%), radial-gradient(circle at 88% 78%, rgba(210,76,187,.12), transparent 30%); pointer-events: none; }
.vp-team-shell { position: relative; display: grid; grid-template-columns: .72fr 1.28fr; gap: 62px; align-items: center; padding: 68px; overflow: hidden; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 30px; box-shadow: 0 30px 80px rgba(0,0,0,.2); }
.vp-team-shell::after { position: absolute; top: -80px; right: 12%; width: 300px; height: 300px; content: ""; background: #8954f0; border-radius: 50%; filter: blur(140px); opacity: .13; pointer-events: none; }
.vp-team-intro h2 { color: #fff; }
.vp-team-intro p { color: #b9b0c7; }
.vp-team .vp-eyebrow { color: #c785ff; }
.vp-team-intro h2 { font-size: clamp(36px, 4vw, 54px); }
.vp-control-statement { display: flex; align-items: center; gap: 11px; margin-top: 28px; color: #e4dced; font-size: 13px; font-weight: 700; }
.vp-control-statement i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; background: rgba(194,126,255,.14); border-radius: 11px; color: #c785ff; }
.vp-team-balance { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(220px,1fr) 110px minmax(250px,1.12fr); align-items: center; isolation: isolate; }
.vp-team-card { position: relative; min-width: 0; padding: 24px; overflow: hidden; background: linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.048)); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; box-shadow: 0 24px 52px rgba(5,2,12,.25); transition: transform .55s cubic-bezier(.2,.8,.2,1), border-color .55s ease, box-shadow .55s ease; }
.vp-team-card::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 15% 0%, rgba(184,105,255,.16), transparent 42%); opacity: 0; transition: opacity .55s ease; pointer-events: none; }
.vp-team-card.is-active { z-index: 2; border-color: rgba(195,133,255,.38); box-shadow: 0 28px 70px rgba(64,27,112,.32), inset 0 1px rgba(255,255,255,.08); transform: translateY(-7px); }
.vp-team-card.is-active::before { opacity: 1; }
.vp-team-card-head { position: relative; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding-bottom: 19px; border-bottom: 1px solid rgba(255,255,255,.1); }
.vp-team-card-head > i { display: grid; width: 44px; height: 44px; place-items: center; background: rgba(194,126,255,.14); border: 1px solid rgba(209,161,255,.13); border-radius: 13px; color: #ca8dff; font-size: 17px; }
.vp-team-card-head div { display: flex; min-width: 0; flex-direction: column; }
.vp-team-card-head span { color: #aaa0b8; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.vp-team-card-head strong { overflow: hidden; color: #fff; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.vp-team-card-head em { display: inline-flex; align-items: center; gap: 6px; color: #c8bdcf; font-size: 8px; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vp-team-card-head em b { width: 6px; height: 6px; background: #8d5fff; border-radius: 50%; box-shadow: 0 0 0 4px rgba(141,95,255,.11); }
.vp-team-card ul { position: relative; display: grid; gap: 7px; margin: 18px 0; padding: 0; list-style: none; }
.vp-team-human ul { grid-template-columns: 1fr 1fr; }
.vp-team-card li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 9px 10px; background: rgba(255,255,255,.035); border: 1px solid transparent; border-radius: 10px; color: #d8d0e1; font-size: 10px; font-weight: 650; opacity: .67; transform: translateY(3px); transition: opacity .35s ease, transform .35s ease, background .35s ease, border-color .35s ease; }
.vp-team-card li i { width: 15px; flex: 0 0 15px; color: #b875f1; font-size: 11px; text-align: center; }
.vp-team-card.is-active li { opacity: 1; transform: translateY(0); }
.vp-team-card.is-active li:nth-child(2) { transition-delay: .06s; }
.vp-team-card.is-active li:nth-child(3) { transition-delay: .12s; }
.vp-team-card.is-active li:nth-child(4) { transition-delay: .18s; }
.vp-team-card.is-active li:nth-child(5) { transition-delay: .24s; }
.vp-team-card.is-active li:nth-child(6) { transition-delay: .30s; }
.vp-team-card.is-active li:nth-child(7) { transition-delay: .36s; }
.vp-team-card.is-active li:nth-child(8) { transition-delay: .42s; }
.vp-team-human .vp-team-card-head > i { background: rgba(84,119,236,.15); border-color: rgba(125,153,255,.15); color: #8ca4ff; }
.vp-team-human .vp-team-card-head em b { background: #5ed7b2; box-shadow: 0 0 0 4px rgba(94,215,178,.1); }
.vp-team-human li i { color: #7795ff; }
.vp-team-human.is-active { border-color: rgba(112,143,255,.38); box-shadow: 0 28px 70px rgba(30,48,113,.3), inset 0 1px rgba(255,255,255,.08); }
.vp-team-human::before { background: radial-gradient(circle at 15% 0%, rgba(84,119,236,.17), transparent 42%); }
.vp-card-foot { position: relative; display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); color: #90869d; font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.vp-card-foot i { color: #c27cf8; }
.vp-team-human .vp-card-foot i { color: #6fe0bd; }
.vp-handoff { position: relative; z-index: 3; display: flex; min-width: 0; flex-direction: column; align-items: center; gap: 9px; color: #a99fb5; font-size: 8px; font-weight: 750; letter-spacing: .08em; line-height: 1.45; text-align: center; text-transform: uppercase; }
.vp-handoff small, .vp-handoff strong { display: block; width: 100%; margin: 0; line-height: inherit; text-align: center; }
.vp-handoff-track { position: relative; width: 100%; height: 48px; }
.vp-handoff-track::before { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; content: ""; background: linear-gradient(90deg, rgba(184,105,255,.25), rgba(255,255,255,.32), rgba(112,143,255,.25)); }
.vp-handoff-track > b { position: absolute; top: 50%; left: 5%; width: 5px; height: 5px; background: #d092ff; border-radius: 50%; box-shadow: 0 0 10px #bf78fb; opacity: 0; transform: translateY(-50%); }
.vp-handoff-track > b:nth-child(2) { animation-delay: .7s; }
.vp-handoff-track > b:nth-child(3) { animation-delay: 1.4s; }
.vp-handoff-track > span { position: absolute; top: 50%; left: 50%; display: grid; width: 46px; height: 46px; place-items: center; background: linear-gradient(135deg, #9259ed, #b74fc3); border: 6px solid #251832; border-radius: 50%; box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 9px 25px rgba(104,45,159,.36); color: #fff; transform: translate(-50%,-50%); }
.vp-handoff strong { color: #d8cfdf; font-size: 8px; letter-spacing: .1em; white-space: normal; }
.vp-team-balance.is-visible .vp-handoff-track > b { animation: vp-handoff-dot 2.1s linear infinite; }
@keyframes vp-handoff-dot { 0% { left: 4%; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { left: 92%; opacity: 0; } }

@media (max-width: 1199px) {
    .vp-layer { grid-template-columns: 50px 190px 1fr; }
    .vp-core { padding-right: 30px; padding-left: 30px; }
    .vp-action-row { margin-right: 0; margin-left: 0; }
    .vp-team-shell { grid-template-columns: 1fr; gap: 45px; }
    .vp-team-intro { max-width: 700px; }
    .vp-team-balance { max-width: 850px; width: 100%; margin: 0 auto; }
}

@media (max-width: 991px) {
    .vp-section { padding: 88px 0; }
    .vp-channel-row { grid-template-columns: repeat(4, 1fr); }
    .vp-input-network, .vp-output-network { height: 52px; background: linear-gradient(90deg, transparent calc(50% - .5px), #9672ee calc(50% - .5px), #9672ee calc(50% + .5px), transparent calc(50% + .5px)); }
    .vp-input-network path, .vp-output-network path { display: none; }
    .vp-layer { grid-template-columns: 46px 1fr; }
    .vp-pills { grid-column: 1 / -1; padding-left: 62px; }
    .vp-action-row { grid-template-columns: repeat(4, 1fr); }
    .vp-operation-board { grid-template-columns: 1fr; }
    .vp-request-card { min-height: 0; }
    .vp-operation-track { grid-template-columns: repeat(3, 1fr); }
    .vp-build-grid { grid-template-columns: 1fr; gap: 18px; }
    .vp-build-grid::before { display: none; }
    .vp-platform-converge { width: 60%; }
    .vp-team-shell { padding: 48px; }
}

@media (max-width: 767px) {
    .vp-section { padding: 74px 0; }
    .vp-heading { margin-bottom: 42px; }
    .vp-heading h2, .vp-team-intro h2 { font-size: 38px; }
    .vp-heading p, .vp-team-intro p { font-size: 16px; }
    .vp-heading .vp-lead { font-size: 18px; }
    .vp-channel-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .vp-channel:last-child { grid-column: 1 / -1; }
    .vp-core { padding: 18px 10px 12px; border-radius: 21px; }
    .vp-core-brand { padding-bottom: 17px; }
    .vp-core-brand strong { font-size: 20px; }
    .vp-core-brand small { max-width: 210px; font-size: 9px; }
    .vp-layer { grid-template-columns: 42px 1fr; gap: 10px; padding: 15px 13px; }
    .vp-layer-icon { width: 40px; height: 40px; }
    .vp-layer-copy strong { font-size: 13px; }
    .vp-pills { padding-left: 52px; }
    .vp-pills span { padding: 7px 9px; font-size: 10px; }
    .vp-action-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .vp-action-row span { justify-content: flex-start; padding-left: 14px; }
    .vp-usecase-tabs { width: 100%; border-radius: 15px; }
    .vp-operation-board { gap: 16px; padding: 16px; border-radius: 20px; }
    .vp-operation-track { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .vp-step { min-height: 112px; padding: 14px; }
    .vp-step strong { font-size: 12px; }
    .vp-build-card { padding: 24px; }
    .vp-check-grid { grid-template-columns: 1fr; }
    .vp-check-grid span:last-child { grid-column: auto; }
    .vp-platform-converge { width: 82%; }
    .vp-team { padding-top: 74px; }
    .vp-team-shell { gap: 35px; padding: 34px 22px; border-radius: 22px; }
    .vp-team-balance { grid-template-columns: 1fr; }
    .vp-handoff { height: 92px; justify-content: center; }
    .vp-handoff-track { width: 48px; height: 62px; }
    .vp-handoff-track::before { top: 0; left: 50%; width: 1px; height: 100%; background: linear-gradient(rgba(184,105,255,.25), rgba(255,255,255,.32), rgba(112,143,255,.25)); }
    .vp-handoff-track > b { top: 4%; left: 50%; transform: translateX(-50%); }
    .vp-handoff-track > span { top: 50%; left: 50%; }
    .vp-team-balance.is-visible .vp-handoff-track > b { animation-name: vp-handoff-dot-mobile; }
    @keyframes vp-handoff-dot-mobile { 0% { top: 4%; left: 50%; opacity: 0; } 16% { opacity: 1; } 84% { opacity: 1; } 100% { top: 92%; left: 50%; opacity: 0; } }
    .vp-handoff small { display: none; }
}

@media (max-width: 420px) {
    .vp-map-label::before, .vp-map-label::after { width: 28px; min-width: 28px; flex-basis: 28px; }
    .vp-channel { min-height: 82px; }
    .vp-layer-copy { padding-right: 0; border-right: 0; }
    .vp-pills { padding-left: 0; }
    .vp-pills span { flex: 1 1 calc(50% - 7px); justify-content: center; white-space: normal; }
    .vp-operation-track { grid-template-columns: 1fr; }
    .vp-team-human ul { grid-template-columns: 1fr; }
    .vp-team-card-head { grid-template-columns: 42px 1fr; }
    .vp-team-card-head em { display: none; }
    .vp-build-card { padding: 19px; border-radius: 20px; }
    .vp-build-topline em { display: none; }
    .vp-mini-builder { min-height: 225px; }
    .vp-studio-prompt { min-height: 316px; padding: 12px; }
    .vp-studio-workspace { grid-template-columns: 92px minmax(0,1fr); gap: 6px; }
    .vp-studio-build-list > span { grid-template-columns: 20px minmax(0,1fr) 6px; gap: 4px; padding: 5px; }
    .vp-studio-build-list > span > i { width: 20px; height: 20px; }
    .vp-studio-build-list > span > b { font-size: 6.8px; }
    .vp-studio-preview { padding: 8px; }
    .vp-preview-flow { gap: 2px; }
    .vp-preview-flow i { width: 5px; flex-basis: 5px; }
    .vp-mini-builder { padding-right: 10px; padding-left: 10px; }
    .vp-flow-canvas { grid-template-columns: minmax(54px,1fr) 13px minmax(54px,1fr) 13px minmax(54px,1fr) 22px minmax(54px,1fr); }
    .vp-flow-node { min-height: 62px; grid-template-columns: 21px 1fr; column-gap: 5px; padding: 7px; }
    .vp-flow-node > i { width: 21px; height: 21px; font-size: 8px; }
    .vp-flow-node > span { font-size: 7px; }
    .vp-flow-node > strong { font-size: 5.8px; }
    .vp-flow-branch::before { left: 8px; }
    .vp-branch-in { width: 9px; }
    .vp-branch-top, .vp-branch-bottom { left: 8px; width: calc(100% - 8px); }
    .vp-platform-converge { width: 92%; }
    .vp-same-platform span { padding: 9px 11px; font-size: 10px; }
}

@media (max-width: 360px) {
    .vp-flow-canvas { grid-template-columns: minmax(44px,1fr) 9px minmax(44px,1fr) 9px minmax(44px,1fr) 17px minmax(44px,1fr); }
    .vp-flow-node { display: flex; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 5px; text-align: center; }
    .vp-flow-node > i { flex: 0 0 20px; }
    .vp-flow-node > strong { display: none; }
    .vp-flow-branch::before { left: 6px; }
    .vp-branch-in { width: 7px; }
    .vp-branch-top, .vp-branch-bottom { left: 6px; width: calc(100% - 6px); }
}

@media (prefers-reduced-motion: reduce) {
    .vp-section *, .vp-section *::before, .vp-section *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}