/* owner, 2026-10-12: the draft "Humans and AI agents" page, second pass ("aro polish and modern", nas.com's motion).
   Its own file so the current site's stylesheet is untouched; only /humans-and-agents loads it (with vassistech-ha.js).
   Brand only: logo green #135868 for headings, red orange for accents and the one button colour, thin type (300/400).
   Motion: words rise one by one, blocks fade up, the card pictures shrink onto the cards while scrolling, the division
   chips run, the diagrams loop, the roles rise, the tabs rotate, the numbers count. All of it stops for reduced motion,
   and without the script everything simply shows. */

.vt-panel:has(.ha) { background: #F5F4F0; }
.ha { --ha-bg: #F5F4F0; --ha-line: #E4E2DC; --ha-ease: cubic-bezier(.22, .61, .36, 1); background: var(--ha-bg); color: var(--vt-text); overflow: clip; }
.ha > section { padding-left: var(--vt-gutter, 24px); padding-right: var(--vt-gutter, 24px); }
.vt .ha h1, .vt .ha h2 { font-family: 'Sora', sans-serif; font-weight: 300; letter-spacing: -.03em; color: var(--vt-brand-green); }
.ha-accent { color: var(--vt-label); font-weight: 400; }

/* ---- reveal: words rise one by one, blocks fade up (only once the script is running) ---- */
.ha-js [data-ha-words] .ha-w { display: inline-block; opacity: 0; transform: translateY(.38em); filter: blur(8px); transition: opacity .8s var(--ha-ease), transform .8s var(--ha-ease), filter .8s var(--ha-ease); transition-delay: calc(var(--i, 0) * 70ms); }
.ha-js [data-ha-words].is-in .ha-w { opacity: 1; transform: none; filter: none; }
.ha-js [data-ha-reveal] { opacity: 0; transform: translateY(28px); filter: blur(4px); transition: opacity .9s var(--ha-ease), transform .9s var(--ha-ease), filter .9s var(--ha-ease); transition-delay: var(--d, 0s); }
.ha-js [data-ha-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---- buttons ---- */
.vt .ha-btn { display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 22px; border-radius: 999px; background: var(--vt-coral-ink); color: #fff; font: 500 15px/1 'Manrope', sans-serif; text-decoration: none; box-shadow: 0 16px 28px -16px rgba(201, 58, 32, .85), inset 0 1px 0 rgba(255, 255, 255, .18); transition: background-color .3s ease, transform .3s var(--ha-ease), box-shadow .3s ease; }
.vt .ha-btn:hover { background: var(--vt-coral-dark); transform: translateY(-2px); box-shadow: 0 22px 32px -16px rgba(201, 58, 32, .95), inset 0 1px 0 rgba(255, 255, 255, .18); }
.ha-btn-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .2); transition: transform .3s var(--ha-ease); }
.ha-btn:hover .ha-btn-dot { transform: translateX(3px); }
.vt .ha-btn-ghost { min-height: 48px; padding: 0 22px; background: #fff; color: var(--vt-ink); border: 1px solid var(--ha-line); box-shadow: 0 10px 22px -18px rgba(11, 36, 48, .4); }
.vt .ha-btn-ghost:hover { background: #fff; border-color: var(--vt-brand-green); color: var(--vt-brand-green); box-shadow: 0 14px 26px -18px rgba(11, 36, 48, .45); }
.vt .ha-link { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 'Manrope', sans-serif; color: var(--vt-label); text-decoration: none; }
.ha-link .vt-icon { transition: transform .3s var(--ha-ease); }
.ha-link:hover .vt-icon { transform: translateX(4px); }

/* ---- the agents: glossy orbs in the brand colours, with eyes that blink ---- */
.ha-orb { position: absolute; aspect-ratio: 1; border-radius: 50%; box-shadow: inset -12px -16px 26px rgba(0, 0, 0, .26), inset 10px 12px 22px rgba(255, 255, 255, .3), 0 26px 40px -20px rgba(0, 0, 0, .45); animation: ha-float 5.5s ease-in-out infinite; }
.ha-orb::after { content: ''; position: absolute; left: 20%; top: 12%; width: 30%; height: 18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); transform: rotate(-20deg); }
.ha-orb i { position: absolute; top: 34%; left: 36%; width: 8%; height: 17%; border-radius: 999px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .5); animation: ha-blink 6s infinite; }
.ha-orb i + i { left: 56%; }
.ha-orb-a { background: radial-gradient(circle at 34% 28%, #5FB3C2 0%, #1B6B7D 42%, #135868 74%, #0B3540 100%); }
.ha-orb-b { background: radial-gradient(circle at 34% 28%, #FFA58F 0%, #EC5C43 38%, #C93A20 72%, #9C3220 100%); animation-delay: -1.6s; }
.ha-orb-c { background: radial-gradient(circle at 34% 28%, #CFF3EF 0%, #8FD9D2 32%, #3E9AA8 70%, #1B6B7D 100%); animation-delay: -3.1s; }
@keyframes ha-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes ha-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }

/* ---- hero ---- */
.ha-hero { position: relative; padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(70px, 8vw, 110px); }
.ha-hero::before { content: ''; position: absolute; left: 50%; top: -10%; width: min(1100px, 120%); height: 640px; transform: translateX(-50%); background: radial-gradient(40% 50% at 30% 40%, rgba(143, 217, 210, .28), transparent 70%), radial-gradient(36% 46% at 72% 36%, rgba(236, 92, 67, .14), transparent 70%); pointer-events: none; }
.ha-hero-in { position: relative; max-width: 900px; margin: 0 auto; text-align: center; }
.ha-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 24px; padding: 8px 16px 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ha-line); box-shadow: 0 10px 20px -18px rgba(11, 36, 48, .4); font: 500 12px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-label); }
.ha-kicker-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--vt-brand); }
.ha-kicker-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--vt-brand); opacity: .4; animation: ha-pulse 2s ease-out infinite; }
@keyframes ha-pulse { from { transform: scale(.6); opacity: .6; } to { transform: scale(1.8); opacity: 0; } }
.vt .ha-title { margin: 0 0 22px; font-size: clamp(42px, 6.2vw, 86px); line-height: 1.04; text-wrap: balance; }
.ha-under { position: relative; display: inline-block; white-space: nowrap; }
.ha-under svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .3em; overflow: visible; }
.ha-under path { fill: none; stroke: var(--vt-brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 320; stroke-dashoffset: 0; opacity: .55; }
.ha-js .ha-under path { stroke-dashoffset: 320; transition: stroke-dashoffset 1.1s .7s var(--ha-ease); }
.ha-js .is-in .ha-under path { stroke-dashoffset: 0; }
.ha-lead { max-width: 600px; margin: 0 auto 32px; font: 300 clamp(16px, 1.4vw, 19px)/1.6 'Inter', sans-serif; color: var(--vt-muted); text-wrap: balance; }
.ha-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; --d: .25s; }

