#hero .agent-visual {
    --flow-card: #ffffffeb;
    --flow-stroke: #d7e3f4;
    --flow-track: #bbd0ec;
    --flow-title: #203853;
    --flow-muted: #657a94;
    --flow-small: clamp(calc(var(--bs-body-font-size) * .62), 2.2cqi, calc(var(--bs-body-font-size) * .77));
    --flow-label: clamp(calc(var(--bs-body-font-size) * .72), 2.6cqi, calc(var(--bs-body-font-size) * .9));
    --flow-brand: clamp(var(--bs-body-font-size), 4cqi, calc(var(--bs-body-font-size) * 1.4));
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: 38rem;
    margin: 0 auto;
    padding-block: .5rem 0;
}
#hero .agent-visual-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-inline: 1rem; }
#hero .agent-visual-eyebrow { display: flex; align-items: center; gap: .55rem; font-size: var(--hero-detail); color: var(--hero-muted); }
#hero .agent-visual-eyebrow i { width: 6px; height: 6px; background: #4c83d5; border-radius: 50%; box-shadow: 0 0 0 4px #4c83d510; }
#hero .agent-motion-control { display: grid; place-items: center; width: 36px; height: 36px; padding: .5rem; border: 1px solid var(--flow-stroke); border-radius: 50%; background: #ffffff9c; color: #637a96; }
#hero .agent-motion-control:hover { background: #e9f2ff; color: #176bd8; }
#hero .agent-motion-control svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#hero .agent-play-icon { display: none; }
#hero .is-paused .agent-pause-icon { display: none; }
#hero .is-paused .agent-play-icon { display: block; }
#hero .agent-canvas { position: relative; aspect-ratio: 620 / 470; direction: ltr; margin-block: .3rem .75rem; }
#hero .agent-canvas::before {
    content: "";
    position: absolute;
    inset: -2% -2%;
    z-index: -2;
    background-image: radial-gradient(#85a4d344 .8px, transparent .8px);
    background-size: 19px 19px;
    mask-image: radial-gradient(ellipse, #000 5%, transparent 70%);
}
#hero .agent-aura { position: absolute; width: 78%; height: 90%; left: 11%; top: 3%; border-radius: 50%; background: radial-gradient(ellipse, #5d93f61c 0, #b4c8f321 32%, transparent 68%); z-index: -1; }
#hero .agent-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#hero .agent-tracks { stroke: var(--flow-track); stroke-width: 1.25; }
#hero .agent-stream { stroke: url(#agent-flow-gradient); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; animation: agent-stream-travel 5.5s cubic-bezier(.4, 0, .2, 1) infinite; }
#hero .agent-stream-1 { animation-delay: -1.8s; }
#hero .agent-stream-2 { animation-delay: -3.6s; }
#hero .agent-stream-3 { animation-delay: -1.2s; }
#hero .agent-stream-4 { animation-delay: -3.4s; }
#hero .agent-stream-5 { animation-delay: -2.4s; }
#hero .agent-stream-6 { animation-delay: -4.6s; }
#hero .agent-orbit { stroke: #8baee033; stroke-width: 1; }
#hero .agent-orbit-outer { stroke: #8baee021; stroke-dasharray: 3 11; transform-origin: 310px 226px; animation: agent-orbit-turn 75s linear infinite; }
#hero .agent-channel, #hero .agent-result, #hero .agent-knowledge { position: absolute; background: var(--flow-card); border: 1px solid var(--flow-stroke); box-shadow: 0 8px 22px -12px #2d568745, 0 1px 3px #25497004; color: var(--flow-title); border-radius: .9rem; line-height: 1.55; }
#hero .agent-channel { display: flex; align-items: center; gap: 3.5%; width: 25%; min-height: 15%; padding: 2.1%; }
[dir="rtl"] #hero .agent-channel, [dir="rtl"] #hero .agent-result, [dir="rtl"] #hero .agent-knowledge { direction: rtl; }
#hero .agent-channel-chat { left: 1%; top: 6%; }
#hero .agent-channel-messenger { left: 3%; top: 27%; }
#hero .agent-channel-social { left: 3%; top: 48%; }
#hero .agent-channel-email { left: 1%; top: 69%; }
#hero .agent-channel strong { display: block; font-size: var(--flow-label); font-weight: 650; white-space: nowrap; }
#hero .agent-channel small { display: block; font-size: var(--flow-small); color: var(--flow-muted); white-space: nowrap; margin-block-start: .2em; }
#hero .agent-channel-icon { display: grid; place-items: center; flex-shrink: 0; width: 28%; aspect-ratio: 1; border-radius: 30%; }
#hero .agent-channel-icon svg { width: 77%; height: 77%; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
#hero .agent-icon-green { background: #e7f6ee; color: #199d6b; }
#hero .agent-icon-blue { background: #e9f1ff; color: #2677dc; }
#hero .agent-icon-violet { background: #f0eefa; color: #8867ca; }
#hero .agent-icon-amber { background: #fff1e5; color: #cc9153; }
#hero .agent-core {
    position: absolute;
    left: 39.35%;
    top: 34%;
    width: 21.3%;
    height: 28%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    color: #fff;
    border-radius: 22%;
    background: linear-gradient(145deg, #183f78 0, #102d58 48%, #17477c 100%);
    border: 1px solid #6d9cce99;
    box-shadow: inset 0 1px 0 #c2e6ff70, 0 14px 30px -12px #164a9a65, 0 0 0 6px #ffffff8c;
}
#hero .agent-core-light { position: absolute; inset: -8%; border-radius: 28%; z-index: -1; border: 1px solid #5b93d952; animation: agent-core-breathe 5.5s ease-in-out infinite; }
#hero .agent-core-symbol { width: 27%; height: 27%; margin-block-end: 2%; stroke: #d1ebff; stroke-width: 1.5; fill: #d9f0ff12; stroke-linecap: round; }
#hero .agent-core strong { font-size: var(--flow-brand); font-weight: 700; line-height: 1.5; }
#hero .agent-core > span { font-size: var(--flow-small); color: #aac7e8; line-height: 1.6; }
#hero .agent-result { left: 74%; width: 25%; padding: 2.5%; min-height: 23%; }
#hero .agent-result-lead { top: 16.3%; }
#hero .agent-result-team { top: 57.5%; }
#hero .agent-result-top { display: flex; align-items: center; gap: 5%; }
#hero .agent-result-top strong { font-size: var(--flow-label); font-weight: 650; }
#hero .agent-result-icon { width: 26%; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: #eaf6f1; color: #289775; flex-shrink: 0; }
#hero .agent-result-team .agent-result-icon { background: #edf2fd; color: #5d83cc; }
#hero .agent-result-icon svg { width: 85%; height: 85%; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#hero .agent-result > span { display: block; font-size: var(--flow-small); color: var(--flow-muted); margin-block-start: .55em; }
#hero .agent-result-lines { display: grid; gap: 4px; margin-block-start: 12%; }
#hero .agent-result-lines i { height: 3px; background: #dde8f5; border-radius: 2px; width: 88%; }
#hero .agent-result-lines i:last-child { width: 54%; background: #e6edf7; }
#hero .agent-team-evidence { display: flex; align-items: center; gap: 5px; margin-block-start: 12%; }
#hero .agent-team-evidence i { width: 13px; height: 13px; border-radius: 50%; background: #ccdced; }
#hero .agent-team-evidence b { width: 3px; height: 3px; border-radius: 50%; background: #a9bed8; }
#hero .agent-knowledge { left: 31%; top: 84%; width: 38%; display: flex; align-items: center; gap: 6%; padding: 2%; }
#hero .agent-knowledge svg { width: 19%; stroke: #849cc1; stroke-width: 1.3; flex-shrink: 0; }
#hero .agent-knowledge strong { display: block; font-weight: 600; font-size: var(--flow-small); white-space: nowrap; }
#hero .agent-knowledge span { display: block; font-size: var(--flow-small); color: var(--flow-muted); white-space: nowrap; }
#hero .agent-visual figcaption { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-inline: 1rem; padding-block: .9rem 0; border-top: 1px solid var(--hero-line); color: var(--hero-muted); font-size: var(--flow-small); line-height: 1.7; }
#hero .agent-caption-mark { color: #6f94c6; }
#hero .agent-visual.is-paused *, #hero .agent-visual.is-offscreen * { animation-play-state: paused !important; }
.theme--dark #hero .agent-visual { --flow-card: #192b43; --flow-stroke: #2e4461; --flow-track: #365475; --flow-title: #e4edfa; --flow-muted: #a1b5d0; }
.theme--dark #hero .agent-motion-control { background: #17263b; color: #b5c7df; }
.theme--dark #hero .agent-core { box-shadow: inset 0 1px 0 #c2e6ff40, 0 12px 30px -12px #071528, 0 0 0 6px #203857; }
.theme--dark #hero .agent-result-lines i { background: #344c6a; }
.theme--dark #hero .agent-team-evidence i { background: #4d6d94; }
@keyframes agent-stream-travel { 0% { stroke-dashoffset: 105; opacity: 0; } 12%, 70% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes agent-orbit-turn { to { transform: rotate(360deg); } }
@keyframes agent-core-breathe { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.065); opacity: .9; } }
@media (max-width: 991px) {
    #hero .agent-visual { margin-block-start: 2.6rem; max-width: 36rem; }
}
@media (max-width: 575px) {
    #hero .agent-visual-heading { padding-inline: .25rem; }
    #hero .agent-channel { gap: 0; justify-content: center; text-align: center; }
    #hero .agent-channel-icon { position: absolute; top: -24%; inset-inline-start: 10%; width: 27%; border: 2px solid var(--flow-card); }
    #hero .agent-channel small { display: none; }
    #hero .agent-result { padding: 2%; }
    #hero .agent-result-top { flex-direction: column; gap: .1rem; }
    #hero .agent-result { text-align: center; }
    #hero .agent-result-top strong { white-space: normal; }
    #hero .agent-result > span { margin-block-start: .15em; }
    #hero .agent-result-lines, #hero .agent-team-evidence { display: none; }
    #hero .agent-knowledge { width: 42%; left: 29%; }
    #hero .agent-knowledge svg { display: none; }
    #hero .agent-knowledge > div { margin-inline: auto; text-align: center; }
    #hero .agent-visual figcaption { margin-inline: .25rem; }
}
@media (prefers-reduced-motion: reduce) {
    #hero .agent-visual * { animation: none !important; }
    #hero .agent-streams { display: none; }
    #hero .agent-motion-control { display: none; }
}