:root {
  --ink: #111111; --ink-2: #2b2b2b; --muted: #5f5f5f; --muted-2: #8a8a8a; --line: #e9e9e9; --line-2: #dedede;
  --pane: #f6f6f6; --dot: #d6d6d6; --green: #1f9d63; --green-2: #22c55e; --blue: #2f7de1; --engrave: #2e4a72;
  --display: "Figtree", "Avenir Next", "Segoe UI", sans-serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul, dl, dd, blockquote { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: #d9e6fb; }

.frame { max-width: 1240px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: #fff; overflow: clip; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 20px 0 24px; border-radius: 9px; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.btn-dark { color: #fff; background: linear-gradient(#2e2e2e, #161616); border: 1px solid #000; box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), 0 1px 2px rgb(0 0 0 / .2), 0 8px 20px -8px rgb(0 0 0 / .45); }
.btn-dark:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 2px 4px rgb(0 0 0 / .2), 0 14px 28px -10px rgb(0 0 0 / .5); }
.btn-dark:active { transform: translateY(0) scale(.98); }
.btn svg { transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(2px); }
.btn-sm { height: 38px; padding: 0 14px 0 18px; font-size: 13.5px; border-radius: 8px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; height: 72px; border-bottom: 1px solid var(--line); background: rgb(255 255 255 / .86); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); }
.logo-cell { display: grid; place-items: center; width: 92px; height: 100%; border-right: 1px solid var(--line); flex-shrink: 0; }
.links { display: flex; align-items: center; gap: 30px; height: 100%; padding: 0 22px; border-right: 1px solid var(--line); }
.links a { position: relative; font: 500 15px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; color: var(--ink-2); padding: 6px 0; }
.links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.links a:hover::after { transform: scaleX(1); transform-origin: left; }
.talk { margin-left: auto; margin-right: 24px; }
.burger { display: none; margin-left: auto; margin-right: 12px; width: 44px; height: 44px; border: 0; background: none; border-radius: 10px; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), top .3s var(--ease); }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; }
.burger[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }
.mnav { position: absolute; top: 72px; left: 0; right: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 20px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -20px rgb(0 0 0 / .2); }
.mnav a { font: 500 17px/1 var(--display); text-transform: uppercase; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.mnav .btn { margin-top: 12px; border-bottom: 0; text-transform: none; font: 500 15px/1 var(--sans); padding: 0 20px; }

/* ---------- shared heads ---------- */
.tag { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 4px; font: 400 14px/1 var(--display); color: var(--ink-2); background: #fff; }
.switch { position: relative; width: 24px; height: 14px; border-radius: 8px; background: #ececec; box-shadow: inset 0 1px 2px rgb(0 0 0 / .08); flex-shrink: 0; }
.switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 10px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .22); transition: transform .5s var(--ease); }
.switch.on i, .tag:hover .switch i { transform: translateX(6px); }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.025em; color: var(--ink); }
h1 { font-size: clamp(40px, 5.6vw, 66px); line-height: 1.06; margin-top: 20px; }
h2 { font-size: clamp(32px, 3.9vw, 46px); line-height: 1.1; margin-top: 18px; }
.lede { max-width: 650px; margin: 22px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.sec-head { text-align: center; padding: 0 24px; }
.sec-head.left { text-align: left; }
.sec-head.left .lede { margin-left: 0; }

/* ---------- hero ---------- */
.hero { text-align: center; padding: 104px 0 0; }
.hero .tag { margin: 0 auto; }
.hero .lede { margin-bottom: 26px; padding: 0 20px; }
.stage { position: relative; margin: 56px 32px 0; overflow: hidden; background: #eae6dc; }
.stage-art { width: 100%; aspect-ratio: 2100 / 891; object-fit: cover; transform: scale(1.04); transition: transform 2.4s var(--ease); }
.stage.in .stage-art { transform: scale(1); }
.glass { position: absolute; left: 50%; top: 12%; width: min(62%, 720px); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; border-radius: 16px; background: rgb(255 255 255 / .34); border: 1px solid rgb(255 255 255 / .75); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 30px 60px -30px rgb(30 50 80 / .45); text-align: left; }
.card { background: #fff; border-radius: 10px; border: 1px solid #ededed; box-shadow: 0 1px 2px rgb(0 0 0 / .04); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.card-h b { display: block; font: 500 13.5px/1.25 var(--sans); color: var(--ink); }
.card-h small { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.4; color: #a1a1a1; }
.ibox { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; border: 1px solid #e8e8e8; box-shadow: 0 1px 2px rgb(0 0 0 / .06); color: var(--ink-2); flex-shrink: 0; }
.dot { width: 4px; height: 4px; border-radius: 50%; background: #c4c4c4; display: inline-block; }
.live { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); display: inline-block; margin-left: 4px; box-shadow: 0 0 0 0 rgb(47 125 225 / .5); animation: ping 2s ease-out infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgb(47 125 225 / .45); } 80%, 100% { box-shadow: 0 0 0 6px rgb(47 125 225 / 0); } }
.micro { padding: 2px 14px 6px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: #a8a8a8; }

.flow { display: flex; flex-direction: column; padding-bottom: 12px; }
.steps { position: relative; padding: 4px 14px 0 34px; }
.steps::before { content: ""; position: absolute; left: 18px; top: 12px; bottom: 26px; width: 1px; background: #e7e7e7; }
.steps::after { content: ""; position: absolute; left: 18px; top: 12px; width: 1px; height: calc((100% - 38px) * var(--prog, 1)); background: linear-gradient(#e5484d, #6f9fd8, #1f9d63, #f59e0b, #8b5cf6); transition: height .6s var(--ease); }
.steps li { position: relative; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; padding: 0 0 13px; transition: opacity .4s var(--ease), transform .4s var(--ease); }
.steps li::before { content: ""; position: absolute; left: -20px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px #fff; transition: background-color .3s, transform .4s var(--ease); z-index: 1; }
.steps b { font: 500 12.5px/1.3 var(--sans); color: var(--ink); }
.steps small { grid-column: 1; font-size: 9.5px; line-height: 1.35; color: #a3a3a3; }
.steps time { grid-row: 1; grid-column: 2; font-size: 9px; color: #b0b0b0; padding-top: 2px; }
.resolved { display: flex; align-items: center; gap: 10px; margin: 2px 12px 0; padding: 10px 12px; border: 1px solid #e3e3e3; border-radius: 8px; color: var(--blue); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.resolved b { display: block; font: 500 13px/1.25 var(--sans); }
.resolved small { display: block; font-size: 10px; color: #a3a3a3; }
.resolved em { margin-left: auto; align-self: flex-end; display: flex; align-items: center; gap: 5px; font-style: normal; font-size: 10px; color: #a3a3a3; white-space: nowrap; }
.chat { display: flex; flex-direction: column; contain: size; }
.chat .card-h { border-bottom: 1px solid #ececec; padding-bottom: 12px; }
.thread { flex: 1; display: flex; flex-direction: column; gap: 9px; padding: 14px 12px 10px; overflow: hidden; }
.msg { display: flex; align-items: flex-start; gap: 8px; transition: opacity .45s var(--ease), transform .45s var(--ease); }
.msg p { font-size: 10.5px; line-height: 1.38; padding: 8px 10px; border-radius: 8px; max-width: 78%; }
.msg time { display: block; margin-top: 3px; font-size: 8.5px; opacity: .65; }
.msg.me { justify-content: flex-end; }
.msg.me p { background: var(--blue); color: #fff; border-bottom-right-radius: 3px; }
.av { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #b08968, #6b4f3a); color: #fff; font-size: 8.5px; font-weight: 600; flex-shrink: 0; }
.msg.bot p { background: #fff; border: 1px solid #e5e5e5; color: var(--ink-2); box-shadow: 0 1px 2px rgb(0 0 0 / .04); }
.spark { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; border: 1px solid #e9e9e9; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f7de1' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 4l1.6 4.6L18 10.2l-4.4 1.6L12 16.4l-1.6-4.6L6 10.2l4.4-1.6z'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.spark.sm { width: 18px; height: 18px; border: 0; box-shadow: none; background-size: 15px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 4l1.6 4.6L18 10.2l-4.4 1.6L12 16.4l-1.6-4.6L6 10.2l4.4-1.6z'/%3E%3C/svg%3E"); }
.typing { display: flex; gap: 8px; align-items: center; transition: opacity .3s; }
.typing p { display: flex; gap: 3px; padding: 9px 10px; border: 1px solid #e5e5e5; border-radius: 8px; }
.typing i { width: 4px; height: 4px; border-radius: 50%; background: #b5b5b5; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.ask { display: flex; align-items: center; gap: 8px; margin: 0 12px 12px; padding: 6px 6px 6px 10px; border: 1px solid #e3e3e3; border-radius: 8px; }
.ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 11px; color: var(--ink); }
.ask input::placeholder { color: #a8a8a8; }
.ask button { display: grid; place-items: center; width: 24px; height: 22px; border: 0; border-radius: 5px; background: #1a1a1a; color: #fff; cursor: pointer; }

/* demo states */
.demo-run .steps li { opacity: .35; }
.demo-run .steps li::before { background: #d4d4d4; transform: scale(.8); }
.demo-run .steps li.on { opacity: 1; }
.demo-run .steps li.on::before { background: var(--c); transform: scale(1); }
.demo-run .resolved:not(.on) { opacity: 0; transform: translateY(6px); }
.demo-run .msg.bot:not(.on) { display: none; }
.demo-run .typing:not(.on) { display: none; }
.demo-run .msg.bot.on { animation: rise .45s var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }
.typing:not(.on) { display: none; }

/* ---------- trusted ---------- */
.trusted { margin-top: 64px; }
.trusted h2 { margin: 0; text-align: center; font: 500 20px/1.2 var(--display); letter-spacing: -.01em; color: #4b4b4b; padding-bottom: 38px; }
.logos { display: flex; align-items: center; justify-content: space-around; gap: 24px; padding: 38px 32px; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); overflow: hidden; }
.lg { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; color: #8f8f8f; filter: grayscale(.2); opacity: .9; transition: opacity .2s, filter .2s; }
.lg:hover { opacity: 1; filter: none; }
.lg-loaf { font: 800 17px/1 var(--display); letter-spacing: .02em; color: #6b8fb3; }
.lg-loaf b { color: #fff; background: #8ab4d8; padding: 3px 6px 2px; margin-left: 2px; transform: skew(-8deg); }
.lg-fair { font: 700 14px/1 var(--display); letter-spacing: .06em; color: #555; flex-wrap: wrap; width: 110px; column-gap: 4px; row-gap: 2px; }
.lg-fair small { width: 100%; padding-left: 22px; font-size: 6.5px; letter-spacing: .3em; color: #999; }
.lg-flux { font: 500 17px/1 var(--mono); color: #6b6b6b; }
.lg-flux svg { color: #e879a6; }
.lg-orbit { flex-direction: column; gap: 0; font: 600 23px/1 var(--display); letter-spacing: -.03em; color: #222; }
.lg-hal { font: 400 25px/1 Georgia, "Times New Roman", serif; letter-spacing: -.02em; color: #9a8a76; }
.lg-cloud { position: relative; }
.lg-cloud em { position: absolute; left: 0; right: 0; top: 13px; text-align: center; font: italic 500 9px/1 var(--sans); color: #fff; }
.lg-vt { font: 800 italic 26px/1 var(--display); letter-spacing: -.04em; color: #6f6f6f; }

/* ---------- build ---------- */
.build { text-align: center; padding: 88px 32px 40px; }
.rot { position: relative; display: inline-block; overflow: hidden; height: 14px; line-height: 14px; vertical-align: middle; }
.rot span { display: block; transition: transform .5s var(--ease), opacity .3s; }
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 28px; margin-top: 64px; text-align: left; }
.feat h3 { margin-top: 22px; font: 500 17px/1.3 var(--sans); letter-spacing: -.015em; color: var(--ink); }
.feat > p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 360px; }
.pane { position: relative; aspect-ratio: 370 / 300; background-color: var(--pane); background-image: radial-gradient(circle, var(--dot) 1px, transparent 1.4px); background-size: 18px 18px; background-position: 9px 9px; overflow: hidden; }
.pane-h { position: absolute; z-index: 3; left: 18px; right: 18px; top: 16px; display: flex; justify-content: space-between; align-items: center; font: 400 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #8b8b8b; }
.meter { display: flex; gap: 3px; }
.meter b { width: 4px; height: 16px; border-radius: 1px; background: #d7d7d7; }
.meter b:first-child { background: var(--green-2); }
.feat:hover .meter b, .feat.in .meter b { animation: level 1.6s steps(1) infinite; }
.meter b:nth-child(2) { animation-delay: .2s !important; } .meter b:nth-child(3) { animation-delay: .4s !important; }
@keyframes level { 0% { background: #d7d7d7; } 33% { background: var(--green-2); } 100% { background: #d7d7d7; } }
.meter b:first-child { animation: none !important; }
.ui-card { position: absolute; background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 12px 30px -12px rgb(0 0 0 / .18); }
.iso { position: absolute; inset: 9% 2% 0; width: 96%; height: 91%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.feat:hover .iso { transform: translateY(-6px) scale(1.02); }

/* follow-ups */
.topo { position: absolute; right: 13%; top: 17%; width: 22%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.msgs { left: 10%; right: 22%; top: 26%; padding: 12px 12px 8px; z-index: 2; }
.flag { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; color: #c62828; margin-bottom: 8px; }
.msgs li { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; line-height: 1.85; color: var(--ink-2); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.msgs time { color: #9b9b9b; white-space: nowrap; }
.agent-note { position: absolute; left: 10%; right: 14%; top: 66%; display: flex; gap: 8px; font-size: 11px; line-height: 1.5; color: var(--ink-2); }
.agent-note time { display: block; margin-top: 4px; color: #a5a5a5; }
.glyph { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; background: conic-gradient(from 45deg, #111 0 25%, #fff 0 50%, #111 0 75%, #fff 0); border: 1.5px solid #111; border-radius: 2px; }

/* intelligence */
.pdf { position: absolute; left: 6%; top: 15%; width: 42%; bottom: 10%; padding: 14px 12px; background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 10px 30px -14px rgb(0 0 0 / .18); overflow: hidden; display: flex; flex-direction: column; gap: 5px; }
.pdf b { font-size: 12px; font-weight: 500; margin-bottom: 8px; }
.pdf > i { display: block; height: 5px; border-radius: 3px; background: #dedede; width: 90%; }
.pdf > i.s { width: 60%; }
.pdf .blocks { display: flex; gap: 8px; margin: 6px 0; }
.pdf .blocks i { flex: 1; height: 18px; background: #e2e2e2; border-radius: 2px; }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(rgb(31 157 99 / 0), rgb(31 157 99 / .16), rgb(31 157 99 / 0)); border-bottom: 1px solid rgb(31 157 99 / .5); transform: translateY(-30px); }
.feat.in .scan { animation: scan 3.2s var(--ease) infinite; }
@keyframes scan { 0% { transform: translateY(-30px); } 70%, 100% { transform: translateY(240px); } }
.wire { position: absolute; left: 47%; top: 50%; width: 10%; }
.extract { position: absolute; right: 7%; top: 30%; width: 36%; margin: 0; padding: 10px 11px; background: #fff; border-radius: 8px; border: 4px solid #12382a; box-shadow: 0 0 0 2px #2c6b4f, 0 14px 30px -14px rgb(0 0 0 / .35); font-size: 10.5px; }
.extract div { display: flex; justify-content: space-between; align-items: center; line-height: 1.95; }
.extract dt { color: var(--ink-2); }
.extract dd { margin: 0; font-size: 9px; color: #333; transition: opacity .3s, filter .3s; }
.extract .ok { display: flex; align-items: center; gap: 4px; color: #7cb342; }
.extract .ok i { width: 6px; height: 6px; border-radius: 50%; background: #8bc34a; }
.intel-run .extract dd { opacity: 0; filter: blur(3px); }
.intel-run .extract dd.on { opacity: 1; filter: none; }

/* finance */
.scrub { position: absolute; left: 50%; top: 16%; transform: translateX(-50%); width: 50%; height: 30px; border-radius: 16px; background: linear-gradient(90deg, #0d0d0d, #2a2a2a 50%, #0d0d0d); overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.scrub-track { position: absolute; top: 3px; left: 50%; display: flex; transition: transform .6s var(--ease); }
.scrub span { width: 26px; height: 24px; display: grid; place-items: center; font: 500 12px/1 var(--sans); color: #bdbdbd; border-radius: 12px; flex-shrink: 0; transition: background-color .4s, color .4s; }
.scrub span.on { background: #fff; color: #111; }
.match { left: 50%; top: 30%; width: 52%; transform: translateX(-50%); padding: 0 0 6px; }
.match-h { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 10px; border-bottom: 1px solid #f0f0f0; }
.match-h b { font-size: 11.5px; font-weight: 500; }
.pager { display: flex; border: 1px solid #e6e6e6; border-radius: 5px; overflow: hidden; }
.pager i { font-style: normal; width: 18px; height: 17px; display: grid; place-items: center; font-size: 12px; color: #555; }
.pager i + i { border-left: 1px solid #e6e6e6; }
.cursor { position: absolute; right: 2px; top: 26px; transition: transform .5s var(--ease); }
.match ul { padding: 4px 12px; }
.match li { display: flex; align-items: center; gap: 8px; font-size: 10.5px; color: #8a8a8a; line-height: 2.5; transition: color .3s; }
.match li.on { color: var(--ink-2); }
.ic { width: 10px; height: 10px; border-radius: 3px; background: #1f9d63; }
.ic.a { background: #22a06b; clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.ic.b { background: #1b7f52; border-radius: 2px; }

/* execution */
.lead { left: 50%; top: 22%; width: 60%; transform: translateX(-50%); padding: 13px 14px 12px; }
.lead b { display: block; font-size: 12px; font-weight: 500; }
.lead small { display: block; font-size: 10px; color: #a3a3a3; margin-top: 2px; }
.lead p { display: flex; justify-content: space-between; margin-top: 12px; font-size: 10px; color: var(--ink-2); }
.lead p span { display: flex; align-items: center; gap: 5px; }
.lead .cal { width: 9px; height: 9px; border-radius: 2px; background: #1f9d63; }
.lead time { color: #8a8a8a; }
.drop { position: absolute; left: 50%; top: 52%; height: 14%; border-left: 1.5px dotted #b8b8b8; }
.apps { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 30px; background: linear-gradient(#8ee6a4, #6fd88d); box-shadow: inset 0 1px 0 rgb(255 255 255 / .5), 0 10px 26px -10px rgb(31 157 99 / .7); }
.apps span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgb(255 255 255 / .55); color: #fff; transition: transform .4s var(--ease), background-color .4s, width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease); }
.apps span svg { stroke: #22a06b; }
.apps span.on { width: 50px; height: 50px; margin: -12px 0; background: radial-gradient(circle at 40% 30%, #3ddc84, #0f9d58); box-shadow: 0 0 0 4px #c9f5d6, 0 8px 18px -6px rgb(15 157 88 / .8); }
.apps span.on svg { stroke: #fff; }

/* ---------- how ---------- */
.how { padding: 96px 0 0; border-top: 1px solid var(--line); }
.steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--line); }
.steps-grid li { position: relative; display: flex; flex-direction: column; padding: 28px 24px 32px; border-right: 1px solid var(--line); min-height: 340px; }
.steps-grid li:last-child { border-right: 0; }
.num { font: 400 13px/1 var(--mono); color: var(--muted-2); }
.wk { position: absolute; top: 24px; right: 24px; font: 400 11px/1 var(--mono); padding: 5px 7px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); }
.steps-grid h3 { margin-top: 28px; font: 500 20px/1.25 var(--display); letter-spacing: -.015em; }
.steps-grid p { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.vig { margin-top: auto; padding-top: 26px; }
.vig-map { display: flex; flex-direction: column; gap: 6px; }
.vig-map i { position: relative; z-index: 0; display: block; font: normal 400 11px/22px var(--mono); color: var(--muted); padding-left: 8px; }
.vig-map i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: #f1f1f1; border-left: 2px solid #c9c9c9; z-index: -1; transform-origin: left; transition: transform 1s var(--ease); }
.vig-map i:nth-child(3)::before { background: #fde8e8; border-color: #e5484d; }
.vig-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.vig-stack span { font: 400 11.5px/1 var(--mono); padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink-2); background: #fafafa; }
.vig-stack .more { color: var(--muted-2); border-style: dashed; }
.vig-shadow .bar { display: block; height: 8px; border-radius: 4px; background: #eee; overflow: hidden; position: relative; }
.vig-shadow .bar::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 95%; width: 1.5px; background: var(--ink); }
.vig-shadow b { display: block; height: 100%; width: var(--p); background: linear-gradient(90deg, #8fd3b0, var(--green)); border-radius: 4px; transform-origin: left; transition: transform 1.2s var(--ease); }
.vig-shadow small { display: block; margin-top: 10px; font: 400 11px/1 var(--mono); color: var(--muted); }
.vig-live { display: inline-flex; align-items: center; gap: 8px; font: 400 11.5px/1 var(--mono); color: var(--green); padding: 8px 10px; border-radius: 5px; background: #ecf8f1; align-self: flex-start; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: ping-g 1.8s ease-out infinite; }
@keyframes ping-g { 0% { box-shadow: 0 0 0 0 rgb(31 157 99 / .5); } 80%, 100% { box-shadow: 0 0 0 7px rgb(31 157 99 / 0); } }
.steps-grid li:not(.in) .vig-map i::before { transform: scaleX(0); }
.steps-grid li:not(.in) .vig-shadow b { transform: scaleX(0); }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats div { padding: 40px 24px 36px; border-right: 1px solid var(--line); }
.stats div:last-child { border-right: 0; }
.stats b { display: block; font: 500 clamp(36px, 4.2vw, 52px)/1 var(--display); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.stats span { display: block; margin-top: 12px; font-size: 14px; color: var(--muted); max-width: 200px; }

/* ---------- cases ---------- */
.cases { padding: 96px 32px 24px; }
.cases .sec-head { padding: 0; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.case { border: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.case:hover { box-shadow: 0 24px 48px -28px rgb(20 40 70 / .35); transform: translateY(-3px); }
.case img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 1px solid var(--line); filter: saturate(.95); transition: filter .4s; }
.case:hover img { filter: saturate(1.1) contrast(1.03); }
.case-b { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.who { font: 400 11.5px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); }
.case h3 { margin-top: 14px; font: 500 20px/1.28 var(--display); letter-spacing: -.015em; }
.case-b > p:not(.who) { margin-top: 10px; font-size: 14px; color: var(--ink-2); }
.case dl { display: flex; gap: 28px; margin-top: auto; padding-top: 22px; }
.case dt { font: 500 24px/1 var(--display); letter-spacing: -.03em; }
.case dd { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }

/* ---------- quote ---------- */
.quote { padding: 96px 32px; border-top: 1px solid var(--line); margin-top: 72px; }
.quote blockquote { max-width: 880px; margin: 0 auto; text-align: center; }
.quote p { font: 500 clamp(24px, 2.8vw, 34px)/1.32 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.quote footer { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; text-align: left; }
.mono-av { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--engrave); color: #f3ead7; font: 500 14px/1 var(--display); letter-spacing: .02em; }
.quote b { display: block; font-weight: 500; }
.quote small { color: var(--muted); font-size: 13px; }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; padding: 88px 32px; border-top: 1px solid var(--line); }
.faq .sec-head { padding: 0; }
.qa details { border-bottom: 1px solid var(--line); }
.qa details:first-child { border-top: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font: 500 17px/1.35 var(--display); letter-spacing: -.01em; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ""; width: 12px; height: 12px; flex-shrink: 0; background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat; transition: transform .3s var(--ease); }
.qa details[open] summary::after { transform: rotate(45deg); }
.qa p { padding: 0 40px 22px 2px; font-size: 15px; color: var(--ink-2); }

/* ---------- cta ---------- */
.cta { position: relative; border-top: 1px solid var(--line); }
.cta img { width: 100%; aspect-ratio: 2100 / 813; object-fit: cover; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, rgb(248 244 234 / .82) 0%, rgb(248 244 234 / .55) 32%, rgb(248 244 234 / 0) 58%); pointer-events: none; }
.cta-in { position: absolute; z-index: 2; left: 6%; top: 13%; max-width: 440px; }
.cta h2 { margin: 0; font-size: clamp(32px, 4.2vw, 52px); }
.cta p { margin: 16px 0 26px; font-size: 16px; color: var(--ink-2); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 56px 32px 0; }
.foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.foot-brand p { margin-top: 16px; max-width: 280px; font-size: 14px; color: var(--muted); }
.foot nav { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.foot nav b { font: 400 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 6px; }
.foot nav a { color: var(--ink-2); width: fit-content; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.wordmark { margin: 40px -6px -0.2em; font: 600 clamp(120px, 24vw, 300px)/0.8 var(--display); letter-spacing: -.06em; color: #f1f1f1; user-select: none; }
.foot-bot { display: flex; justify-content: space-between; gap: 12px; padding: 18px 0 22px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted-2); position: relative; background: #fff; }

/* ---------- reveal ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }

.ariadne { position: fixed; left: 14px; bottom: 14px; z-index: 50; font: 500 12.5px/1 var(--sans); padding: 7px 11px; border-radius: 999px; background: rgba(20, 22, 26, .88); color: #fff; letter-spacing: .01em; box-shadow: 0 0 0 1px rgba(255, 255, 255, .14); opacity: .92; }
.ariadne b { font-weight: 600; color: #ff8a3d; }

/* ---------- responsive ---------- */
@media (max-width: 1060px) {
  .glass { width: 80%; top: 8%; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps-grid li:nth-child(2) { border-right: 0; }
  .steps-grid li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats div:nth-child(2) { border-right: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case:last-child { display: none; }
  .logos { flex-wrap: wrap; justify-content: center; column-gap: 44px; row-gap: 28px; }
}
@media (max-width: 860px) {
  .links, .talk { display: none; }
  .burger { display: block; }
  .stage { margin: 44px 16px 0; }
  .stage-art { aspect-ratio: auto; height: 100%; position: absolute; inset: 0; }
  .stage-art { object-position: 30% 0; }
  .glass { position: relative; left: auto; top: auto; transform: none; width: auto; margin: 170px 14px 28px; grid-template-columns: 1fr; }
  .chat { contain: none; }
  .thread { max-height: 380px; }
  .faq { grid-template-columns: 1fr; gap: 28px; }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hero { padding-top: 64px; }
  h1 { font-size: 40px; }
  h1 br, h2 br { display: none; }
  .hero .lede, .lede { font-size: 15px; }
  .logo-cell { width: 68px; }
  .build { padding: 72px 16px 24px; }
  .features { grid-template-columns: 1fr; gap: 44px; }
  .steps-grid { grid-template-columns: 1fr; }
  .steps-grid li { border-right: 0; min-height: 0; border-top: 1px solid var(--line); }
  .steps-grid li:first-child { border-top: 0; }
  .stats div { padding: 28px 16px; }
  .cases { padding: 72px 16px 8px; }
  .case-grid { grid-template-columns: 1fr; }
  .case:last-child { display: flex; }
  .quote { padding: 72px 20px; margin-top: 56px; }
  .faq { padding: 72px 16px; }
  .cta img { aspect-ratio: 4 / 5; object-position: 78% 50%; }
  .cta-in { left: 20px; right: 20px; top: 36px; }
  .cta::before { background: linear-gradient(180deg, rgb(248 244 234 / .88) 0%, rgb(248 244 234 / .6) 40%, rgb(248 244 234 / 0) 62%); }
  .foot { padding: 44px 16px 0; }
  .foot-bot { flex-direction: column; }
  .msg p { max-width: 86%; font-size: 11.5px; }
  .micro { font-size: 10.5px; }
  .steps b { font-size: 13px; }
  .steps small { font-size: 11px; }
  .steps time, .msg time { font-size: 10px; }
  .card-h small, .resolved small, .resolved em { font-size: 11px; }
  .ask input { font-size: 13px; }
  .ask button { width: 32px; height: 30px; }
  .foot nav a { padding: 5px 0; }
  .ariadne { position: static; display: table; margin: 0 auto 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; }
}