/* the two cards; their pictures stand on the cards' top edge, larger at first and settling as the page scrolls */
.ha-pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; max-width: 920px; margin: clamp(250px, 24vw, 320px) auto 0; }
.ha-card { position: relative; min-width: 0; }
.ha-pop { position: absolute; left: 0; right: 0; top: -214px; height: 244px; transform-origin: 50% 100%; transform: scale(var(--ha-s, 1)); will-change: transform; }
.ha-card-body { position: relative; z-index: 1; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; padding: 34px 32px 30px; border-radius: 28px; background: #fff; border: 1px solid rgba(19, 88, 104, .06); box-shadow: 0 40px 70px -50px rgba(11, 36, 48, .5), 0 8px 20px -16px rgba(11, 36, 48, .18); transition: transform .5s var(--ha-ease), box-shadow .5s ease; }
.ha-card:hover .ha-card-body { transform: translateY(-6px); box-shadow: 0 50px 80px -50px rgba(11, 36, 48, .55), 0 10px 22px -16px rgba(11, 36, 48, .2); }
.ha-arch { position: absolute; bottom: 0; left: 50%; width: 190px; height: 236px; margin-left: -120px; border-radius: 999px 999px 0 0; overflow: hidden; background: #DCE7EA; box-shadow: 0 24px 40px -26px rgba(11, 36, 48, .6); }
.ha-arch img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 38%; display: block; transition: transform 1.2s var(--ha-ease); }
.ha-arch-sm { width: 128px; height: 168px; margin-left: 52px; border: 5px solid var(--ha-bg); border-bottom: 0; }
.ha-arch-sm img { object-position: 45% 50%; }
.ha-card:hover .ha-arch img { transform: scale(1.06); }
.ha-pop .ha-orb-b { width: 168px; left: 50%; bottom: 26px; margin-left: -84px; z-index: 1; }
.ha-pop .ha-orb-a { width: 108px; left: 50%; bottom: 4px; margin-left: -168px; }
.ha-pop .ha-orb-c { width: 96px; left: 50%; bottom: 2px; margin-left: 72px; }
.ha-card:hover .ha-pop .ha-orb { animation-duration: 2.8s; }
.vt .ha-card-title { margin: 0 0 10px; font: 400 clamp(26px, 2.4vw, 32px)/1.15 'Sora', sans-serif; color: var(--vt-brand-green); letter-spacing: -.02em; }
.ha-card-title em { font-style: normal; color: var(--vt-label); }
.ha-card-text { margin: 0 0 18px; font: 300 16px/1.6 'Inter', sans-serif; color: var(--vt-muted); }
.ha-card-list { list-style: none; align-self: stretch; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--ha-line); display: grid; gap: 10px; }
.ha-card-list li { display: flex; align-items: center; gap: 10px; font: 400 15px/1.4 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-card-list li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--vt-brand); flex: none; }
.ha-badge { display: inline-flex; align-items: center; gap: 10px; margin: auto 0 24px; padding: 6px 16px 6px 6px; border-radius: 999px; background: #F5F4F0; font: 400 14px/1.3 'Manrope', sans-serif; color: var(--vt-muted); }
.ha-badge b { font-weight: 600; color: var(--vt-ink); }
.ha-faces { display: inline-flex; }
.ha-faces i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; background: var(--vt-brand-green); color: #fff; }
.ha-faces i + i { margin-left: -9px; }
.ha-faces i:nth-child(2) { background: var(--vt-coral-ink); }
.ha-faces i:nth-child(3) { background: #1B6B7D; }
.ha-faces.is-orbs i { background: radial-gradient(circle at 35% 30%, #5FB3C2 0%, #135868 72%); }
.ha-faces.is-orbs i:nth-child(2) { background: radial-gradient(circle at 35% 30%, #FFA58F 0%, #C93A20 72%); }
.ha-faces.is-orbs i:nth-child(3) { background: radial-gradient(circle at 35% 30%, #CFF3EF 0%, #3E9AA8 72%); }
.ha-pair .ha-card:nth-child(2) .ha-card-body { --d: .12s; }

/* ---- the division chips, running in two rows ---- */
.ha-run { padding-top: 10px; padding-bottom: clamp(60px, 8vw, 110px); display: grid; grid-template-columns: minmax(180px, 250px) minmax(0, 1fr); gap: 28px; align-items: center; }
.vt .ha-run-head { margin: 0; font: 300 clamp(22px, 2.2vw, 30px)/1.2 'Sora', sans-serif; color: var(--vt-brand-green); letter-spacing: -.02em; }
.ha-run-rows { display: grid; gap: 12px; min-width: 0; mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
.ha-run-row { overflow: hidden; }
.ha-run-track { list-style: none; margin: 0; padding: 4px 0; display: flex; gap: 12px; width: max-content; animation: ha-run 46s linear infinite; }
.ha-run-row.is-back .ha-run-track { animation-direction: reverse; animation-duration: 52s; }
.ha-run-rows:hover .ha-run-track { animation-play-state: paused; }
@keyframes ha-run { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
.ha-run-track a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #fff; border: 1px solid var(--ha-line); font: 400 15px/1 'Manrope', sans-serif; color: var(--vt-ink); text-decoration: none; white-space: nowrap; transition: border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.ha-run-track a > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--vt-brand-green); color: #fff; transition: background-color .3s ease; }
.ha-run-track a:hover { border-color: rgba(219, 67, 39, .45); color: var(--vt-brand-green); box-shadow: 0 12px 22px -18px rgba(11, 36, 48, .5); }
.ha-run-track a:hover > span { background: var(--vt-coral-ink); }

/* ---- how it works ---- */
.ha-how { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(60px, 8vw, 120px); }
.vt .ha-how-title { margin: 0 0 clamp(48px, 7vw, 100px); text-align: center; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.05; }
.ha-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; scroll-margin-top: 110px; }
.ha-row + .ha-row { margin-top: clamp(80px, 10vw, 150px); }
.ha-row.is-flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.ha-row.is-flip .ha-row-copy { order: 2; }
.ha-big { margin: 0 0 24px; font: 300 clamp(46px, 5.8vw, 82px)/.98 'Sora', sans-serif; letter-spacing: -.04em; color: var(--vt-brand-green); }
.ha-big .ha-accent { display: block; }
.ha-row-text { max-width: 500px; margin: 0 0 28px; font: 300 17px/1.65 'Inter', sans-serif; color: var(--vt-text); }
.ha-tools { list-style: none; margin: 0; padding: 0; max-width: 500px; border-top: 1px solid var(--ha-line); --d: .12s; }
.ha-tools li { position: relative; border-bottom: 1px solid var(--ha-line); }
.ha-tools li, .ha-tools a { display: flex; align-items: center; gap: 14px; }
.ha-tools li { padding: 14px 4px; }
.ha-tools li:has(a) { padding: 0; }
.ha-tools a { flex: 1; padding: 14px 4px; color: inherit !important; text-decoration: none; }
.ha-tools li > span:nth-child(2), .ha-tools a > span:nth-child(2) { display: grid; gap: 2px; font: 500 16px/1.3 'Manrope', sans-serif; color: var(--vt-ink); transition: color .3s ease; }
.ha-tools small { font: 300 13.5px/1.35 'Inter', sans-serif; color: var(--vt-muted); }
.ha-tool-ico { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--vt-brand-green); color: #fff; box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .18), inset 0 4px 8px rgba(255, 255, 255, .15); transition: background-color .3s ease, transform .4s var(--ha-ease); }
.ha-tool-go { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; border-radius: 50%; background: #fff; border: 1px solid var(--ha-line); color: var(--vt-ink); transition: background-color .3s ease, color .3s ease, transform .3s var(--ha-ease), border-color .3s ease; }
.ha-tools li:hover .ha-tool-ico { background: var(--vt-coral-ink); transform: rotate(-8deg) scale(1.05); }
.ha-tools li:hover > span:nth-child(2), .ha-tools li:hover a > span:nth-child(2) { color: var(--vt-brand-green); }
.ha-tools li:hover .ha-tool-go { background: var(--vt-coral-ink); border-color: var(--vt-coral-ink); color: #fff; transform: translateX(4px); }

/* the pictures of the work */
.ha-stage { position: relative; min-width: 0; height: clamp(400px, 38vw, 500px); border-radius: 32px; overflow: hidden; }
.ha-stage.is-light { background: #fff; border: 1px solid rgba(19, 88, 104, .06); box-shadow: 0 40px 70px -56px rgba(11, 36, 48, .5); }
.ha-stage.is-light::before { content: ''; position: absolute; inset: 14px; border-radius: 22px; background: #FAF9F6 radial-gradient(rgba(19, 88, 104, .1) 1px, transparent 1px) 0 0 / 20px 20px; }

/* ===== the four live pictures, each rebuilt from nas.com's own video, frame by frame (owner, 2026-10-12: "andaje
   kichhu korba na") ===== */
.ha-stage.is-frame { padding: 14px; box-sizing: border-box; background: #fff; border: 1px solid rgba(19, 88, 104, .06); box-shadow: 0 40px 70px -56px rgba(11, 36, 48, .5); }
.ha-stage.is-frame > div { position: relative; width: 100%; height: 100%; border-radius: 22px; background: #F7F7F5; overflow: hidden; }

/* 1. analyze. nas.com: 12 s; agent at 0.3 s, a source every 0.45 s from 0.6 s with its line drawn to the agent, "..."
   at 3 s, a line drops at 6 s, the insight card at 6.5 s and its words at 7 s, all clear at 10.8 s */
.ha-an-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ha-an-lines path { fill: none; stroke: #CBD2DA; stroke-width: 1.4; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .8s var(--ha-ease); }
.ha-an-lines path.is-dot { stroke: var(--vt-brand); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .1 99.9; stroke-dashoffset: 0; opacity: 0; transition: none; }
.ha-an-lines path.on { stroke-dashoffset: 0; }
.ha-an-lines path.is-dot.on { opacity: 1; animation: ha-dot 1.1s var(--ha-ease) forwards; }
@keyframes ha-dot { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -99.9; opacity: 0; } }
.ha-src { position: absolute; left: 7%; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px -12px rgba(11, 36, 48, .35), 0 0 0 1px rgba(19, 88, 104, .05); font: 400 13px/1 'Manrope', sans-serif; color: var(--vt-ink); white-space: nowrap; opacity: 0; transform: translateX(-10px) scale(.94); transition: opacity .5s var(--ha-ease), transform .5s var(--ha-ease); }
.ha-src b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--vt-teal-soft); color: var(--vt-brand-green); }
.ha-src[data-k="1"] { top: 12%; } .ha-src[data-k="2"] { top: 27%; } .ha-src[data-k="3"] { top: 42%; } .ha-src[data-k="4"] { top: 57%; } .ha-src[data-k="5"] { top: 72%; }
.ha-src.on { opacity: 1; transform: none; }
.ha-an-orb { position: absolute; left: 66%; top: 32%; width: 92px; height: 92px; margin: -46px 0 0 -46px; opacity: 0; transform: scale(.6); transition: opacity .6s var(--ha-ease), transform .6s var(--ha-ease); }
.ha-an-orb .ha-orb { inset: 0; width: 100%; }
.ha-an-orb.on { opacity: 1; transform: none; }
.ha-think { position: absolute; left: calc(66% + 40px); top: calc(32% - 62px); display: flex; gap: 4px; padding: 8px 11px; border-radius: 999px; background: #fff; box-shadow: 0 8px 18px -12px rgba(11, 36, 48, .4); opacity: 0; transform: scale(.7); transform-origin: left bottom; transition: opacity .35s ease, transform .35s var(--ha-ease); }
.ha-think i { width: 5px; height: 5px; border-radius: 50%; background: #8A97A6; animation: ha-think 1s ease-in-out infinite; }
.ha-think i:nth-child(2) { animation-delay: .15s; } .ha-think i:nth-child(3) { animation-delay: .3s; }
@keyframes ha-think { 0%, 100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
.ha-think.on { opacity: 1; transform: none; }
.ha-insight { position: absolute; left: 42%; right: 5%; top: 64%; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 18px 34px -20px rgba(11, 36, 48, .45), 0 0 0 1px rgba(19, 88, 104, .05); opacity: 0; transform: translateY(10px) scale(.97); transition: opacity .5s var(--ha-ease), transform .5s var(--ha-ease); }
.ha-insight.on { opacity: 1; transform: none; }
.ha-insight > * { opacity: .25; transition: opacity .6s ease; }
.ha-insight.is-text > * { opacity: 1; }
.ha-insight-tag { display: inline-flex; align-items: center; gap: 5px; margin: 0 0 8px; padding: 4px 9px; border-radius: 999px; background: rgba(219, 67, 39, .1); color: var(--vt-label); font: 600 11px/1 'Manrope', sans-serif; }
.ha-insight-title { margin: 0 0 5px; font: 500 15px/1.35 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-insight-text { margin: 0; font: 300 12.5px/1.4 'Inter', sans-serif; color: var(--vt-muted); }
.ha-an.is-out > * { opacity: 0 !important; transition: opacity .7s ease !important; }

/* 2. monitor. nas.com: day sky with a warm agent, night sky with stars and a pale glowing one, back to day, notes
   arriving all the while and the old ones blurring away */
.ha-stage.ha-mon { box-shadow: 0 40px 70px -46px rgba(4, 24, 31, .6); }
.ha-sky { position: absolute; inset: 0; }
.ha-sky.is-day { background: radial-gradient(60% 50% at 40% 70%, rgba(255, 196, 140, .65), transparent 70%), linear-gradient(180deg, #8DB8D6 0%, #BCD3E2 45%, #F2D2B4 100%); }
.ha-sky.is-night { background: radial-gradient(50% 50% at 42% 52%, rgba(143, 217, 210, .18), transparent 70%), linear-gradient(180deg, #071A22 0%, #0B2A35 60%, #12394A 100%); animation: ha-night 10s ease-in-out infinite; }
@keyframes ha-night { 0%, 28% { opacity: 0; } 38%, 72% { opacity: 1; } 82%, 100% { opacity: 0; } }
.ha-stars { position: absolute; inset: 0; background-image: radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, .8), transparent), radial-gradient(1px 1px at 28% 72%, rgba(255, 255, 255, .6), transparent), radial-gradient(1.4px 1.4px at 46% 12%, rgba(255, 255, 255, .7), transparent), radial-gradient(1px 1px at 64% 86%, rgba(255, 255, 255, .6), transparent), radial-gradient(1.3px 1.3px at 82% 24%, rgba(255, 255, 255, .8), transparent), radial-gradient(1px 1px at 90% 64%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 6% 52%, rgba(255, 255, 255, .5), transparent), radial-gradient(1.2px 1.2px at 56% 40%, rgba(255, 255, 255, .4), transparent), radial-gradient(1px 1px at 36% 30%, rgba(255, 255, 255, .5), transparent), radial-gradient(1px 1px at 74% 50%, rgba(255, 255, 255, .45), transparent); animation: ha-twinkle 3s ease-in-out infinite alternate; }
@keyframes ha-twinkle { from { opacity: .5; } to { opacity: 1; } }
.ha-mon-orb { position: absolute; left: 44%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; }
.ha-mon-orb .ha-orb { inset: 0; width: 100%; }
.ha-orb-sun { background: radial-gradient(circle at 34% 28%, #FFD3A8 0%, #F59A5B 40%, #E8743F 72%, #C85A2C 100%); box-shadow: inset -12px -16px 26px rgba(120, 40, 10, .25), inset 10px 12px 22px rgba(255, 255, 255, .35), 0 0 60px 6px rgba(255, 190, 120, .45); }
.ha-orb-moon { background: radial-gradient(circle at 34% 28%, #FFFFFF 0%, #F1ECE2 45%, #D9D2C4 80%, #BDB5A6 100%); box-shadow: inset -12px -16px 26px rgba(0, 0, 0, .18), inset 10px 12px 22px rgba(255, 255, 255, .5), 0 0 70px 10px rgba(240, 235, 220, .35); animation: ha-night 10s ease-in-out infinite, ha-float 5.5s ease-in-out infinite; }
.ha-orb-moon i { background: #8A8170; box-shadow: none; }
.ha-mon .ha-note { position: absolute; display: flex; align-items: center; gap: 10px; margin: 0; padding: 9px 13px 9px 9px; box-sizing: border-box; max-width: 48%; border-radius: 14px; background: rgba(255, 255, 255, .9); box-shadow: 0 16px 30px -18px rgba(4, 24, 31, .55); backdrop-filter: blur(6px); animation: ha-arrive 10s var(--ha-ease) infinite both; }
.ha-mon .ha-note b { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 9px; background: var(--vt-teal-soft); color: var(--vt-brand-green); }
.ha-mon .ha-note b.is-moon { background: #EDEAF6; color: #4A4A8A; } .ha-mon .ha-note b.is-sun { background: #FFF1E2; color: #C85A2C; }
.ha-mon .ha-note strong { display: block; font: 500 12.5px/1.3 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-mon .ha-note span { display: block; font: 300 11px/1.35 'Inter', sans-serif; color: var(--vt-muted); }
@keyframes ha-arrive { 0% { opacity: 0; transform: translateY(14px) scale(.95); filter: blur(4px); } 6%, 52% { opacity: 1; transform: none; filter: none; } 62% { opacity: .45; filter: blur(2px); transform: translateY(-4px) scale(.98); } 70%, 100% { opacity: 0; filter: blur(4px); transform: translateY(-8px) scale(.96); } }
.ha-mon .m1 { left: 4%; top: 5%; width: 44%; display: block; padding: 10px; animation-delay: -1s; }
.ha-mon .m2 { left: 4%; top: 52%; animation-delay: -6.5s; }
.ha-mon .m3 { left: 6%; top: 64%; animation-delay: -3.2s; }
.ha-mon .m4 { right: 4%; top: 8%; animation-delay: -8.2s; }
.ha-mon .m5 { left: 5%; bottom: 6%; animation-delay: -4.8s; }
.ha-mon .m6 { right: 4%; bottom: 7%; width: 42%; display: block; animation-delay: -2.2s; }
.ha-mon .m7 { right: 5%; top: 26%; animation-delay: -5.6s; }
.ha-mon .m8 { right: 6%; top: 44%; animation-delay: -9.2s; }
.ha-note-head { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font: 500 11.5px/1 'Manrope', sans-serif; color: var(--vt-muted); }
.ha-note-head span { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: rgba(31, 122, 87, .12); color: #1F7A57; font-size: 10px; }
.ha-mon .ha-msg { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 6px 4px; border-top: 1px solid #EEF0F2; }
.ha-mon .ha-msg b { width: 22px; height: 22px; border-radius: 50%; }
.ha-mon .ha-msg strong { font-size: 11.5px; }
.ha-mon .m6 small { display: block; font: 300 11px/1.2 'Inter', sans-serif; color: var(--vt-muted); }
.ha-mon .m6 p { margin: 0 0 4px; }
.ha-mon .m6 strong { font: 400 20px/1.2 'Sora', sans-serif; color: var(--vt-brand-green); }
.ha-mon .m6 em { display: block; font: 500 10.5px/1.2 'Manrope', sans-serif; font-style: normal; color: #1F7A57; }
.ha-mon .m6 svg { width: 100%; height: 34px; }
.ha-mon .m6 path { fill: none; stroke: var(--vt-brand); stroke-width: 2; vector-effect: non-scaling-stroke; }

/* 4. humans. nas.com: 6 s; role pills rise, one pill's picture grows into the whole panel, then pulls back to the
   full scene */
.ha-hu-list { list-style: none; margin: 0; padding: 0; position: absolute; left: 50%; top: 0; width: min(330px, 80%); transform: translate(-50%, var(--ha-y, 0px)); display: grid; gap: 14px; transition: transform .75s var(--ha-ease); }
.ha-hu-list li { display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 10px; border-radius: 999px; background: #fff; box-shadow: 0 14px 26px -18px rgba(11, 36, 48, .45), 0 0 0 1px rgba(19, 88, 104, .04); font: 500 clamp(15px, 1.5vw, 18px)/1.2 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-hu-face { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; overflow: hidden; background: var(--vt-brand-green); color: #fff; }
.ha-hu-list li:nth-child(3n + 2) .ha-hu-face { background: var(--vt-coral-ink); } .ha-hu-list li:nth-child(3n) .ha-hu-face { background: #1B6B7D; }
.ha-hu-face img { width: 100%; height: 100%; object-fit: cover; object-position: 44% 30%; transform: scale(2.2); transform-origin: 44% 32%; }
.ha-hu-open { position: absolute; inset: 0; clip-path: circle(0px at 50% 50%); transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1); pointer-events: none; }
.ha-hu-open img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 40%; transform: scale(1.55); transform-origin: 44% 32%; transition: transform 2.6s cubic-bezier(.3, 0, .2, 1); }
.ha-hu-open.on { clip-path: circle(var(--ha-r, 150%) at var(--ha-x, 50%) var(--ha-y2, 50%)); }
.ha-hu-open.is-back img { transform: scale(1); }
.ha-hu-tag { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .92); font: 500 12px/1 'Manrope', sans-serif; color: var(--vt-brand-green); opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s var(--ha-ease); }
.ha-hu-open.is-back .ha-hu-tag { opacity: 1; transform: none; transition-delay: 1.2s; }
.ha-hu.is-out .ha-hu-open { opacity: 0; transition: opacity .6s ease; }

@media (max-width: 700px) {
  .ha-src { font-size: 11.5px; padding: 5px 10px 5px 5px; gap: 6px; left: 5%; }
  .ha-src b { width: 20px; height: 20px; }
  .ha-an-orb { width: 70px; height: 70px; margin: -35px 0 0 -35px; left: 72%; }
  .ha-think { left: calc(72% + 26px); top: calc(32% - 50px); }
  .ha-insight { left: 22%; right: 4%; top: 66%; padding: 11px 12px; }
  .ha-insight-title { font-size: 13.5px; }
  .ha-mon-orb { width: 110px; height: 110px; margin: -55px 0 0 -55px; left: 50%; }
  .ha-mon .ha-note { max-width: 64%; }
  .ha-mon .m1 { width: 62%; } .ha-mon .m6 { width: 54%; }
  .ha-hu-face { width: 46px; height: 46px; }
}

/* 4. the report */
.ha-report { position: absolute; left: 50%; top: 50%; width: min(400px, 84%); transform: translate(-50%, -50%) rotate(-1.5deg); padding: 22px; box-sizing: border-box; border-radius: 22px; background: #fff; box-shadow: 0 40px 60px -30px rgba(11, 36, 48, .45), 0 0 0 1px rgba(19, 88, 104, .05); transition: transform .6s var(--ha-ease); }
.ha-stage:hover .ha-report { transform: translate(-50%, -52%) rotate(0deg); }
.ha-report-tag { margin: 0 0 12px; font: 600 10.5px/1 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-label); }
.ha-report-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 16px; }
.ha-report-head b { font: 500 15px/1.3 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-report-head small { font: 300 12.5px/1.3 'Inter', sans-serif; color: var(--vt-muted); }
.ha-meter { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 16px; font: 400 13px/1.3 'Manrope', sans-serif; color: var(--vt-muted); }
.ha-meter b { font-weight: 500; color: var(--vt-ink); }
.ha-meter i { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: #F1F0EC; overflow: hidden; }
.ha-meter s { display: block; width: 90%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #135868, #1B6B7D 70%, #EC5C43); transform-origin: left; }
.ha-js .ha-meter s { transform: scaleX(0); transition: transform 1.6s .3s var(--ha-ease); }
.ha-js .is-in .ha-meter s { transform: scaleX(1); }
.ha-report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.ha-report-grid div { padding: 12px; border-radius: 14px; background: #F7F6F2; }
.ha-report-grid dt { font: 300 12px/1.3 'Inter', sans-serif; color: var(--vt-muted); }
.ha-report-grid dd { margin: 4px 0 0; font: 400 20px/1.1 'Sora', sans-serif; color: var(--vt-brand-green); }
.ha-report-grid dd.is-ok { color: var(--vt-label); }
.ha-report-team { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--ha-line); display: flex; flex-wrap: wrap; gap: 8px; }
.ha-report-team li { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #F7F6F2; font: 400 12.5px/1 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-report-team li > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--vt-brand-green); color: #fff; }
.ha .is-agent { background: radial-gradient(circle at 35% 30%, #FFA58F 0%, #C93A20 72%); }
.ha .is-agent.b { background: radial-gradient(circle at 35% 30%, #5FB3C2 0%, #135868 72%); }
.ha .is-agent.c { background: radial-gradient(circle at 35% 30%, #CFF3EF 0%, #3E9AA8 72%); }

/* ---- three ways to start, rotating by themselves ---- */
.ha-start { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(70px, 9vw, 130px); }
.vt .ha-start-title { max-width: 760px; margin: 0 0 34px; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.08; }
.ha-ring { position: relative; display: inline-block; padding: 0 .1em; }
.ha-ring svg { position: absolute; left: -12%; top: -22%; width: 124%; height: 150%; overflow: visible; }
.ha-ring path { fill: none; stroke: var(--vt-brand); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 600; stroke-dashoffset: 0; opacity: .7; }
.ha-js .ha-ring path { stroke-dashoffset: 600; transition: stroke-dashoffset 1.4s .8s var(--ha-ease); }
.ha-js .is-in .ha-ring path { stroke-dashoffset: 0; }
.ha-tabs { display: flex; flex-wrap: wrap; gap: 6px 34px; margin: 0 0 26px; border-bottom: 1px solid var(--ha-line); }
.ha-tabs button { position: relative; padding: 12px 0 14px; border: 0; background: none; font: 400 16px/1.2 'Manrope', sans-serif; color: var(--vt-muted); cursor: pointer; transition: color .3s ease; }
.ha-tabs button:hover, .ha-tabs button[aria-selected="true"] { color: var(--vt-ink); }
.ha-tabs button i { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--vt-brand); transform: scaleX(0); transform-origin: left; }
.ha-tabs button[aria-selected="true"] i { transform: scaleX(1); }
.ha-tabs.is-auto button[aria-selected="true"] i { animation: ha-tab 7s linear both; }
@keyframes ha-tab { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ha-tabs button:focus-visible { outline: 2px solid var(--vt-brand-green); outline-offset: 4px; border-radius: 6px; }
.ha-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); border-radius: 30px; overflow: hidden; background: #fff; box-shadow: 0 40px 70px -56px rgba(11, 36, 48, .5); border: 1px solid rgba(19, 88, 104, .06); animation: ha-in .6s var(--ha-ease) both; }
.ha-panel[hidden] { display: none; }
@keyframes ha-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.ha-panel-pic { position: relative; min-height: 420px; overflow: hidden; background: #0B2F39; }
.ha-panel-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ha-ease); }
.ha-panel:hover .ha-panel-pic img { transform: scale(1.04); }
.ha-panel-pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 32, 0) 40%, rgba(6, 26, 32, .82) 100%); }
.ha-panel-pic p { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 26px; margin: 0; font: 300 clamp(18px, 1.7vw, 22px)/1.4 'Sora', sans-serif; color: #fff; }
.ha-panel-pic.is-agents { background: radial-gradient(70% 70% at 50% 40%, #14596A 0%, #0B2F39 60%, #061A20 100%); }
.ha-panel-pic.is-agents .ha-orb-b { width: 150px; left: 50%; top: 22%; margin-left: -75px; }
.ha-panel-pic.is-agents .ha-orb-a { width: 96px; left: 50%; top: 40%; margin-left: -150px; }
.ha-panel-pic.is-agents .ha-orb-c { width: 86px; left: 50%; top: 42%; margin-left: 64px; }
.ha-panel-info { padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.ha-panel-label { margin: 0; font: 500 13px/1 'Manrope', sans-serif; color: var(--vt-muted); }
.ha-panel-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-bottom: 20px; margin-bottom: 4px; border-bottom: 1px solid var(--ha-line); }
.ha-panel-facts b { display: block; font: 300 clamp(26px, 2.8vw, 38px)/1.1 'Sora', sans-serif; color: var(--vt-brand-green); letter-spacing: -.02em; }
.ha-panel-facts small { display: block; margin-top: 6px; font: 300 13px/1.35 'Inter', sans-serif; color: var(--vt-muted); }
.ha-panel-team { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.ha-panel-team li { display: flex; align-items: center; gap: 10px; }
.ha-panel-team li > span:first-child { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--vt-brand-green); color: #fff; }
.ha-panel-team b { display: block; font: 500 14px/1.3 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-panel-team small { display: block; font: 300 12.5px/1.35 'Inter', sans-serif; color: var(--vt-muted); }
.ha-panel-info .ha-link { margin-top: auto; }

/* ---- the dark band, ending in three bars like nas.com's ---- */
.ha-band { position: relative; padding-top: clamp(70px, 9vw, 130px); padding-bottom: clamp(60px, 7vw, 100px); background: radial-gradient(60% 80% at 100% 0%, rgba(236, 92, 67, .16), transparent 60%), linear-gradient(170deg, #0F3F4B 0%, #0A2B34 60%, #071F26 100%); color: rgba(255, 255, 255, .7); }
.ha-band-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: clamp(30px, 4vw, 50px); border-bottom: 1px solid rgba(255, 255, 255, .1); }
.vt .ha-band h2 { max-width: 640px; margin: 0; font-size: clamp(32px, 3.8vw, 52px); line-height: 1.12; color: #fff; }
.ha-band-by { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; font: 300 20px/1 'Sora', sans-serif; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.ha-band-by img { width: 150px; height: auto; }
.ha-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 24px; align-items: end; margin: clamp(30px, 4vw, 50px) 0; }
.ha-stats dt { font: 300 clamp(40px, 4.6vw, 64px)/1 'Sora', sans-serif; color: #fff; letter-spacing: -.03em; white-space: nowrap; }
.ha-stats .is-big dt { font-size: clamp(72px, 9vw, 130px); color: var(--vt-label-on-dark); }
.ha-stats dt small { font: 300 .4em/1 'Manrope', sans-serif; letter-spacing: 0; color: rgba(255, 255, 255, .6); vertical-align: middle; }
.ha-stats dd { margin: 10px 0 0; font: 400 14px/1.3 'Manrope', sans-serif; color: rgba(255, 255, 255, .6); }
.ha-band-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.ha-band-pics figure { position: relative; margin: 0; height: clamp(220px, 24vw, 320px); border-radius: 24px; overflow: hidden; }
.ha-band-pics figure:nth-child(2) { --d: .1s; } .ha-band-pics figure:nth-child(3) { --d: .2s; }
.ha-band-pics img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ha-ease); }
.ha-band-pics figure:hover img { transform: scale(1.06); }
.ha-band-pics figcaption { position: absolute; left: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(6, 26, 32, .55); backdrop-filter: blur(8px); font: 400 13px/1 'Manrope', sans-serif; color: #fff; }

/* ---- call to action ---- */
.ha-cta { position: relative; padding-top: clamp(120px, 14vw, 190px); padding-bottom: clamp(90px, 11vw, 150px); text-align: center; }
.vt .ha-cta h2 { position: relative; margin: 0 0 16px; font-size: clamp(38px, 5vw, 68px); line-height: 1.05; }
.ha-cta p { position: relative; margin: 0 auto 30px; max-width: 520px; font: 300 17px/1.6 'Inter', sans-serif; color: var(--vt-muted); --d: .15s; }
.ha-cta > div { position: relative; --d: .3s; }

/* ---- FAQ, owner 2026-10-12: numbered, the open answer lifts into a white card, a help card beside the list ---- */
.ha-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 80px); align-items: start; padding-top: clamp(30px, 4vw, 60px); padding-bottom: clamp(80px, 10vw, 140px); }
.ha-faq-side { position: sticky; top: 110px; }
.vt .ha-faq h2 { margin: 0 0 14px; font-size: clamp(36px, 4.6vw, 62px); line-height: 1.05; }
.ha-faq-lead { margin: 0 0 28px; max-width: 340px; font: 300 16px/1.6 'Inter', sans-serif; color: var(--vt-muted); }
.ha-faq-help { position: relative; max-width: 360px; padding: 24px; border-radius: 24px; background: #fff; box-shadow: 0 30px 60px -44px rgba(11, 36, 48, .5), 0 0 0 1px rgba(19, 88, 104, .06); --d: .15s; }
.ha-faq-marks { display: flex; gap: 10px; margin: 0 0 16px; }
.ha-faq-marks img { display: block; width: 34px; height: 34px; object-fit: contain; }
.ha-faq-help-t { margin: 0 0 6px; font: 500 19px/1.3 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-faq-help-s { margin: 0 0 18px; font: 300 14.5px/1.6 'Inter', sans-serif; color: var(--vt-muted); }
.ha-faq-call { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font: 500 13.5px/1.3 'Manrope', sans-serif; color: var(--vt-brand-green) !important; text-decoration: none; }
.ha-faq-call:hover { color: var(--vt-coral-ink) !important; }
.ha-faq-list { display: grid; gap: 6px; }
.ha-faq details { border-radius: 18px; border: 1px solid transparent; border-bottom-color: var(--ha-line); transition: background-color .35s ease, box-shadow .35s ease, border-color .35s ease; }
.ha-faq details[open] { background: #fff; border-color: rgba(19, 88, 104, .06); box-shadow: 0 24px 48px -36px rgba(11, 36, 48, .45); }
.ha-faq summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; align-items: center; gap: 14px; padding: 20px 18px; list-style: none; cursor: pointer; }
.ha-faq summary::-webkit-details-marker { display: none; }
.ha-faq-n { font: 600 12.5px/1 'Manrope', sans-serif; letter-spacing: .08em; color: var(--vt-muted); transition: color .3s ease; }
.ha-faq-q { font: 400 17px/1.4 'Manrope', sans-serif; color: var(--vt-ink); transition: color .25s ease; }
.ha-faq summary:hover .ha-faq-q { color: var(--vt-brand-green); }
.ha-faq details[open] .ha-faq-n { color: var(--vt-label); }
.ha-faq-ico { position: relative; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ha-line); background: #fff; transition: background-color .3s ease, border-color .3s ease, transform .4s var(--ha-ease); }
.ha-faq-ico::before, .ha-faq-ico::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; border-radius: 2px; background: var(--vt-brand-green); transition: transform .4s var(--ha-ease), background-color .3s ease; }
.ha-faq-ico::after { transform: rotate(90deg); }
.ha-faq summary:hover .ha-faq-ico { border-color: rgba(19, 88, 104, .3); }
.ha-faq details[open] .ha-faq-ico { background: #C93A20; border-color: #C93A20; transform: rotate(180deg); }
.ha-faq details[open] .ha-faq-ico::before, .ha-faq details[open] .ha-faq-ico::after { background: #fff; }
.ha-faq details[open] .ha-faq-ico::after { transform: rotate(0deg); }
.ha-faq-a { overflow: hidden; }
.ha-faq-a p { margin: 0; padding: 0 66px 22px 66px; max-width: 640px; font: 300 15.5px/1.7 'Inter', sans-serif; color: var(--vt-text); }
.ha-faq-a a { color: var(--vt-brand-green); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(19, 88, 104, .3); }
.ha-faq-a a:hover { color: var(--vt-coral-ink); }

/* ---- tablets and phones ---- */
@media (max-width: 1024px) {
  .ha-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ha-stats .is-big { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .ha-pair { grid-template-columns: 1fr; max-width: 520px; row-gap: 240px; }
  .ha-row, .ha-row.is-flip, .ha-faq, .ha-panel { grid-template-columns: 1fr; }
  .ha-row.is-flip .ha-row-copy { order: 0; }
  .ha-run { grid-template-columns: 1fr; text-align: center; }
  .ha-panel-pic { min-height: 300px; }
  .ha-band-top { flex-direction: column; }
  .ha-band-pics { grid-template-columns: 1fr 1fr; }
  .ha-band-pics figure:nth-child(3) { display: none; }
}
@media (max-width: 700px) {
  .ha-pair { margin-top: 220px; row-gap: 220px; }
  .ha-pop { top: -190px; height: 220px; }
  .ha-arch { width: 160px; height: 206px; margin-left: -104px; }
  .ha-arch-sm { width: 108px; height: 140px; margin-left: 42px; }
  .ha-pop .ha-orb-b { width: 140px; margin-left: -70px; }
  .ha-pop .ha-orb-a { width: 88px; margin-left: -140px; }
  .ha-pop .ha-orb-c { width: 78px; margin-left: 60px; }
  .ha-card-body { padding: 28px 20px 22px; }
  .ha-stage { height: 400px; border-radius: 26px; }
  .ha-panel-facts, .ha-panel-team { grid-template-columns: 1fr 1fr; }
  .ha-panel-facts div:nth-child(3) { grid-column: 1 / -1; }
  .ha-band-pics { grid-template-columns: 1fr; }
  .ha-band-pics figure:nth-child(2) { display: none; }
  .ha-faq-q { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ha *, .ha *::before, .ha *::after { animation: none !important; transition: none !important; }
  .ha-js [data-ha-words] .ha-w, .ha-js [data-ha-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .ha-pop { transform: none !important; }
}
/* the accent line of the hero title always on its own line, centred, the underline as wide as its words */
.ha-title .ha-under { display: inline-block; }
/* the plan facts mix numbers and words ("160", "Dedicated", "Weekly"): one calmer size so the words never touch */
.ha-panel-facts b { font-size: clamp(22px, 2.3vw, 32px); overflow-wrap: anywhere; }
/* the agent marks keep their orb colours inside the team lists */
.ha .ha-panel-team li > span.is-agent, .ha .ha-report-team li > span.is-agent { background: radial-gradient(circle at 35% 30%, #FFA58F 0%, #C93A20 72%); }
.ha .ha-panel-team li > span.is-agent.b { background: radial-gradient(circle at 35% 30%, #5FB3C2 0%, #135868 72%); }
.ha .ha-panel-team li > span.is-agent.c { background: radial-gradient(circle at 35% 30%, #CFF3EF 0%, #3E9AA8 72%); }
/* the CTA orbs keep clear of the words: one above right, two low at the sides */
/* measured: at 320, 768 and 1024 the enlarged pictures touched the hero buttons; more room above the cards there */
.ha-pair { margin-top: clamp(300px, 26vw, 330px); }
@media (max-width: 700px) { .ha-pair { margin-top: 270px; } }

/* phones: the three tabs stay on one line, sliding sideways if needed */
@media (max-width: 700px) { .ha-tabs { flex-wrap: nowrap; gap: 22px; overflow-x: auto; scrollbar-width: none; } .ha-tabs::-webkit-scrollbar { display: none; } .ha-tabs button { flex: none; font-size: 15px; white-space: nowrap; } }

/* measured: on shorter pictures (1024 and phones) the insight card ran 12 to 14 px past the bottom; it now sits on the
   bottom edge, and on phones the five sources stack higher with the card across the foot */
.ha-insight { top: auto; bottom: 6%; }
@media (max-width: 700px) {
  .ha-src[data-k="1"] { top: 5%; } .ha-src[data-k="2"] { top: 16%; } .ha-src[data-k="3"] { top: 27%; } .ha-src[data-k="4"] { top: 38%; } .ha-src[data-k="5"] { top: 49%; }
  .ha-an-orb { top: 26%; }
  .ha-think { top: calc(26% - 50px); }
  .ha-insight { left: 5%; right: 5%; bottom: 5%; }
}

/* ===== owner, 2026-10-12: the agents are Lisra.Ai's own mark, not nas.com's balls: the dark tile, the light tile
   and the gold mark, floating where their balls float; people and VASSiSTECH carry the round VASSiSTECH mark ===== */
.ha .ha-logo { background: none; box-shadow: none; border-radius: 22%; }
.ha .ha-logo::after { display: none; }
.ha .ha-logo img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 20px rgba(11, 36, 48, .3)) drop-shadow(0 4px 6px rgba(11, 36, 48, .18)); }
.ha .ha-logo.is-gold img { filter: drop-shadow(0 16px 18px rgba(120, 84, 20, .32)) drop-shadow(0 3px 5px rgba(11, 36, 48, .15)); }
.ha .ha-logo.is-vt img { filter: drop-shadow(0 14px 18px rgba(11, 36, 48, .3)); }
.ha .ha-pop .ha-logo.ha-orb-b { width: 158px; bottom: 30px; margin-left: -79px; }
.ha .ha-pop .ha-logo.ha-orb-a { width: 104px; bottom: 6px; margin-left: -176px; }
.ha .ha-pop .ha-logo.ha-orb-c { width: 112px; bottom: 4px; margin-left: 66px; }
/* the round VASSiSTECH mark as a seal on the people's arches */
.ha-seal { position: absolute; left: 50%; bottom: 14px; z-index: 2; width: 74px; height: 74px; margin-left: -150px; border-radius: 50%; background: #fff; padding: 5px; box-sizing: border-box; box-shadow: 0 14px 24px -14px rgba(11, 36, 48, .55); animation: ha-float 5.5s ease-in-out infinite; }
.ha-seal img { display: block; width: 100%; height: 100%; }
/* the small faces: a white ring round each mark */
.ha .ha-faces i.is-mark, .ha .ha-faces.is-marks i { background: #fff; padding: 2px; box-sizing: border-box; overflow: hidden; }
.ha .ha-faces img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ha .ha-faces.is-marks i { border-radius: 30%; }
.ha span.is-mark { background: #fff !important; padding: 2px; box-sizing: border-box; overflow: hidden; box-shadow: 0 0 0 1px rgba(19, 88, 104, .08); }
.ha span.is-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* analyze: the dark tile in the middle of the sources */
.ha .ha-an-orb .ha-logo { inset: 0; width: 100%; }
/* monitor: by day the light tile glows warm, by night the dark tile glows like the moon */
.ha .ha-mon-orb .ha-logo { inset: 0; width: 100%; }
.ha .ha-mon-orb .ha-orb-sun img { filter: drop-shadow(0 0 30px rgba(255, 196, 130, .85)) drop-shadow(0 18px 24px rgba(120, 60, 20, .3)); }
.ha .ha-mon-orb .ha-orb-moon img { filter: drop-shadow(0 0 34px rgba(255, 236, 190, .55)) drop-shadow(0 0 70px rgba(212, 175, 95, .35)); }
/* execute: the agent's mark over its name */
/* the agents-first tab picture and the call to action */
.ha .ha-panel-pic.is-agents .ha-logo.ha-orb-b { width: 150px; top: 20%; margin-left: -75px; }
.ha .ha-panel-pic.is-agents .ha-logo.ha-orb-a { width: 100px; top: 40%; margin-left: -160px; }
.ha .ha-panel-pic.is-agents .ha-logo.ha-orb-c { width: 100px; top: 40%; margin-left: 60px; }
@media (max-width: 700px) {
  .ha .ha-pop .ha-logo.ha-orb-b { width: 128px; margin-left: -64px; }
  .ha .ha-pop .ha-logo.ha-orb-a { width: 84px; margin-left: -146px; }
  .ha .ha-pop .ha-logo.ha-orb-c { width: 90px; margin-left: 56px; }
  .ha-seal { width: 60px; height: 60px; margin-left: -124px; }
  .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-b { width: 120px; margin-left: -60px; }
  .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-a { width: 80px; margin-left: -130px; }
  .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-c { width: 80px; margin-left: 50px; }
}
.ha .ha-mon-orb .ha-orb-sun { animation: ha-day 10s ease-in-out infinite, ha-float 5.5s ease-in-out infinite; }
@keyframes ha-day { 0%, 28% { opacity: 1; } 38%, 72% { opacity: 0; } 82%, 100% { opacity: 1; } }
/* measured: the seal sat behind the card's top edge; it rides higher on the arch, fully in view */
.ha-seal { bottom: 62px; }
.ha .ha-pop .ha-logo.ha-orb-a { bottom: 22px; }
.ha .ha-pop .ha-logo.ha-orb-c { bottom: 18px; }
@media (max-width: 700px) { .ha-seal { bottom: 52px; } }
/* lighter for the browser: the monitor notes fade without a running blur or a backdrop blur (both repaint every
   frame); the look is the same, phones keep a smooth frame rate */
.ha-mon .ha-note { backdrop-filter: none; background: rgba(255, 255, 255, .94); will-change: opacity, transform; }
@keyframes ha-arrive { 0% { opacity: 0; transform: translateY(14px) scale(.95); } 6%, 52% { opacity: 1; transform: none; } 62% { opacity: .4; transform: translateY(-4px) scale(.98); } 70%, 100% { opacity: 0; transform: translateY(-8px) scale(.96); } }
.ha-band-pics figcaption { backdrop-filter: none; background: rgba(6, 26, 32, .7); }

/* owner, 2026-10-12: every Lisra mark is the transparent one, with no tile and no border or ring of any kind */
.ha .ha-faces.is-marks i { background: none; border: 0; padding: 0; border-radius: 0; overflow: visible; }
.ha .ha-faces.is-marks i + i { margin-left: -4px; }
.ha span.is-mark.is-lisra { background: none !important; padding: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.ha .ha-logo.is-gold { border-radius: 0; }
/* monitor: the same gold mark, a warm sun glow by day and a pale moon glow by night */
.ha .ha-mon-orb .ha-orb-sun img { filter: drop-shadow(0 0 26px rgba(255, 190, 120, .9)) drop-shadow(0 16px 20px rgba(120, 60, 20, .3)); }
.ha .ha-mon-orb .ha-orb-moon img { filter: drop-shadow(0 0 28px rgba(255, 244, 214, .75)) drop-shadow(0 0 60px rgba(200, 220, 255, .35)); }
/* the transparent marks have no tile to hold them apart: each stands on its own with clear air between them */
.ha .ha-pop .ha-logo.ha-orb-b { width: 150px; margin-left: -75px; bottom: 34px; }
.ha .ha-pop .ha-logo.ha-orb-a { width: 92px; margin-left: -191px; bottom: 16px; }
.ha .ha-pop .ha-logo.ha-orb-c { width: 92px; margin-left: 99px; bottom: 16px; }
.ha .ha-faces.is-marks { gap: 3px; }
.ha .ha-faces.is-marks i { width: 26px; height: 26px; }
.ha .ha-faces.is-marks i + i { margin-left: 0; }
.ha .ha-panel-pic.is-agents .ha-logo.ha-orb-b { width: 150px; margin-left: -75px; }
.ha .ha-panel-pic.is-agents .ha-logo.ha-orb-a { width: 96px; margin-left: -199px; }
.ha .ha-panel-pic.is-agents .ha-logo.ha-orb-c { width: 96px; margin-left: 103px; }
@media (max-width: 700px) {
  .ha .ha-pop .ha-logo.ha-orb-b { width: 120px; margin-left: -60px; }
  .ha .ha-pop .ha-logo.ha-orb-a { width: 72px; margin-left: -148px; }
  .ha .ha-pop .ha-logo.ha-orb-c { width: 72px; margin-left: 76px; }
  .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-b { width: 120px; margin-left: -60px; }
  .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-a { width: 76px; margin-left: -152px; }
  .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-c { width: 76px; margin-left: 76px; }
}
@media (max-width: 360px) {
  .ha .ha-pop .ha-logo.ha-orb-b, .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-b { width: 100px; margin-left: -50px; }
  .ha .ha-pop .ha-logo.ha-orb-a, .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-a { width: 60px; margin-left: -122px; }
  .ha .ha-pop .ha-logo.ha-orb-c, .ha .ha-panel-pic.is-agents .ha-logo.ha-orb-c { width: 60px; margin-left: 62px; }
}

/* ===== owner, 2026-10-12: real people over the Hire Humans card, no background, as on nas.com (measured there: she
   starts about three times her size under the headline and settles onto the card as the page scrolls; he fades up
   from behind her between about 45 and 64 % of that scroll and then stays). Their busts stand on the card's top edge,
   the card hiding where the picture ends. The agents card does the same with the Lisra marks: the middle one large
   and settling, the two beside it rising into place. ===== */
.ha .ha-pop { transform: none; will-change: auto; }
.ha .ha-pair { margin-top: 520px; }
.ha-pop.is-people { overflow: visible; }
.ha-person { position: absolute; bottom: 0; left: 50%; width: auto; max-width: none; transform-origin: 50% 100%; will-change: transform, opacity; }
.ha-person.is-her { height: 216px; margin-left: -58px; z-index: 2; transform: scale(var(--ha-g, 1)); filter: drop-shadow(0 18px 24px rgba(11, 36, 48, .12)); }
.ha-person.is-him { height: 226px; margin-left: -196px; z-index: 1; opacity: var(--ha-o, 1); transform: translateY(var(--ha-y, 0px)); }
.ha .ha-pop .ha-logo[data-ha-grow] { transform-origin: 50% 100%; transform: scale(var(--ha-g, 1)); will-change: transform; }
.ha .ha-pop .ha-logo[data-ha-rise] { transform: translateY(var(--ha-r, 0px)); will-change: transform; }
@media (max-width: 900px) { .ha .ha-pair { row-gap: 250px; } }
@media (max-width: 700px) {
  .ha .ha-pair { margin-top: 380px; }
  .ha-person.is-her { height: 180px; margin-left: -50px; }
  .ha-person.is-him { height: 188px; margin-left: -164px; }
}
@media (prefers-reduced-motion: reduce) { .ha .ha-pair { margin-top: clamp(300px, 26vw, 330px); } .ha-person, .ha .ha-pop .ha-logo { transform: none !important; opacity: 1 !important; } }
/* the card stays in front: the people and the marks stand behind its top edge, as on nas.com */
.ha .ha-pop { z-index: 0; }

/* ===== owner, 2026-10-12: lisraai.com's running clock on the Agents monitor picture, same to same (its sizes,
   colours and 22 s text turn from lisraai.com legacy-sections.css): a 96 px clock 20 px above the picture's top
   left corner, the picture cut round it in a 58 px notch with a thin gold rim, hands on the visitor's real time ===== */
.ha-mon-wrap { position: relative; min-width: 0; }
.ha .ha-stage.ha-mon { -webkit-mask: radial-gradient(circle 58px at 52px 28px, transparent 56px, #000 58px); mask: radial-gradient(circle 58px at 52px 28px, transparent 56px, #000 58px); }
.ha-mon-rim { position: absolute; z-index: 5; left: 52px; top: 28px; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 1px solid rgba(214, 182, 109, .7); box-sizing: border-box; pointer-events: none; }
.ha-clock { position: absolute; z-index: 6; top: -20px; left: 4px; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 36%, #2a2118, #15110b 72%); border: 1px solid rgba(214, 182, 109, .34); box-sizing: border-box; box-shadow: 0 16px 40px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(214, 182, 109, .22), inset 0 0 26px rgba(0, 0, 0, .5); }
.ha-clock-text { position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%; animation: ha-clockspin 22s linear infinite; }
.ha-clock-text text { font: 300 8.2px 'Manrope', sans-serif; letter-spacing: .14em; fill: rgba(214, 182, 109, .9); text-transform: uppercase; }
@keyframes ha-clockspin { to { transform: rotate(360deg); } }
.ha-clock-face { position: relative; width: 58px; height: 58px; overflow: visible; }
.ha-clock .rc-face { fill: #17120b; stroke: rgba(214, 182, 109, .45); stroke-width: 1.4; }
.ha-clock .rc-ticks line { stroke: rgba(214, 182, 109, .55); stroke-width: 1.7; stroke-linecap: round; }
.ha-clock .rc-h { stroke: #f6efe1; stroke-width: 3.2; stroke-linecap: round; }
.ha-clock .rc-m { stroke: #efe6d2; stroke-width: 2.3; stroke-linecap: round; }
.ha-clock .rc-s { stroke: #bda779; stroke-width: 1.3; stroke-linecap: round; }
.ha-clock .rc-pin { fill: #bda779; stroke: #17120b; stroke-width: .8; }
@media (prefers-reduced-motion: reduce) { .ha-clock-text { animation: none; } }
/* lisraai.com's phone size: an 84 px clock in a 52 px notch */
@media (max-width: 520px) {
  .ha-clock { top: -18px; width: 84px; height: 84px; }
  .ha-clock-face { width: 50px; height: 50px; }
  .ha .ha-stage.ha-mon { -webkit-mask: radial-gradient(circle 52px at 46px 24px, transparent 50px, #000 52px); mask: radial-gradient(circle 52px at 46px 24px, transparent 50px, #000 52px); }
  .ha-mon-rim { left: 46px; top: 24px; width: 107px; height: 107px; margin: -53.5px 0 0 -53.5px; }
}
/* the clock's corner stays clear, as on lisraai.com: the inbox moves to the top right and the notes rearrange round it */
.ha-mon .m1 { left: auto; right: 4%; top: 5%; }
.ha-mon .m4 { right: auto; left: 4%; top: 25%; }
.ha-mon .m7 { right: 4%; top: 39%; }
.ha-mon .m8 { right: 6%; top: 53%; }
.ha-mon .m2 { left: 4%; top: 41%; }
.ha-mon .m3 { left: 6%; top: 57%; }
.ha-mon .m7 { top: 45%; }
.ha-mon .m8 { top: 58%; }
/* phones: five notes, each with its own room (the other three only fit a wider picture) */
@media (max-width: 700px) {
  .ha-mon .m3, .ha-mon .m5, .ha-mon .m7, .ha-mon .m8 { display: none; }
  .ha-mon .m1 { width: 58%; right: 4%; top: 4%; }
  .ha-mon .m4 { left: 4%; top: 37%; }
  .ha-mon .m2 { left: 4%; top: 53%; }
  .ha-mon .m6 { right: 4%; bottom: 4%; width: 56%; }
}
@media (max-width: 1024px) { .ha-mon .m8 { display: none; } .ha-mon .m7 { top: 52%; } }
@media (max-width: 700px) {
  .ha-mon .m1 .ha-msg:last-child { display: none; }
  .ha-mon .m4 { top: 42%; }
  .ha-mon .m2 { top: 58%; }
}
/* measured: on narrow pictures the notes wrap to two or three lines and grow taller, so fewer and wider notes */
@media (max-width: 1024px) { .ha-mon .m7 { display: none; } }
@media (max-width: 700px) {
  .ha-mon .ha-note { max-width: 80%; }
  .ha-mon .m6 { display: none; }
  .ha-mon .m3 { display: flex; left: 4%; top: auto; bottom: 4%; }
  .ha-mon .m4 { top: 47%; }
  .ha-mon .m2 { top: auto; bottom: calc(4% + 72px); }
}
@media (max-width: 340px) { .ha-mon .m4 { top: 47.5%; } .ha-mon .m2 { bottom: calc(4% + 66px); } }
/* owner, 2026-10-12: the clock in VASSiSTECH's own colours (lisraai.com's shape and motion kept): the logo's deep
   green for the body, white hands, the brand red orange for the turning words, the second hand and the pin */
.ha-clock { background: radial-gradient(circle at 50% 34%, #1B6B7D 0%, #135868 45%, #0B3540 100%); border: 1px solid rgba(255, 255, 255, .22); box-shadow: 0 16px 34px -10px rgba(11, 36, 48, .45), inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 24px rgba(4, 24, 31, .45); }
.ha-clock-text text { fill: #EC5C43; font-weight: 400; }
.ha-clock .rc-face { fill: #0E3F4B; stroke: rgba(255, 255, 255, .28); }
.ha-clock .rc-ticks line { stroke: rgba(255, 255, 255, .55); }
.ha-clock .rc-h { stroke: #FFFFFF; }
.ha-clock .rc-m { stroke: #F1F5FD; }
.ha-clock .rc-s { stroke: #EC5C43; }
.ha-clock .rc-pin { fill: #EC5C43; stroke: #0E3F4B; }
.ha-mon-rim { border-color: rgba(19, 88, 104, .45); }

/* owner, 2026-10-12: the clock follows the picture's day and night and reads clearly. Same 10 s cycle as the sky
   (both start with the page, so they turn together): by day a white clock with brand green hands and red orange words,
   by night a brand green clock with white hands and white words; the second hand stays red orange. A size larger
   (112 px, the notch grown with it, lisraai.com's 10 px gap kept), thicker hands, larger words. */
.ha-clock { top: -22px; left: 4px; width: 112px; height: 112px; background-color: #FFFFFF; background-image: radial-gradient(circle at 50% 34%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 45%, rgba(4, 24, 31, .18) 100%); border: 1px solid rgba(19, 88, 104, .22); animation: ha-clock-body 10s ease-in-out infinite; }
.ha-clock-face { width: 70px; height: 70px; }
.ha-clock-text text { font-size: 9px; font-weight: 500; letter-spacing: .12em; animation: ha-clock-words 10s ease-in-out infinite; }
.ha-clock .rc-face { animation: ha-clock-dial 10s ease-in-out infinite; stroke-width: 1.6; }
.ha-clock .rc-ticks line { stroke-width: 2.2; animation: ha-clock-ink 10s ease-in-out infinite; }
.ha-clock .rc-h { stroke-width: 4.2; animation: ha-clock-ink 10s ease-in-out infinite; }
.ha-clock .rc-m { stroke-width: 3; animation: ha-clock-ink 10s ease-in-out infinite; }
.ha-clock .rc-s { stroke-width: 1.6; stroke: #DB4327; }
.ha-clock .rc-pin { r: 3.4; fill: #DB4327; animation: ha-clock-pin 10s ease-in-out infinite; }
@keyframes ha-clock-body { 0%, 28% { background-color: #FFFFFF; border-color: rgba(19, 88, 104, .22); } 38%, 72% { background-color: #135868; border-color: rgba(255, 255, 255, .26); } 82%, 100% { background-color: #FFFFFF; border-color: rgba(19, 88, 104, .22); } }
@keyframes ha-clock-dial { 0%, 28% { fill: #F4F8FA; stroke: rgba(19, 88, 104, .35); } 38%, 72% { fill: #0E3F4B; stroke: rgba(255, 255, 255, .3); } 82%, 100% { fill: #F4F8FA; stroke: rgba(19, 88, 104, .35); } }
@keyframes ha-clock-ink { 0%, 28% { stroke: #135868; } 38%, 72% { stroke: #FFFFFF; } 82%, 100% { stroke: #135868; } }
@keyframes ha-clock-words { 0%, 28% { fill: #DB4327; } 38%, 72% { fill: #FFFFFF; } 82%, 100% { fill: #DB4327; } }
@keyframes ha-clock-pin { 0%, 28% { stroke: #F4F8FA; } 38%, 72% { stroke: #0E3F4B; } 82%, 100% { stroke: #F4F8FA; } }
.ha-clock-text { animation: ha-clockspin 22s linear infinite; }
/* the notch grown with the clock: centre (60, 34), clear to 64 px, the rim just outside */
.ha .ha-stage.ha-mon { -webkit-mask: radial-gradient(circle 66px at 60px 34px, transparent 64px, #000 66px); mask: radial-gradient(circle 66px at 60px 34px, transparent 64px, #000 66px); }
.ha-mon-rim { left: 60px; top: 34px; width: 136px; height: 136px; margin: -68px 0 0 -68px; }
@media (max-width: 520px) {
  .ha-clock { top: -20px; width: 96px; height: 96px; }
  .ha-clock-face { width: 60px; height: 60px; }
  .ha .ha-stage.ha-mon { -webkit-mask: radial-gradient(circle 58px at 52px 28px, transparent 56px, #000 58px); mask: radial-gradient(circle 58px at 52px 28px, transparent 56px, #000 58px); }
  .ha-mon-rim { left: 52px; top: 28px; width: 120px; height: 120px; margin: -60px 0 0 -60px; }
}
@media (prefers-reduced-motion: reduce) { .ha-clock, .ha-clock * { animation: none !important; } }
/* measured with the larger notch: the note under it starts below it on every height; the inbox clears it on 320 px */
@media (min-width: 701px) { .ha-mon .m4 { top: max(25%, 110px); } }
@media (max-width: 340px) { .ha-mon .m1 { width: 54%; } }
@media (min-width: 701px) { .ha-mon .m2 { top: max(41%, 182px); } .ha-mon .m3 { top: max(57%, 254px); } .ha-mon .m8 { top: 55%; } }
/* owner, 2026-10-12: his own two photos (already without background), cropped to the bust; wider than the first pair,
   so the offsets keep both inside the card's width */
.ha-person.is-her { height: 216px; margin-left: -64px; }
.ha-person.is-him { height: 226px; margin-left: -200px; }
@media (max-width: 700px) { .ha-person.is-her { height: 180px; margin-left: -56px; } .ha-person.is-him { height: 188px; margin-left: -166px; } }
@media (max-width: 700px) { .ha-person.is-him { margin-left: -160px; } .ha-person.is-her { margin-left: -50px; } }
@media (max-width: 340px) { .ha-person.is-her { height: 160px; margin-left: -46px; } .ha-person.is-him { height: 168px; margin-left: -140px; } }
@media (max-width: 340px) { .ha-person.is-her { height: 146px; margin-left: -42px; } .ha-person.is-him { height: 154px; margin-left: -130px; } }

/* owner, 2026-10-12: no fade under the pictures. While she is large she stands further left and is never wider than
   the card, so the foot of her picture stays behind the card the whole time; as she settles she moves back to her
   place. The script sets the size and the shift (--ha-g, --ha-tx) from the card's real width. The cards of this pair
   show from the start (no fade in), so the card is always there to hide the foot. */
.ha-person.is-her { transform: translateX(var(--ha-tx, 0px)) scale(var(--ha-g, 1)); }
.ha .ha-pair { margin-top: 400px; }
@media (max-width: 700px) { .ha .ha-pair { margin-top: 300px; } }
/* owner, 2026-10-12: his face read larger than hers. Measured with Apple Vision on the two files: her face 245 px in
   660, his 319 px in 760, so on screen 80 px against 95 px. His picture is now sized so both faces are the same
   height (80 px desktop, 67 px phones, 54 px at 320), and lifted a little so his eyes sit about 5 px below hers, as
   for someone standing just behind; the lift stays inside the strip the card hides. */
.ha-person.is-him { height: 191px; margin-left: -180px; bottom: 14px; }
@media (max-width: 700px) { .ha-person.is-him { height: 159px; margin-left: -150px; bottom: 12px; } }
@media (max-width: 340px) { .ha-person.is-him { height: 129px; margin-left: -122px; bottom: 9px; } }
/* owner, 2026-10-12: large at the start as on nas.com (3 times on desktop, 2.2 on phones); the cards start lower so
   her picture's foot is below the screen while she is that large */
.ha .ha-pair { margin-top: 660px; }
@media (max-width: 700px) { .ha .ha-pair { margin-top: 440px; } }
.ha .ha-pair { margin-top: 700px; }
@media (max-width: 700px) { .ha .ha-pair { margin-top: 460px; } }
/* her face a little higher in the first screen, as on nas.com (their hair starts just under the start box) */
.ha .ha-pair { margin-top: 672px; }
/* owner, 2026-10-12: his newly edited pair (her hair now tied back). Measured with Apple Vision on the new files: her
   face 350 px in 940, his 259 px in 680. Sizes set so both faces are the same height again (80 px desktop, 67 px
   phones, 54 px at 320) and his eyes sit about 5 px below hers */
.ha-person.is-her { height: 216px; margin-left: -64px; }
.ha-person.is-him { height: 211px; margin-left: -196px; bottom: -4px; }
@media (max-width: 700px) { .ha-person.is-her { height: 180px; margin-left: -50px; } .ha-person.is-him { height: 176px; margin-left: -160px; bottom: -3px; } }
@media (max-width: 340px) { .ha-person.is-her { height: 146px; margin-left: -42px; } .ha-person.is-him { height: 143px; margin-left: -130px; bottom: -2px; } }
/* owner, 2026-10-12: her face larger, both settled and fully zoomed. Her picture is cut just under the collar (860 of
   1402, face 351 px), so the same height shows a larger face: settled 88 px against his 80 (desktop), 73 against 67
   (phones), 59 against 54 (320); fully zoomed she starts 3.2 times (2.3 on phones), a face of about 282 px instead of
   241. His eyes stay a few px below hers (he stands behind), the extra drop inside the strip the card hides. */
.ha-person.is-her { height: 216px; margin-left: -70px; }
.ha-person.is-him { bottom: -16px; }
.ha .ha-pair { margin-top: 716px; }
@media (max-width: 700px) { .ha-person.is-her { height: 180px; margin-left: -56px; } .ha-person.is-him { bottom: -14px; } .ha .ha-pair { margin-top: 480px; } }
@media (max-width: 340px) { .ha-person.is-her { height: 146px; margin-left: -46px; } .ha-person.is-him { bottom: -12px; } }
.ha-person.is-him { bottom: -12px; }
.ha .ha-pair { margin-top: 680px; }
@media (max-width: 700px) { .ha-person.is-him { bottom: -10px; } }
@media (max-width: 340px) { .ha-person.is-him { bottom: -9px; } }
@media (max-width: 700px) { .ha .ha-pair { margin-top: 470px; } } /* after the desktop value, so phones keep their own */
/* owner, 2026-10-12: settled side by side, her face a little smaller: 84 px against his 80 (desktop), 70 against 67
   (phones), 57 against 54.5 (320). Fully zoomed she stays as large as before (start 3.36 times, face about 282 px).
   His eyes kept 4 to 5 px below hers. */
.ha-person.is-her { height: 206px; }
.ha-person.is-him { bottom: -16px; }
@media (max-width: 700px) { .ha-person.is-her { height: 172px; } .ha-person.is-him { bottom: -14px; } }
@media (max-width: 340px) { .ha-person.is-her { height: 139px; } .ha-person.is-him { bottom: -13px; } }
/* owner, 2026-10-12: "24/7" beside the clock, on the picture's top edge right of the notch: a small brand red orange
   tag with a live dot, readable by day and by night; on phones (where the inbox sits there) just under the clock */
.ha-247 { position: absolute; z-index: 4; left: 140px; top: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 10px; border-radius: 999px; background: #C93A20; color: #fff; font: 600 12.5px/1 'Manrope', sans-serif; letter-spacing: .06em; box-shadow: 0 10px 20px -10px rgba(201, 58, 32, .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
.ha-247 i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.ha-247 i::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); animation: ha-pulse 1.8s ease-out infinite; }
@media (max-width: 700px) { .ha-247 { left: 14px; top: 98px; padding: 5px 10px 5px 8px; font-size: 11.5px; } }
@media (max-width: 520px) { .ha-247 { top: 92px; } }
@media (prefers-reduced-motion: reduce) { .ha-247 i::after { animation: none; } }
/* owner, 2026-10-12: "24/7" as words only, above the picture beside the clock, no tag behind them: large thin Sora in
   the brand green, the slash in red orange (replaces the pill) */
.ha-247 { position: absolute; z-index: 6; left: 136px; top: -50px; display: block; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--vt-brand-green); font: 300 46px/1 'Sora', sans-serif; letter-spacing: -.03em; }
.ha-247 span { color: var(--vt-label); font-weight: 300; margin: 0 .02em; }
.ha-247 i { display: none; }
@media (max-width: 700px) { .ha-247 { left: 118px; top: -40px; padding: 0; font-size: 36px; } }
@media (max-width: 520px) { .ha-247 { left: 106px; top: -38px; font-size: 32px; } }
.ha-247 { top: -60px; font-size: 56px; }
@media (max-width: 700px) { .ha-247 { top: -46px; font-size: 42px; } }
@media (max-width: 520px) { .ha-247 { top: -42px; font-size: 36px; } }
/* stacked layouts (up to 900 px): room above the picture for the clock and the 24/7 words, clear of the list above */
@media (max-width: 900px) { .ha-mon-wrap { margin-top: 44px; } }
/* owner, 2026-10-12: 24/7 joined to the clock (6 px from it), a quarter of its height inside the picture, heavier in a
   different premium face: Manrope 800, tight, a brand green gradient with the slash in red orange, a soft light halo
   so the part over the picture reads by day and by night */
.ha-247 { left: 122px; top: -42px; font: 800 56px/1 'Manrope', sans-serif; letter-spacing: -.045em; background: linear-gradient(180deg, #1F7A8E 0%, #135868 55%, #0B3540 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 3px 10px rgba(255, 255, 255, .55)); }
.ha-247 span { background: linear-gradient(180deg, #F0745C 0%, #DB4327 60%, #B0301A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; margin: 0 .01em; }
@media (max-width: 700px) { .ha-247 { left: 122px; top: -32px; font-size: 42px; } }
@media (max-width: 520px) { .ha-247 { left: 106px; top: -27px; font-size: 36px; } }
/* measured on the glyphs (41 px tall at 56 px): a quarter of them inside the picture */
.ha-247 { top: -39px; }
@media (max-width: 700px) { .ha-247 { top: -29px; } }
@media (max-width: 520px) { .ha-247 { top: -25px; } }
/* owner, 2026-10-12: half of the 24/7 letters inside the picture */
.ha-247 { top: -29px; }
@media (max-width: 700px) { .ha-247 { top: -21px; } }
@media (max-width: 520px) { .ha-247 { top: -18px; } }
@media (max-width: 700px) { .ha-mon .m1 { top: 30px; } } /* phones: clear of the 24/7 letters inside the picture */
@media (max-width: 340px) { .ha-mon .m4 { display: none; } } /* 320 px: three notes, each with room */
/* owner, 2026-10-12: the 2 touched the clock's edge; the words a little to the right */
.ha-247 { left: 134px; }
@media (max-width: 700px) { .ha-247 { left: 130px; } }
@media (max-width: 520px) { .ha-247 { left: 114px; } }

/* ===== owner, 2026-10-12: Agents execute rebuilt from nas.com's video, frame by frame. Content Agent: large ad designs
   slide left, the middle one in front. The middle design (our team photo) then turns into the picture of the post the
   Ads Agent runs: the post frame appears round it, an engagement card opens out of a heart and counts up, "Trending
   Topics" types itself in a blue pill, chosen topics drop in above a cloud of pastel tags. Every size follows the
   picture's own width and height (container units), so phones see the same scene smaller. ===== */
.ha-ex { container-type: size; }
.ha-ex-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; }
.ha-ex-scene.on { opacity: 1; }
.ha-ex-head { position: absolute; left: 0; right: 0; top: 5cqh; display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; margin: 0; font: 500 clamp(12px, 3.6cqw, 17px)/1 'Manrope', sans-serif; color: var(--vt-ink); transition: opacity .35s ease; }
.ha .ha-ex-head .ha-logo { position: relative; width: clamp(30px, 9cqw, 46px); height: auto; }
.ha-ex-scene.is-b .ha-ex-head { flex-direction: row; justify-content: center; gap: 2cqw; font-size: clamp(13px, 3.9cqw, 18px); }
.ha-ex-scene.is-b .ha-ex-head .ha-logo { width: clamp(26px, 7.4cqw, 38px); }

/* an ad design, as nas.com draws theirs: brand at the top left, a bold headline, a line, a call button, three marks at
   the foot; the picture fills the right and fades to white behind the words */
.ha-ad { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; background: #fff; container-type: inline-size; }
.ha-ad-pic { position: absolute; top: 0; right: 0; width: 70%; height: 82%; object-fit: cover; }
.ha-ad-pic.is-c { object-position: 42% 35%; }
.ha-ad-pic.is-r { object-position: 60% 40%; }
.ha-ad::before { content: ''; position: absolute; z-index: 1; inset: 0 0 18% 0; background: linear-gradient(90deg, #fff 0%, #fff 34%, rgba(255, 255, 255, .78) 50%, rgba(255, 255, 255, 0) 70%); }
.ha-ad-copy { position: absolute; z-index: 2; left: 6cqw; top: 6cqw; width: 52cqw; display: flex; flex-direction: column; align-items: flex-start; gap: 2.4cqw; }
.ha-ad-brand { display: inline-flex; align-items: center; gap: 1.6cqw; }
.ha-ad-brand img { width: 7cqw; height: 7cqw; }
.ha-ad-brand > span { display: grid; font: 700 3.6cqw/1.05 'Manrope', sans-serif; color: var(--vt-brand-green); letter-spacing: .02em; }
.ha-ad-brand small { font: 500 1.9cqw/1.1 'Manrope', sans-serif; color: var(--vt-label); letter-spacing: .06em; text-transform: uppercase; }
.ha-ad-copy strong { margin-top: 1.4cqw; font: 800 7.4cqw/1.02 'Manrope', sans-serif; letter-spacing: -.02em; color: var(--vt-brand-green); }
.ha-ad-text { font: 500 3cqw/1.3 'Manrope', sans-serif; color: #33465A; }
.ha-ad-copy em { display: inline-flex; align-items: center; gap: 1.4cqw; margin-top: 1cqw; padding: 1.8cqw 3.4cqw; border-radius: 999px; background: #C93A20; color: #fff; font: 700 2.8cqw/1 'Manrope', sans-serif; font-style: normal; }
.ha-ad-copy em .vt-icon { width: 2.8cqw; height: 2.8cqw; }
.ha-ad-feats { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 18%; margin: 0; padding: 0 5cqw; list-style: none; display: flex; align-items: center; justify-content: space-around; background: #fff; border-top: 1px solid #EEF1F4; }
.ha-ad-feats li { display: flex; flex-direction: column; align-items: center; gap: .8cqw; font: 600 2.2cqw/1 'Manrope', sans-serif; color: var(--vt-brand-green); }
.ha-ad-feats .vt-icon { width: 4.4cqw; height: 4.4cqw; }

/* scene one: the designs */
.ha-deck { position: absolute; left: 0; right: 0; top: 30cqh; height: 52cqh; }
.ha-deck-track { position: absolute; left: 50%; top: 0; height: 100%; display: flex; align-items: center; gap: 3cqw; transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
.ha-deck-card { position: relative; flex: none; width: 46cqw; aspect-ratio: 1.08; border-radius: 3.4cqw; box-shadow: 0 18px 34px -20px rgba(11, 36, 48, .45); transform: scale(.88); transition: transform .8s cubic-bezier(.4, 0, .2, 1), opacity .5s ease; overflow: hidden; }
.ha-deck-card.is-front { transform: scale(1); z-index: 2; }
.ha-ex.is-morph .ha-deck-card:not(.is-hero) { opacity: 0; }
.ha-ex.is-morph .is-a .ha-ex-head { opacity: 0; }

/* scene two: the post the ads agent runs */
.ha-post { position: absolute; left: 28cqw; top: 17cqh; width: 46cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 22px 40px -24px rgba(11, 36, 48, .5), 0 0 0 1px rgba(19, 88, 104, .05); overflow: hidden; }
.ha-post-top { display: flex; align-items: center; gap: 2cqw; margin: 0; padding: 2.2cqw 2.6cqw; }
.ha-post-top img { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; }
.ha-post-top strong { display: block; font: 700 2.9cqw/1.15 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-post-top small { display: block; font: 400 2.2cqw/1.2 'Inter', sans-serif; color: var(--vt-muted); }
.ha-post-pic { width: 100%; aspect-ratio: 1.08; border-radius: 0; overflow: hidden; }
.ha-post-bar { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 2.2cqw 2.6cqw; color: var(--vt-ink); }
.ha-post-bar span { display: inline-flex; gap: 2.4cqw; }
.ha-post-bar .vt-icon { width: 3.6cqw; height: 3.6cqw; }
.ha-metric { position: absolute; z-index: 3; left: 15cqw; top: 41cqh; width: 22cqw; padding: 3cqw 2cqw 2.6cqw; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: .8cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 18px 32px -18px rgba(11, 36, 48, .5); clip-path: circle(4cqw at 50% 6.2cqw); transition: clip-path .7s cubic-bezier(.4, 0, .2, 1); }
.ha-metric.on { clip-path: inset(0 round 3cqw); }
.ha-metric b { display: grid; place-items: center; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: #FCE6E0; color: var(--vt-label); }
.ha-metric b .vt-icon { width: 3.4cqw; height: 3.4cqw; fill: #DB4327; }
.ha-metric strong { font: 600 5.4cqw/1.1 'Manrope', sans-serif; color: var(--vt-ink); letter-spacing: -.02em; }
.ha-metric small { font: 400 2.1cqw/1.2 'Inter', sans-serif; color: var(--vt-muted); }
.ha-metric em { font: 600 2.1cqw/1.2 'Manrope', sans-serif; font-style: normal; color: #1F7A57; }
.ha-trend { position: absolute; z-index: 3; left: 60cqw; top: 62cqh; margin: 0; height: 7.6cqw; min-width: 7.6cqw; max-width: 7.6cqw; padding: 0 2.6cqw; box-sizing: border-box; display: flex; align-items: center; overflow: hidden; white-space: nowrap; border-radius: 1.8cqw; background: #DCEBFA; border: 1px solid #9CC3EA; color: #2C5D8F; font: 500 3cqw/1 'Manrope', sans-serif; opacity: 0; transition: max-width .8s cubic-bezier(.4, 0, .2, 1), opacity .3s ease; }
.ha-trend.is-shown { opacity: 1; }
.ha-trend.on { max-width: 40cqw; }
.ha-topics { position: absolute; z-index: 2; left: 47cqw; top: 70cqh; width: 46cqw; padding: 2cqw; box-sizing: border-box; border-radius: 2.6cqw; background: #fff; box-shadow: 0 18px 30px -18px rgba(11, 36, 48, .45), 0 0 0 1px rgba(19, 88, 104, .05); }
.ha-picked { display: flex; flex-wrap: wrap; gap: 1.2cqw; min-height: 4.8cqw; margin: 0 0 1.6cqw; }
.ha-picked span { display: inline-flex; align-items: center; gap: .8cqw; padding: .9cqw 1.6cqw; border-radius: 1.2cqw; border: 1px solid #D8DEE6; font: 500 2cqw/1 'Manrope', sans-serif; color: var(--vt-ink); opacity: 0; transform: translateY(-4px); transition: opacity .3s ease, transform .3s ease; }
.ha-picked span.on { opacity: 1; transform: none; }
.ha-picked i { font-style: normal; color: var(--vt-muted); }
.ha-topics ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2cqw; }
.ha-topics li { padding: .9cqw 1.7cqw; border-radius: 1.2cqw; font: 500 2cqw/1 'Manrope', sans-serif; color: var(--vt-ink); background: #DDF0EC; border: 1px solid #B9E0D8; opacity: 1; transform: none; }
.ha-topics li:nth-child(4n + 2) { background: #FCE3DD; border-color: #F4C2B6; }
.ha-topics li:nth-child(4n + 3) { background: #FBEBD6; border-color: #F1D2A8; }
.ha-topics li:nth-child(4n) { background: #ECE6F7; border-color: #D4C8EE; }
.ha-ex.is-out .ha-ex-scene { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ha-ex .is-b { opacity: 1; } .ha-metric { clip-path: none; } .ha-trend { opacity: 1; max-width: none; } .ha-picked span { opacity: 1; transform: none; } }
/* measured: the topics card ran 71 px past the picture's foot; wider, two fewer tags, the pill above it */
.ha-trend { top: 53cqh; left: 58cqw; }
.ha-topics { left: 43cqw; top: 63cqh; width: 52cqw; padding: 1.8cqw; }
.ha-picked { margin-bottom: 1.4cqw; gap: 1cqw; }
.ha-topics ul { gap: 1cqw; }
/* the execute scene keeps the desktop picture's proportion (1.11 to 1) on every screen, centred, so a wide but short
   tablet picture never pushes the post past its foot */
.ha .ha-stage.is-frame > .ha-ex { width: auto; max-width: 100%; height: 100%; aspect-ratio: 1.11; margin: 0 auto; }

/* ===== owner, 2026-10-12: the page shows our whole scope (humans and AI across all of IT and business), not only
   marketing. Four parts, researched against the best AI agent and managed talent sites: a "what do you need done"
   router, four kinds of work on the execute stage, one job passed between agents and people, and a control dial
   beside a real call to a Lisra.Ai agent. ===== */
.ha-label { margin: 0 0 14px; font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-label); }
.ha-router-lead { max-width: 620px; margin: 14px auto 0; font: 300 17px/1.6 'Inter', sans-serif; color: var(--vt-muted); }

/* the router */
.ha-router { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(60px, 8vw, 110px); }
.ha-router-head { text-align: center; max-width: 820px; margin: 0 auto 34px; }
.vt .ha-router h2, .vt .ha-journey h2, .vt .ha-control h2 { margin: 0; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; }
.ha-router-box { max-width: 1040px; margin: 0 auto; }
.ha-ask { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto 18px; padding: 8px 8px 8px 18px; border-radius: 999px; background: #fff; border: 1px solid var(--ha-line); box-shadow: 0 22px 40px -28px rgba(11, 36, 48, .45); transition: border-color .25s ease, box-shadow .25s ease; }
.ha-ask:focus-within { border-color: var(--vt-brand-green); box-shadow: 0 22px 40px -28px rgba(11, 36, 48, .5), 0 0 0 4px rgba(19, 88, 104, .1); }
.ha-ask-ico { display: grid; place-items: center; color: var(--vt-label); }
.ha-ask input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 16px/1.4 'Manrope', sans-serif; color: var(--vt-ink); padding: 10px 0; }
.ha-ask button { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 13px 18px; border: 0; border-radius: 999px; background: var(--vt-coral-ink); color: #fff; font: 600 14.5px/1 'Manrope', sans-serif; cursor: pointer; transition: background-color .25s ease; }
.ha-ask button:hover { background: var(--vt-coral-dark); }
.ha-jobs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 28px; max-width: 980px; }
.ha-job-chip { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--ha-line); background: #fff; font: 500 13.5px/1 'Manrope', sans-serif; color: var(--vt-ink); cursor: pointer; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ha-ease); }
.ha-job-chip:hover { border-color: var(--vt-brand-green); color: var(--vt-brand-green); transform: translateY(-1px); }
.ha-job-chip[aria-selected="true"] { background: var(--vt-brand-green); border-color: var(--vt-brand-green); color: #fff; }
.ha-job-chip.is-match { border-color: var(--vt-brand); }
.ha-teams { position: relative; }
.ha-team-plan { display: grid; grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr) 34px minmax(0, .85fr) 34px minmax(0, 1fr); align-items: stretch; }
.ha-team-plan[hidden] { display: none; }
.ha-plan-step { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 18px 20px; border-radius: 22px; background: #fff; box-shadow: 0 26px 46px -34px rgba(11, 36, 48, .5), 0 0 0 1px rgba(19, 88, 104, .05); opacity: 0; transform: translateY(14px); }
.ha-team-plan.is-on .ha-plan-step { animation: ha-step-in .6s var(--ha-ease) forwards; }
.ha-team-plan.is-on .ha-plan-step:nth-child(3) { animation-delay: .35s; } .ha-team-plan.is-on .ha-plan-step:nth-child(5) { animation-delay: .7s; } .ha-team-plan.is-on .ha-plan-step:nth-child(7) { animation-delay: 1.05s; }
@keyframes ha-step-in { to { opacity: 1; transform: none; } }
.ha-plan-mark { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; }
.ha-plan-mark img { width: 100%; height: 100%; object-fit: contain; }
.ha-plan-mark.is-you { border-radius: 50%; background: rgba(219, 67, 39, .1); color: var(--vt-label); }
.ha-plan-kind { margin: 0; font: 600 11px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-label); }
.ha-plan-who { margin: 0; font: 500 18px/1.25 'Manrope', sans-serif; color: var(--vt-brand-green); }
.ha-plan-do { margin: 0; font: 300 14px/1.55 'Inter', sans-serif; color: var(--vt-text); }
.ha .ha-plan-more { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 'Manrope', sans-serif; color: var(--vt-label); text-decoration: none; }
.ha-plan-step.is-result { background: linear-gradient(165deg, #10414E 0%, #0B2F39 80%); color: #fff; }
.ha-plan-step.is-result .ha-plan-kind { color: var(--vt-label-on-dark); }
.ha-plan-step.is-result .ha-plan-who { color: #fff; }
.ha-plan-step.is-result ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.ha-plan-step.is-result li { display: flex; align-items: center; gap: 8px; font: 400 14px/1.3 'Manrope', sans-serif; color: rgba(255, 255, 255, .88); }
.ha-plan-step.is-result li .vt-icon { color: #8FD9D2; }
.ha-plan-link { position: relative; align-self: center; height: 2px; margin: 0 4px; background: var(--ha-line); overflow: hidden; }
.ha-plan-link i { position: absolute; top: -1px; left: -10px; width: 10px; height: 4px; border-radius: 2px; background: var(--vt-brand); animation: ha-link 1.6s linear infinite; }
@keyframes ha-link { to { left: 100%; } }
.ha-team-plan.is-other { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 34px 20px; border-radius: 26px; background: #fff; box-shadow: 0 26px 46px -34px rgba(11, 36, 48, .5); }
.ha-team-plan.is-other[hidden] { display: none; }
.ha-other-title { margin: 0; font: 400 26px/1.2 'Sora', sans-serif; color: var(--vt-brand-green); }
.ha-other-text { margin: 0 0 8px; max-width: 520px; font: 300 15.5px/1.6 'Inter', sans-serif; color: var(--vt-text); }
@media (max-width: 900px) {
  .ha-team-plan { grid-template-columns: 1fr; gap: 0; }
  .ha-plan-link { width: 2px; height: 22px; margin: 0 auto; }
  .ha-plan-link i { left: -1px; top: -10px; width: 4px; height: 10px; animation-name: ha-link-down; }
  @keyframes ha-link-down { to { top: 100%; } }
}
@media (max-width: 700px) { .ha-ask { flex-wrap: wrap; border-radius: 22px; padding: 10px; } .ha-ask input { flex-basis: calc(100% - 40px); } .ha-ask button { width: 100%; justify-content: center; } .ha-jobs { justify-content: flex-start; } .ha-job-chip { font-size: 12.5px; padding: 8px 12px; } }

/* four kinds of work on the execute stage */
.ha-exwrap { position: relative; min-width: 0; }
.ha-domtabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 14px; padding: 5px; border-radius: 999px; background: #fff; border: 1px solid var(--ha-line); width: fit-content; max-width: 100%; box-sizing: border-box; }
.ha-domtabs button { position: relative; padding: 9px 16px; border: 0; border-radius: 999px; background: none; font: 500 13.5px/1 'Manrope', sans-serif; color: var(--vt-muted); cursor: pointer; overflow: hidden; transition: color .25s ease, background-color .25s ease; }
.ha-domtabs button:hover { color: var(--vt-brand-green); }
.ha-domtabs button[aria-selected="true"] { background: var(--vt-brand-green); color: #fff; }
.ha-domtabs button i { position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .7); transform: scaleX(0); transform-origin: left; }
.ha-domtabs.is-auto button[aria-selected="true"] i { animation: ha-tab var(--ha-dur, 9.6s) linear both; }
.ha .ha-stage.is-frame > .ha-exbox { position: relative; width: auto; max-width: 100%; height: 100%; aspect-ratio: 1.11; margin: 0 auto; border-radius: 22px; background: #F7F7F5; overflow: hidden; }
.ha-exbox > .ha-ex { position: absolute; inset: 0; width: 100%; height: 100%; background: none; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.ha-exbox > .ha-ex.on { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.ha-ex-head.is-pair { flex-direction: row; justify-content: center; gap: 2.4cqw; font-size: clamp(13px, 3.9cqw, 18px); }
.ha-pair-marks { display: inline-flex; align-items: center; }
.ha-pair-marks img { width: clamp(24px, 7cqw, 36px); height: clamp(24px, 7cqw, 36px); object-fit: contain; }
.ha-pair-marks img + img { margin-left: -1.4cqw; }

/* e-commerce sourcing */
.ha-quotes { position: absolute; left: 6cqw; right: 6cqw; top: 19cqh; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4cqw; }
.ha-quote { position: relative; padding: 2.6cqw; border-radius: 2.6cqw; background: #fff; box-shadow: 0 16px 28px -18px rgba(11, 36, 48, .45), 0 0 0 1px rgba(19, 88, 104, .05); opacity: 0; transform: translateY(3cqh); transition: opacity .5s ease, transform .6s var(--ha-ease), box-shadow .4s ease, filter .4s ease; }
.ha-quote.on { opacity: 1; transform: none; }
.ha-quotes.is-picked .ha-quote:not(.is-best) { opacity: .45; filter: grayscale(.4); }
.ha-quotes.is-picked .ha-quote.is-best { box-shadow: 0 0 0 2px #DB4327, 0 18px 30px -16px rgba(219, 67, 39, .5); transform: translateY(-1.2cqh); }
.ha-quote-top { display: flex; align-items: center; gap: 1.2cqw; margin: 0 0 2cqw; font: 700 2.7cqw/1.1 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-quote-top b { display: grid; place-items: center; width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--vt-teal-soft); color: var(--vt-brand-green); }
.ha-quote-top .vt-icon { width: 2.6cqw; height: 2.6cqw; }
.ha-quote-top em { margin-left: auto; display: inline-flex; align-items: center; gap: .4cqw; font: 600 2.2cqw/1 'Manrope', sans-serif; font-style: normal; color: #B07A12; }
.ha-quote-top em .vt-icon { width: 2cqw; height: 2cqw; }
.ha-quote dl { margin: 0; display: grid; gap: 1.2cqw; }
.ha-quote dl div { display: flex; justify-content: space-between; gap: 1cqw; }
.ha-quote dt { font: 400 2.2cqw/1.2 'Inter', sans-serif; color: var(--vt-muted); }
.ha-quote dd { margin: 0; font: 600 2.4cqw/1.2 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-quote-pick { position: absolute; left: 50%; top: -1.6cqw; transform: translate(-50%, -50%) scale(.8); display: inline-flex; align-items: center; gap: .6cqw; padding: .9cqw 1.8cqw; border-radius: 999px; background: #C93A20; color: #fff; font: 700 2cqw/1 'Manrope', sans-serif; white-space: nowrap; opacity: 0; transition: opacity .3s ease, transform .4s var(--ha-ease); }
.ha-quote-pick .vt-icon { width: 2cqw; height: 2cqw; }
.ha-quotes.is-picked .ha-quote.is-best .ha-quote-pick { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ha-listing { position: absolute; left: 14cqw; right: 14cqw; top: 58cqh; display: flex; align-items: center; gap: 3cqw; padding: 2.6cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 22px 36px -22px rgba(11, 36, 48, .5), 0 0 0 1px rgba(19, 88, 104, .05); opacity: 0; transform: translateY(3cqh) scale(.97); transition: opacity .5s ease, transform .6s var(--ha-ease); }
.ha-listing.on { opacity: 1; transform: none; }
.ha-listing-pic { display: grid; place-items: center; flex: none; width: 17cqw; height: 17cqw; border-radius: 2.4cqw; background: linear-gradient(150deg, #FBEBD6, #F1D2A8); color: #8A5A12; }
.ha-listing-pic .vt-icon { width: 8cqw; height: 8cqw; }
.ha-listing-body { min-width: 0; display: grid; gap: .9cqw; }
.ha-listing-kind { margin: 0; font: 600 1.9cqw/1 'Manrope', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--vt-label); }
.ha-listing-title { margin: 0; font: 700 3.3cqw/1.2 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-listing-price { display: flex; align-items: center; gap: 2cqw; margin: 0; font: 800 3.6cqw/1 'Manrope', sans-serif; color: var(--vt-brand-green); }
.ha-listing-price span { display: inline-flex; align-items: center; gap: .6cqw; padding: .9cqw 1.6cqw; border-radius: 999px; background: rgba(31, 122, 87, .12); color: #1F7A57; font: 600 2cqw/1 'Manrope', sans-serif; opacity: 0; transition: opacity .4s ease; }
.ha-listing.is-live .ha-listing-price span { opacity: 1; }
.ha-listing-stock { margin: 0; font: 400 2.2cqw/1.2 'Inter', sans-serif; color: var(--vt-muted); }
.ha-listing-stock b { color: var(--vt-ink); font-weight: 700; }

/* software release */
.ha-pipe { position: absolute; left: 8cqw; right: 8cqw; top: 18cqh; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ha-pipe::before { content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 3.6cqw; height: .5cqw; border-radius: 1cqw; background: #E3E7EC; }
.ha-pipe::after { content: ''; position: absolute; left: 12.5%; top: 3.6cqw; height: .5cqw; width: calc(75% * var(--ha-p, 0)); border-radius: 1cqw; background: linear-gradient(90deg, #135868, #1F7A8E); transition: width .6s var(--ha-ease); }
.ha-pipe li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1.2cqw; font: 600 2.4cqw/1 'Manrope', sans-serif; color: var(--vt-muted); }
.ha-pipe li b { display: grid; place-items: center; width: 7.6cqw; height: 7.6cqw; border-radius: 50%; background: #fff; border: .4cqw solid #E3E7EC; color: var(--vt-muted); transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s var(--ha-ease); }
.ha-pipe li b .vt-icon { width: 3.4cqw; height: 3.4cqw; }
.ha-pipe li.on { color: var(--vt-brand-green); }
.ha-pipe li.on b { background: var(--vt-brand-green); border-color: var(--vt-brand-green); color: #fff; transform: scale(1.06); }
.ha-ci { position: absolute; left: 8cqw; width: 50cqw; top: 39cqh; padding: 2.6cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 18px 30px -20px rgba(11, 36, 48, .45), 0 0 0 1px rgba(19, 88, 104, .05); }
.ha-ci-head { display: flex; align-items: center; gap: 1.2cqw; margin: 0 0 1.8cqw; font: 700 2.7cqw/1 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-ci-head .vt-icon { width: 3cqw; height: 3cqw; color: var(--vt-brand-green); }
.ha-ci-head span { margin-left: auto; font: 500 2.1cqw/1 'Manrope', sans-serif; color: var(--vt-muted); }
.ha-ci-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3cqw; }
.ha-ci-list li { display: flex; align-items: center; gap: 1.4cqw; font: 400 2.4cqw/1.2 'Manrope', sans-serif; color: var(--vt-muted); }
.ha-ci-list li .vt-icon { flex: none; width: 3.2cqw; height: 3.2cqw; padding: .5cqw; box-sizing: border-box; border-radius: 50%; background: #EEF1F4; color: transparent; transition: background-color .3s ease, color .3s ease; }
.ha-ci-list li.on { color: var(--vt-ink); }
.ha-ci-list li.on .vt-icon { background: #1F7A57; color: #fff; }
.ha-review { position: absolute; right: 7cqw; top: 46cqh; width: 32cqw; display: flex; align-items: center; gap: 1.8cqw; padding: 2.2cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 18px 30px -20px rgba(11, 36, 48, .45), 0 0 0 1px rgba(19, 88, 104, .05); opacity: 0; transform: translateX(3cqw); transition: opacity .5s ease, transform .6s var(--ha-ease); }
.ha-review.on { opacity: 1; transform: none; }
.ha-review-mark img { width: 7cqw; height: 7cqw; }
.ha-review strong { display: block; font: 700 2.4cqw/1.2 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-review small { display: block; font: 400 2cqw/1.3 'Inter', sans-serif; color: var(--vt-muted); }
.ha-live { position: absolute; right: 9cqw; top: 70cqh; display: inline-flex; align-items: center; gap: 1cqw; margin: 0; padding: 1.6cqw 3cqw; border-radius: 999px; background: #C93A20; color: #fff; font: 700 2.6cqw/1 'Manrope', sans-serif; box-shadow: 0 14px 24px -12px rgba(201, 58, 32, .8); opacity: 0; transform: scale(.85); transition: opacity .4s ease, transform .5s var(--ha-ease); }
.ha-live .vt-icon { width: 2.8cqw; height: 2.8cqw; }
.ha-live.on { opacity: 1; transform: none; }

/* security check */
.ha-radar { position: absolute; left: 7cqw; top: 22cqh; width: 38cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #14596A 0%, #0B2F39 70%); box-shadow: 0 22px 40px -22px rgba(4, 24, 31, .7), inset 0 0 0 .4cqw rgba(143, 217, 210, .25); overflow: hidden; }
.ha-radar-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(143, 217, 210, .25); box-shadow: 0 0 0 7cqw rgba(143, 217, 210, 0), inset 0 0 0 4cqw rgba(143, 217, 210, .04); }
.ha-radar-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(143, 217, 210, .45), rgba(143, 217, 210, 0) 25%); animation: ha-sweep 2.6s linear infinite; }
@keyframes ha-sweep { to { transform: rotate(360deg); } }
.ha-radar-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 10cqw; height: 10cqw; margin: -5cqw 0 0 -5cqw; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #fff; }
.ha-radar-core .vt-icon { width: 5cqw; height: 5cqw; }
.ha-radar i { position: absolute; width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #EC5C43; box-shadow: 0 0 0 1cqw rgba(236, 92, 67, .25); opacity: 0; transition: opacity .3s ease, background-color .4s ease, box-shadow .4s ease; }
.ha-radar i.d1 { left: 28%; top: 30%; } .ha-radar i.d2 { left: 68%; top: 40%; } .ha-radar i.d3 { left: 40%; top: 72%; }
.ha-radar i.on { opacity: 1; }
.ha-radar i.is-fixed { background: #5FD3A1; box-shadow: 0 0 0 1cqw rgba(95, 211, 161, .25); }
.ha-score { position: absolute; left: 7cqw; width: 38cqw; top: 66cqh; text-align: center; }
.ha-score strong { display: block; font: 800 7cqw/1 'Manrope', sans-serif; color: var(--vt-brand-green); letter-spacing: -.02em; }
.ha-score small { display: block; margin: .8cqw 0 1.4cqw; font: 500 2.2cqw/1 'Manrope', sans-serif; color: var(--vt-muted); }
.ha-score i { display: block; height: 1.4cqw; border-radius: 1cqw; background: #E3E7EC; overflow: hidden; }
.ha-score s { display: block; height: 100%; width: calc(var(--ha-score, 62) * 1%); border-radius: inherit; background: linear-gradient(90deg, #DB4327, #E9A23B 45%, #1F7A57 80%); transition: width .8s var(--ha-ease); }
.ha-findings { position: absolute; left: 50cqw; right: 6cqw; top: 22cqh; margin: 0; padding: 0; list-style: none; display: grid; gap: 1.6cqw; }
.ha-findings li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1cqw 1.6cqw; padding: 2cqw; border-radius: 2.4cqw; background: #fff; box-shadow: 0 14px 24px -18px rgba(11, 36, 48, .45), 0 0 0 1px rgba(19, 88, 104, .05); opacity: 0; transform: translateX(3cqw); transition: opacity .4s ease, transform .5s var(--ha-ease); }
.ha-findings li.on { opacity: 1; transform: none; }
.ha-findings em { font: 700 1.9cqw/1 'Manrope', sans-serif; font-style: normal; padding: .8cqw 1.4cqw; border-radius: 999px; }
.ha-findings em.is-high { background: #FCE3DD; color: #B0301A; } .ha-findings em.is-medium { background: #FBEBD6; color: #8A5A12; } .ha-findings em.is-low { background: #E6F1F2; color: #135868; }
.ha-findings span { font: 500 2.3cqw/1.25 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-findings b { grid-column: 2; display: inline-flex; align-items: center; gap: .6cqw; font: 700 1.9cqw/1 'Manrope', sans-serif; color: #1F7A57; opacity: 0; transition: opacity .35s ease; }
.ha-findings b .vt-icon { width: 2.2cqw; height: 2.2cqw; }
.ha-findings li.is-fixed b { opacity: 1; }
.ha-findings li.is-fixed span { color: var(--vt-muted); text-decoration: line-through; text-decoration-color: rgba(99, 112, 133, .5); }

/* one job, passed between agents and people */
.ha-journey { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(60px, 8vw, 110px); }
.ha-journey-head { text-align: center; max-width: 860px; margin: 0 auto 30px; }
.ha-journey-box { max-width: 1140px; margin: 0 auto; }
.ha-domtabs.is-light { margin: 0 auto 26px; }
.ha-track { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding-top: 34px; }
.ha-track-line { position: absolute; left: 10%; right: 10%; top: 57px; height: 2px; background: var(--ha-line); }
.ha-track-line s { position: absolute; left: 0; top: 0; height: 100%; width: calc(var(--ha-p, 0) * 100%); background: linear-gradient(90deg, #135868, #DB4327); transition: width .9s var(--ha-ease); }
.ha-token { position: absolute; z-index: 3; top: 43px; left: calc(10% + var(--ha-p, 0) * 80%); width: 30px; height: 30px; margin-left: -15px; display: grid; place-items: center; border-radius: 9px; background: #C93A20; color: #fff; box-shadow: 0 10px 20px -8px rgba(201, 58, 32, .8); transition: left .9s var(--ha-ease); }
.ha-node { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; }
.ha-node-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 10px 22px -14px rgba(11, 36, 48, .5), 0 0 0 1px var(--ha-line); transition: box-shadow .4s ease, transform .4s var(--ha-ease); }
.ha-node-mark img { width: 72%; height: 72%; object-fit: contain; }
.ha-node.on .ha-node-mark { transform: scale(1.08); box-shadow: 0 12px 24px -12px rgba(11, 36, 48, .55), 0 0 0 3px var(--vt-brand); }
.ha-node-kind { margin: 8px 0 0; font: 600 10.5px/1 'Manrope', sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--vt-label); }
.ha-node-who { margin: 0; font: 500 15.5px/1.25 'Manrope', sans-serif; color: var(--vt-brand-green); }
.ha-node-who span { display: block; font: 300 12.5px/1.3 'Inter', sans-serif; color: var(--vt-muted); }
.ha-node-say { margin: 8px 0 0; min-height: 64px; width: 100%; padding: 12px; box-sizing: border-box; border-radius: 16px; background: #fff; box-shadow: 0 18px 30px -24px rgba(11, 36, 48, .5), 0 0 0 1px rgba(19, 88, 104, .05); font: 400 13.5px/1.45 'Manrope', sans-serif; color: var(--vt-ink); opacity: .35; transform: translateY(6px); transition: opacity .45s ease, transform .45s var(--ha-ease); }
.ha-node.on .ha-node-say, .ha-node.is-done .ha-node-say { opacity: 1; transform: none; }
.ha-node.is-human .ha-node-say { background: #F2F7F8; }
@media (max-width: 900px) {
  .ha-track { grid-template-columns: 1fr; gap: 14px; padding-top: 0; padding-left: 64px; }
  .ha-track-line { left: 23px; right: auto; top: 24px; bottom: 24px; width: 2px; height: auto; }
  .ha-track-line s { width: 100%; height: calc(var(--ha-p, 0) * 100%); }
  .ha-token { left: 9px; top: calc(10px + var(--ha-p, 0) * (100% - 48px)); margin-left: 0; transition: top .9s var(--ha-ease); }
  .ha-node { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; gap: 2px 12px; margin-left: -64px; }
  .ha-node-mark { grid-row: 1 / span 3; width: 46px; height: 46px; }
  .ha-node-kind { margin: 0; } .ha-node-say { grid-column: 2; min-height: 0; margin-top: 4px; }
}

/* control dial and the call */
.ha-control { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: stretch; padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(60px, 8vw, 110px); }
.ha-control-main { min-width: 0; padding: clamp(24px, 3vw, 40px); border-radius: 30px; background: #fff; box-shadow: 0 40px 70px -56px rgba(11, 36, 48, .5), 0 0 0 1px rgba(19, 88, 104, .05); }
.ha-dial { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 26px 0 22px; padding: 5px; border-radius: 999px; background: #F2F1EC; }
.ha-dial button { position: relative; z-index: 1; padding: 12px 6px; border: 0; background: none; font: 600 14px/1 'Manrope', sans-serif; color: var(--vt-muted); cursor: pointer; transition: color .3s ease; }
.ha-dial button[aria-selected="true"] { color: #fff; }
.ha-dial-knob { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 3); border-radius: 999px; background: var(--vt-brand-green); box-shadow: 0 10px 20px -10px rgba(19, 88, 104, .8); transform: translateX(calc(var(--ha-k, 1) * 100%)); transition: transform .5s var(--ha-ease); }
.ha-dial-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; animation: ha-in .5s var(--ha-ease) both; }
.ha-dial-panel[hidden] { display: none; }
.ha-dial-col { padding: 16px; border-radius: 18px; background: #F7F6F2; }
.ha-dial-col.is-you { background: rgba(219, 67, 39, .07); }
.ha-dial-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 600 13px/1.2 'Manrope', sans-serif; color: var(--vt-ink); }
.ha-dial-head img { width: 24px; height: 24px; object-fit: contain; }
.ha-dial-head b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #C93A20; color: #fff; }
.ha-dial-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ha-dial-col li { position: relative; padding-left: 14px; font: 400 13.5px/1.45 'Manrope', sans-serif; color: var(--vt-text); }
.ha-dial-col li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--vt-brand-green); }
.ha-dial-col.is-you li::before { background: var(--vt-brand); }
.ha-call { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(24px, 3vw, 38px); border-radius: 30px; overflow: hidden; background: radial-gradient(70% 80% at 100% 0%, rgba(236, 92, 67, .22), transparent 60%), linear-gradient(165deg, #10414E 0%, #0B2F39 75%); color: rgba(255, 255, 255, .78); }
.ha-call-wave { position: absolute; right: 22px; top: 26px; display: flex; align-items: center; gap: 3px; height: 34px; }
.ha-call-wave i { width: 3px; height: 30%; border-radius: 2px; background: rgba(143, 217, 210, .7); animation: ha-wave 1.1s ease-in-out infinite; }
.ha-call-wave i:nth-child(3n) { animation-delay: -.3s; } .ha-call-wave i:nth-child(3n + 1) { animation-delay: -.6s; } .ha-call-wave i:nth-child(4n) { animation-delay: -.85s; }
@keyframes ha-wave { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.ha-call-mark img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .4)); }
.ha-call-label { margin: 6px 0 0; font: 600 12px/1 'Manrope', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-label-on-dark); }
.vt .ha-call h3 { margin: 0; font: 300 clamp(24px, 2.4vw, 32px)/1.2 'Sora', sans-serif; color: #fff; }
.ha-call-text { margin: 0; font: 300 15px/1.6 'Inter', sans-serif; }
.ha-call-try { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ha-call-try li { padding: 7px 11px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font: 400 12.5px/1 'Manrope', sans-serif; color: #fff; }
.vt .ha-call-btn { margin-top: auto; gap: 10px; }
.vt .ha-call-alt { display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px/1 'Manrope', sans-serif; color: rgba(255, 255, 255, .78); text-decoration: none; }
.vt .ha-call-alt:hover { color: #fff; }
@media (max-width: 900px) { .ha-control { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ha-dial-panel { grid-template-columns: 1fr; } .ha-dial button { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .ha-plan-step { opacity: 1; transform: none; } .ha-quote, .ha-listing, .ha-review, .ha-live, .ha-findings li { opacity: 1; transform: none; } }
/* without the script (or with reduced motion) every step and card simply shows */
.ha:not(.ha-js) .ha-plan-step, .ha:not(.ha-js) .ha-quote, .ha:not(.ha-js) .ha-listing, .ha:not(.ha-js) .ha-review, .ha:not(.ha-js) .ha-live, .ha:not(.ha-js) .ha-findings li { opacity: 1; transform: none; }
.ha-ex.is-dom.is-out > *:not(.ha-ex-scene) { opacity: 0 !important; transition: opacity .5s ease !important; }

/* phones: the four kinds of work stay on one line */
@media (max-width: 520px) {
  .ha-domtabs { flex-wrap: nowrap; gap: 2px; padding: 4px; }
  .ha-domtabs button { flex: 0 1 auto; padding: 8px 10px; font-size: 12.5px; white-space: nowrap; }
  .ha-domtabs button i { left: 8px; right: 8px; }
}
@media (max-width: 340px) {
  .ha-domtabs button { padding: 8px 7px; font-size: 11.5px; }
}
@media (max-width: 520px) {
  .ha-domtabs.is-light { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 340px; border-radius: 20px; }
  .ha-domtabs.is-light button { padding: 9px 8px; border-radius: 16px; }
}

/* execute: the agent list beside the stage follows the chosen kind of work */
.ha-tools-set { display: grid; --d: .12s; }
.ha-tools-set > .ha-tools { grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .45s ease, transform .5s var(--ha-ease), visibility 0s .45s; }
.ha-tools-set > .ha-tools.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease .1s, transform .5s var(--ha-ease) .1s, visibility 0s; }

/* paired marks stand apart, never overlapping */
.ha-pair-marks { gap: 1.2cqw; }
.ha-pair-marks img + img { margin-left: 0; }

/* journey marks: the transparent marks alone, no tile or ring; the page colour behind them only breaks the line,
   the active one grows with a warm glow, and the job token rides just above it instead of covering it */
.ha-node-mark { width: 52px; height: 52px; background: #F5F4F0; box-shadow: none; }
.ha-node-mark img { width: 100%; height: 100%; }
.ha-node.on .ha-node-mark { transform: scale(1.14); box-shadow: none; filter: drop-shadow(0 6px 12px rgba(201, 58, 32, .35)); }
.ha-token { top: 0; width: 26px; height: 26px; margin-left: -13px; border-radius: 8px; }
.ha-token .vt-icon { width: 13px; height: 13px; }
@media (max-width: 900px) {
  .ha-token { display: none; }
  .ha-node-mark { width: 46px; height: 46px; }
}

/* the round VASSiSTECH mark never gives way to the words beside it (owner, 2026-10-12: it came out squeezed) */
.ha-review-mark { flex: none; display: grid; place-items: center; }
.ha-review-mark img { object-fit: contain; }
.ha-review > span:last-child { min-width: 0; }

/* owner, 2026-10-12: the hero label reversed, red orange pill with white words (the button tone, so the small
   white letters stay readable) */
.ha-kicker { background: #C93A20; border-color: #C93A20; color: #fff; box-shadow: 0 12px 22px -14px rgba(201, 58, 32, .7); }
.ha-kicker-dot { background: #fff; }
.ha-kicker-dot::after { border-color: #fff; opacity: .55; }

/* Humans deliver, owner 2026-10-12: real professional photos (faces placed by measured face boxes), opening in turn,
   with a premium verified card on a soft brand shade */
.ha-hu-list li.is-photo .ha-hu-face { background: #E9E6DF; }
.ha-hu-list li.is-assistant .ha-hu-face img { object-position: 50% 50%; transform-origin: 55.5% 41%; transform: translate(-5.5%, 9%) scale(3.1); }
.ha-hu-list li.is-bookkeeper .ha-hu-face img { object-position: 50% 50%; transform-origin: 46.5% 32.4%; transform: translate(3.5%, 17.6%) scale(2.9); }
.ha-hu-open.is-assistant img { object-position: 55% 38%; transform-origin: 55.5% 41%; }
.ha-hu-open.is-bookkeeper img { object-position: 50% 30%; transform-origin: 46.5% 32%; }
.ha-hu-open::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(11, 53, 64, .58), rgba(11, 53, 64, 0)); opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.ha-hu-open.is-back::after { opacity: 1; transition-delay: .9s; }
.ha-hu-card { position: absolute; z-index: 1; left: 16px; bottom: 16px; max-width: calc(100% - 32px); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 9px 16px 9px 9px; border-radius: 18px; background: rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 34px -18px rgba(11, 36, 48, .7), inset 0 0 0 1px rgba(255, 255, 255, .6); opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .6s var(--ha-ease); }
.ha-hu-open.is-back .ha-hu-card { opacity: 1; transform: none; transition-delay: 1.2s; }
.ha-hu-card-mark { flex: none; display: grid; place-items: center; }
.ha-hu-card-mark img { display: block; width: 38px; height: 38px; object-fit: contain; }
.ha-hu-card > span:last-child { min-width: 0; display: grid; gap: 3px; }
.ha-hu-card strong { font: 600 15px/1.2 'Manrope', sans-serif; color: var(--vt-brand-green); }
.ha-hu-card small { display: inline-flex; align-items: center; gap: 5px; font: 400 12px/1.3 'Inter', sans-serif; color: var(--vt-muted); }
.ha-hu-card small .vt-icon { flex: none; width: 13px; height: 13px; padding: 2px; border-radius: 50%; background: var(--vt-brand-green); color: #fff; box-sizing: content-box; }
@media (max-width: 520px) {
  .ha-hu-card { left: 10px; bottom: 10px; max-width: calc(100% - 20px); gap: 9px; padding: 7px 12px 7px 7px; border-radius: 14px; }
  .ha-hu-card-mark img { width: 30px; height: 30px; }
  .ha-hu-card strong { font-size: 13px; }
  .ha-hu-card small { font-size: 10.5px; }
}

/* VASSiSTECH manages, owner 2026-10-12: the team photo fills the stage; the monthly report sits over the desks as a
   frosted strip, under every face */
.ha-stage.is-team::before { display: none; }
.ha-team-photo { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); border-radius: 22px; object-fit: cover; object-position: 50% 30%; }
.ha-stage.is-team::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 14px; height: 45%; border-radius: 0 0 22px 22px; background: linear-gradient(to top, rgba(11, 53, 64, .5), rgba(11, 53, 64, 0)); pointer-events: none; }
.ha-stage.is-team .ha-report { z-index: 1; left: 28px; right: 28px; top: auto; bottom: 28px; width: auto; transform: none; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 10px 18px; padding: 14px 16px 14px; border-radius: 18px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 22px 40px -22px rgba(11, 36, 48, .7), inset 0 0 0 1px rgba(255, 255, 255, .6); }
.ha-stage.is-team:hover .ha-report { transform: translateY(-3px); }
.ha-stage.is-team .ha-report-tag { position: absolute; left: 16px; top: 0; transform: translateY(-50%); margin: 0; padding: 6px 10px; border-radius: 999px; background: #C93A20; color: #fff; font-size: 9.5px; }
.ha-stage.is-team .ha-report-head { flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; }
.ha-stage.is-team .ha-meter { margin: 0; font-size: 12px; gap: 6px; }
.ha-stage.is-team .ha-report-grid { grid-column: 1 / -1; margin: 0; gap: 6px; }
.ha-stage.is-team .ha-report-grid div { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 8px 10px; border-radius: 12px; background: rgba(247, 246, 242, .9); }
.ha-stage.is-team .ha-report-grid dt { font-size: 11.5px; }
.ha-stage.is-team .ha-report-grid dd { margin: 0; font-size: 16px; }
.ha-stage.is-team .ha-report-team { display: none; }
@media (max-width: 520px) {
  .ha-stage.is-team .ha-report { left: 22px; right: 22px; bottom: 22px; grid-template-columns: 1fr; gap: 8px; padding: 14px 12px 10px; }
  .ha-stage.is-team .ha-report-grid div { flex-direction: column; gap: 2px; padding: 6px 8px; }
  .ha-stage.is-team .ha-report-grid dd { font-size: 14px; }
}
/* tablets: the stage would be wide and 400px tall, cutting the faces; the team picture keeps a square instead */
@media (min-width: 521px) and (max-width: 1024px) {
  .ha-stage.is-team { width: 100%; max-width: 560px; height: auto; aspect-ratio: 1; justify-self: center; margin-inline: auto; }
  .ha-stage.is-team .ha-report { bottom: 22px; }
}

/* owner, 2026-10-12: the report reads top to bottom on every screen (as on phones), the team chips with their marks
   come back inside it, and the card starts under the faces (70 % down the photo) and hangs past the frame's foot */
.ha-stage.is-team { overflow: visible; margin-bottom: var(--ha-hang, 96px); }
.ha-stage.is-team .ha-report { top: calc(14px + (100% - 28px) * .71); bottom: auto; left: 28px; right: 28px; grid-template-columns: 1fr; gap: 10px; padding: 20px 16px 14px; background: rgba(255, 255, 255, .94); }
.ha-stage.is-team .ha-report-head { flex-direction: row; justify-content: space-between; align-items: baseline; }
.ha-stage.is-team .ha-report-grid div { flex-direction: column; align-items: flex-start; gap: 3px; }
.ha-stage.is-team .ha-report-team { display: flex; margin: 0; padding: 10px 0 0; }
.ha-stage.is-team .ha-report-team li { background: rgba(247, 246, 242, .95); }
@media (max-width: 520px) {
  .ha-stage.is-team .ha-report { left: 18px; right: 18px; padding: 18px 12px 12px; }
  .ha-stage.is-team .ha-report-head { flex-direction: column; gap: 2px; }
}
.ha .ha-stage.is-team .ha-report-team span.is-mark { background: none !important; box-shadow: none; padding: 0; overflow: visible; }
@media (max-width: 520px) {
  .ha-stage.is-team { margin-bottom: 150px; }
  .ha-stage.is-team .ha-report { top: calc(14px + (100% - 28px) * .68); }
}
/* phones: the box takes the photo's own shape (filling a 400px box would cut the man on the left) */
@media (max-width: 520px) {
  .ha-stage.is-team { height: auto; aspect-ratio: 1024 / 944; margin-bottom: 200px; }
  .ha .ha-stage.is-team .ha-team-photo { height: calc(100% - 28px); }
  .ha-stage.is-team .ha-report { top: calc(14px + (100% - 28px) * .71); }
}

/* owner, 2026-10-12: the picture stays whole; the report card sits below it with only 30 % of the card over the photo */
.ha-stage.is-team { margin-bottom: 150px; }
.ha-stage.is-team .ha-report, .ha-stage.is-team:hover .ha-report { top: calc(100% - 14px); bottom: auto; transform: translateY(-30%); }
@media (max-width: 520px) {
  .ha-stage.is-team { margin-bottom: 200px; }
  .ha-stage.is-team .ha-report { top: calc(100% - 14px); }
}
.ha .ha-stage.is-team .ha-team-photo { height: calc(100% - 28px); }

/* the Lisra marks in the agents badge: transparent marks standing apart, no disc, no ring, no overlap */
.ha .ha-faces.is-marks i { background: none; border: 0; padding: 0; overflow: visible; }
.ha .ha-faces.is-marks i + i { margin-left: 4px; }
.ha .ha-faces.is-marks i { width: 30px; height: 30px; }

/* closing call to action, owner 2026-10-12: the marks float round the edges (two of each, crosswise), two actions,
   one quiet line of true promises */
.ha-cta { padding-top: clamp(110px, 11vw, 160px); padding-bottom: clamp(110px, 11vw, 160px); }
.ha-cta .ha-cta-actions { margin: 0; }
.ha-cta-promise { position: relative; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 28px 0 0; padding: 0; font: 400 13.5px/1.3 'Inter', sans-serif; color: var(--vt-muted); --d: .4s; }
.ha-cta-promise li { display: inline-flex; align-items: center; gap: 8px; }
.ha-cta-promise .vt-icon { flex: none; width: 12px; height: 12px; padding: 3px; border-radius: 50%; background: rgba(19, 88, 104, .1); color: var(--vt-brand-green); box-sizing: content-box; }
.ha-cta > .ha-cta-float { position: absolute; inset: 0; pointer-events: none; }
.ha-fl { position: absolute; display: block; width: var(--s); height: var(--s); }
.ha-fl::before { content: ''; position: absolute; left: -35%; right: -35%; top: -25%; bottom: -25%; border-radius: 50%; background: radial-gradient(closest-side, var(--g), transparent); filter: blur(6px); }
.ha-fl::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -16%; height: 12%; border-radius: 50%; background: rgba(11, 36, 48, .16); filter: blur(5px); animation: ha-fl-shadow var(--t) ease-in-out infinite; animation-delay: var(--dl); }
.ha-fl i { position: relative; display: block; width: 100%; height: 100%; animation: ha-fl-drift var(--t) ease-in-out infinite; animation-delay: var(--dl); }
.ha-fl img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(11, 36, 48, .16)); }
.ha-fl.is-lisra { --g: rgba(201, 150, 70, .28); }
.ha-fl.is-vt { --g: rgba(19, 88, 104, .22); }
.ha-fl.f1 { --s: 100px; --t: 7s; --dl: 0s; left: 4.5%; top: 52%; }
.ha-fl.f2 { --s: 80px; --t: 8s; --dl: -2s; right: 6%; top: 12%; }
.ha-fl.f3 { --s: 44px; --t: 6s; --dl: -4s; left: 15%; top: 14%; opacity: .9; }
.ha-fl.f4 { --s: 56px; --t: 9s; --dl: -1s; right: 14%; top: 70%; opacity: .95; }
@keyframes ha-fl-drift { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes ha-fl-shadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.8); opacity: .6; } }
.ha-js .ha-cta-float .ha-fl { opacity: 0; transform: translateY(18px) scale(.85); transition: opacity .7s ease, transform .9s var(--ha-ease); }
.ha-js .ha-cta-float.is-in .ha-fl { opacity: 1; transform: none; }
.ha-js .ha-cta-float.is-in .ha-fl.f3 { opacity: .9; } .ha-js .ha-cta-float.is-in .ha-fl.f4 { opacity: .95; }
.ha-cta-float .f2 { transition-delay: .15s; } .ha-cta-float .f3 { transition-delay: .3s; } .ha-cta-float .f4 { transition-delay: .45s; }
@media (max-width: 1024px) {
  .ha-cta { padding-bottom: 140px; }
  .ha-fl.f1 { --s: 76px; left: 4%; top: auto; bottom: 16px; }
  .ha-fl.f2 { --s: 64px; right: 4%; top: 8%; }
  .ha-fl.f3 { --s: 38px; left: 8%; top: 10%; }
  .ha-fl.f4 { --s: 46px; right: 9%; top: auto; bottom: 30px; }
}
@media (max-width: 700px) {
  .ha-cta { padding-top: 120px; padding-bottom: 120px; }
  .ha-cta-promise { flex-direction: column; align-items: center; gap: 10px; }
  .ha-fl.f1 { --s: 58px; left: 6%; top: auto; bottom: 26px; }
  .ha-fl.f2 { --s: 56px; right: 7%; top: 30px; }
  .ha-fl.f3 { --s: 34px; left: 10%; top: 44px; }
  .ha-fl.f4 { --s: 38px; right: 14%; top: auto; bottom: 40px; }
}
@media (prefers-reduced-motion: reduce) { .ha-fl i, .ha-fl::after { animation: none; } }

@media (max-width: 1024px) {
  .ha-faq-side { position: static; }
  .ha-faq-help { max-width: none; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .ha-faq-help .ha-faq-marks { grid-row: span 2; margin: 0; }
  .ha-faq-help .ha-btn, .ha-faq-help .ha-faq-call { grid-column: 1 / -1; justify-self: start; }
  .ha-faq-help .ha-btn { margin-top: 2px; }
}
@media (max-width: 520px) {
  .ha-faq summary { grid-template-columns: 26px minmax(0, 1fr) 30px; gap: 10px; padding: 16px 12px; }
  .ha-faq-ico { width: 30px; height: 30px; }
  .ha-faq-a p { padding: 0 12px 18px 48px; font-size: 15px; }
  .ha-faq-help { grid-template-columns: 1fr; padding: 20px; }
  .ha-faq-help .ha-faq-marks { grid-row: auto; margin: 0 0 12px; }
}

/* hero, owner 2026-10-12 ("aro premium"): words, actions and the people's scroll unchanged; one quiet proof line
   under the actions, and a faint dot field behind the title that fades out at its edges */
.ha-hero-in { isolation: isolate; }
.ha-hero-in::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -60px; width: min(1100px, 100vw); height: 560px; transform: translateX(-50%); background-image: radial-gradient(rgba(19, 88, 104, .2) 1px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(50% 50% at 50% 45%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 78%); mask-image: radial-gradient(50% 50% at 50% 45%, #000 0%, rgba(0, 0, 0, .5) 45%, transparent 78%); pointer-events: none; }
.ha-proof { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 14px; margin: 26px auto 0; padding: 7px 18px 7px 8px; border-radius: 999px; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(19, 88, 104, .08), 0 10px 24px -18px rgba(11, 36, 48, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font: 400 13.5px/1.3 'Inter', sans-serif; color: var(--vt-muted); --d: .35s; }
.ha-proof b { font-weight: 600; color: var(--vt-ink); }
.ha-proof-marks { display: inline-flex; gap: 5px; }
.ha-proof-marks img { display: block; width: 24px; height: 24px; object-fit: contain; }
.ha-proof > i { width: 1px; height: 14px; background: rgba(19, 88, 104, .2); }
@media (max-width: 520px) {
  .ha-proof { display: inline-grid; grid-template-columns: auto auto; align-items: center; column-gap: 10px; row-gap: 3px; padding: 9px 18px 9px 10px; border-radius: 18px; font-size: 13px; text-align: left; }
  .ha-proof-marks { grid-row: span 2; }
  .ha-proof > i { display: none; }
}

/* D-377: a hairline at the very top that fills as you read this long page (brand teal to red orange). */
.ha-progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.ha-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #135868, #EC5C43); border-radius: 0 3px 3px 0; }

/* Owner trial, 2026-10-13 (D-381): small Lisra marks use the Lisra app's own tile (dark rounded square, gold edge,
   gold mark, images/vassistech/lisra/tile.png from the app's lisra-logo.png); large marks stay the transparent gold. */
.ha .ha-logo.is-tile img { filter: drop-shadow(0 6px 10px rgba(11, 36, 48, .22)); }