/* Provaniq website v3.1 — motion & polish layer.
   Live hero scene, typing, logo bubbles and marquee, animated feature demos,
   chat-style questions, moving loop. Loaded after site.css / pages.css. */

/* ---------- calmer, sharper backgrounds (replaces blob glows) ---------- */
.hero::before, .hero::after, .page-hero::before { display: none; }
.hero, .page-hero { isolation: isolate; }
.bg-grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(46,34,56,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(46,34,56,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 65% 35%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 65% 35%, #000 20%, transparent 75%);
}
.bg-glow {
  position: absolute; z-index: -1; pointer-events: none; width: 560px; height: 560px; border-radius: 50%;
  right: -120px; top: -160px; background: radial-gradient(closest-side, rgba(255,237,231,.9), rgba(255,237,231,0));
  animation: glow-drift 18s ease-in-out infinite alternate;
}
@keyframes glow-drift { to { transform: translate(-80px, 60px) scale(1.08); } }

/* ---------- typed word in headline ---------- */
.typed-line { white-space: nowrap; }
.typed { color: var(--coral); }
.caret { display: inline-block; width: .07em; height: .9em; margin-left: .04em; background: var(--coral); vertical-align: -.06em; border-radius: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

/* ---------- live hero scene ---------- */
.live { position: relative; padding: 50px 52px 58px; }
.live .app {
  position: relative; z-index: 2; background: #fff; border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 2px 4px rgba(46,34,56,.05), 0 40px 80px -40px rgba(46,34,56,.45);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease);
}
.app-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.app-bar i { width: 9px; height: 9px; border-radius: 99px; background: var(--line-2); }
.app-bar .tag { margin-left: auto; font-size: 11px; padding: 3px 9px; }
.app-body { padding: 16px; }
.app-search {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 14px;
  border: 1.5px solid var(--line-2); background: var(--paper); font: 500 15px var(--f-ui); transition: border-color .3s, box-shadow .3s;
}
.app-search.typing { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(242,96,74,.12); background: #fff; }
.app-search .ai { width: 18px; height: 18px; }
.app-search .q { color: var(--text); }
.app-search .q:empty::before { content: attr(data-ph); color: var(--text-2); opacity: .7; }
.app-search .caret { height: 18px; width: 2px; }
.app-search kbd { margin-left: auto; font: 500 11px var(--f-ui); color: var(--text-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; background: #fff; }
.app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.app-kpis div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.app-kpis div.focus { border-color: var(--coral); box-shadow: inset 3px 0 0 var(--coral); }
.app-kpis b { display: block; font: 700 21px/1 var(--f-display); letter-spacing: -.03em; }
.app-kpis span { font-size: 11.5px; color: var(--text-2); line-height: 1.3; display: block; margin-top: 4px; }
.result {
  border: 1px solid var(--line); border-radius: 16px; padding: 14px; min-height: 154px;
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease);
  box-shadow: inset 3px 0 0 var(--coral); background: var(--peach-soft);
}
.result.is-on { opacity: 1; transform: none; }
.res-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.res-title { font: 700 16px var(--f-display); letter-spacing: -.01em; }
.res-meta { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.res-grid { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; margin-top: 12px; }
.res-grid small { display: block; font: 600 11px var(--f-ui); color: var(--text-2); margin-bottom: 5px; }
.res-to { font-size: 13px; font-weight: 600; }
.res-ev { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--text-2); }
.res-ev .src { transform: scale(.6); opacity: 0; transition: transform .4s var(--ease), opacity .4s var(--ease); }
.res-ev.is-on .src { transform: none; opacity: 1; }
.chip.swap { animation: chip-swap .5s var(--ease); }
@keyframes chip-swap { 0% { transform: scale(1); } 40% { transform: scale(.82); opacity: .4; } 100% { transform: scale(1); opacity: 1; } }
.app-list { margin-top: 10px; display: grid; gap: 6px; }
.app-list div { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--paper); font-size: 12.5px; }
.app-list div b { font-weight: 600; }

/* toasts (pops) */
.toasts { position: absolute; z-index: 4; right: -6px; bottom: 6px; display: grid; gap: 8px; justify-items: end; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 14px; font-size: 13px; box-shadow: var(--sh-lift); white-space: nowrap;
  animation: toast-in .55s var(--ease) both;
}
.toast.out { animation: toast-out .35s var(--ease) forwards; }
.toast .ai { width: 22px; height: 22px; }
.toast b { font-weight: 600; }
@keyframes toast-in { from { opacity: 0; transform: translateY(14px) scale(.9); } 70% { transform: translateY(-2px) scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-6px) scale(.96); } }

/* logo bubbles around the app (Bagel-style connectors, our colours) */
.bubbles { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.wires-layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wires-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.app-list > div[hidden] { display: none; }
.bubbles svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.wire-ants { fill: none; stroke: #E2B3A8; stroke-width: 1.6; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; animation: ants 1.4s linear infinite; }
.wire-ants.hot { stroke: var(--coral); }
@keyframes ants { to { stroke-dashoffset: -20; } }
.lb {
  position: absolute; z-index: 3; width: 54px; height: 54px; border-radius: 18px; background: #fff; border: 1px solid var(--line);
  display: grid; place-items: center; box-shadow: var(--sh-lift); pointer-events: auto;
  animation: floaty 6s var(--ease) infinite; transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.lb img { width: 26px; height: 26px; }
.lb.hot { box-shadow: 0 0 0 4px rgba(242,96,74,.18), var(--sh-lift); }
.lb::after { content: attr(data-name); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font: 500 11px var(--f-ui); color: var(--text-2); white-space: nowrap; opacity: 0; transition: opacity .2s; }
.lb:hover::after, .lb.hot::after { opacity: 1; }
.lb.l1 { left: -6px; top: 92px; animation-delay: -1s; }
.lb.l2 { left: -10px; bottom: 150px; animation-delay: -3s; }
.lb.l3 { right: -4px; top: 18px; animation-delay: -2s; }
.lb.l4 { right: -12px; top: 50%; animation-delay: -4s; }
.lb.l5 { left: 40%; top: -2px; animation-delay: -5s; width: 46px; height: 46px; border-radius: 15px; }
.lb.l5 img { width: 22px; height: 22px; }

/* ---------- logo marquee ---------- */
.logos { padding: 8px 0 40px; }
.logos-head { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; text-align: center; font-size: 14.5px; color: var(--text-2); margin-bottom: 20px; }
.logos-head .tag { font-size: 12px; }
.marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .track { display: flex; gap: 14px; width: max-content; animation: marquee 42s linear infinite; }
.marquee:hover .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.lg { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 10px 18px 10px 12px; font: 600 14.5px var(--f-ui); white-space: nowrap; transition: border-color .2s, transform .2s var(--ease); }
.lg:hover { border-color: var(--line-2); transform: translateY(-2px); }
.lg img { width: 22px; height: 22px; }
.ft { display: inline-grid; place-items: center; width: 26px; height: 30px; border-radius: 5px 9px 5px 5px; font: 800 8.5px var(--f-ui); color: #fff; letter-spacing: .02em; }
.ft.x { background: #1D6F42; } .ft.w { background: #2B579A; } .ft.p { background: #C0392B; } .ft.c { background: #5E5469; }

/* ---------- source cards with logos ---------- */
.src-logos { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.src-logos img { width: 20px; height: 20px; }
.src-logos .chiplogo { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--paper); border: 1px solid var(--line); }
.src-logos .ft { width: 22px; height: 26px; font-size: 7.5px; }
.core-node .orbit { position: absolute; inset: -34px; border: 1.5px dashed var(--line-2); border-radius: 50%; animation: spin 24s linear infinite; }
.core-node .orbit::before, .core-node .orbit::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 99px; background: var(--coral); top: -5px; left: calc(50% - 5px); }
.core-node .orbit::after { background: var(--rev); top: auto; bottom: -5px; }

/* ---------- feature demos (live mini scenes) ---------- */
.feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feat .card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.feat .card .txt { padding: 22px 24px 26px; }
.feat .card .txt p { margin-top: 8px; font-size: 15px; }
.demo { position: relative; height: 176px; background: var(--paper); border-bottom: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.demo.warm { background: var(--peach-soft); }
.demo.lil { background: var(--lilac-soft); }
.demo-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--sh-card); font-size: 13px; width: 84%; }

/* 1: phrase highlight + pop */
.d-quote { font-size: 13.5px; line-height: 1.5; }
.d-quote .hl { background: linear-gradient(var(--peach), var(--peach)) left / 0% 100% no-repeat; border-radius: 4px; padding: 0 2px; animation: hl 6s var(--ease) infinite; }
@keyframes hl { 0%,15% { background-size: 0% 100%; } 30%,85% { background-size: 100% 100%; box-shadow: inset 0 -2px 0 var(--coral); } 100% { background-size: 0% 100%; } }
.d-pop { position: absolute; right: 8%; bottom: 14px; display: flex; gap: 8px; align-items: center; background: #fff; border: 1.5px dashed var(--coral); border-radius: 12px; padding: 7px 10px; font-size: 12px; box-shadow: var(--sh-lift); opacity: 0; animation: dpop 6s var(--ease) infinite; }
.d-pop .mini-btn { background: var(--aub); color: #fff; border-radius: 99px; padding: 3px 9px; font-weight: 600; font-size: 11.5px; }
@keyframes dpop { 0%,32% { opacity: 0; transform: translateY(8px) scale(.9); } 40%,85% { opacity: 1; transform: none; } 95%,100% { opacity: 0; transform: translateY(-4px); } }

/* 2: chip flip */
.flip { position: relative; height: 34px; width: 230px; }
.flip .chip { position: absolute; left: 50%; top: 0; transform: translateX(-50%); opacity: 0; font-size: 14px; padding: 7px 14px 7px 12px; animation: flip3 7.5s var(--ease) infinite; }
.flip .chip:nth-child(2) { animation-delay: 2.5s; }
.flip .chip:nth-child(3) { animation-delay: 5s; }
@keyframes flip3 { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.9); } 6%,30% { opacity: 1; transform: translate(-50%, 0); } 36%,100% { opacity: 0; transform: translate(-50%, -12px) scale(.95); } }
.flip-label { font-size: 12.5px; color: var(--text-2); margin-bottom: 12px; text-align: center; }

/* 3: timeline */
.tl { position: relative; width: 82%; height: 92px; }
.tl .bar { position: absolute; left: 0; right: 0; top: 40px; height: 4px; border-radius: 4px; background: var(--line-2); }
.tl .due { position: absolute; left: 58%; top: 26px; width: 2px; height: 32px; background: var(--no); }
.tl .due::after { content: "Promised: 30 Jun"; position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font: 600 11px var(--f-ui); color: var(--no-t); white-space: nowrap; }
.tl .today { position: absolute; top: 33px; left: 6%; width: 18px; height: 18px; border-radius: 99px; background: var(--aub); box-shadow: 0 0 0 5px rgba(46,34,56,.12); animation: today 6s var(--ease) infinite; }
.tl .today::after { content: "Today"; position: absolute; top: 24px; left: 50%; transform: translateX(-50%); font: 600 11px var(--f-ui); color: var(--text-2); }
@keyframes today { 0%,10% { left: 6%; } 70%,100% { left: 86%; } }
.tl .st { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); }
.tl .st .chip { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.tl .st .chip.a { animation: stA 6s steps(1) infinite; }
.tl .st .chip.b { animation: stB 6s steps(1) infinite; }
@keyframes stA { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes stB { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }

/* 4: graph */
.dg { width: 88%; height: 150px; }
.dg .ln { stroke: var(--line-2); stroke-width: 2; fill: none; stroke-dasharray: 160; stroke-dashoffset: 160; animation: dgline 5s var(--ease) infinite; }
.dg .ln:nth-of-type(2) { animation-delay: .25s; } .dg .ln:nth-of-type(3) { animation-delay: .5s; }
@keyframes dgline { 0% { stroke-dashoffset: 160; } 30%,85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -160; } }
.dg .nd { animation: ndpop 5s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
.dg .nd.n2 { animation-delay: .35s; } .dg .nd.n3 { animation-delay: .6s; } .dg .nd.n4 { animation-delay: .85s; }
@keyframes ndpop { 0%,8% { transform: scale(.4); opacity: 0; } 18%,88% { transform: scale(1); opacity: 1; } 100% { transform: scale(.6); opacity: 0; } }
.dg text { font: 600 11px var(--f-ui); fill: var(--text); }

/* 5: click a number */
.clk { position: relative; width: 84%; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.clk .num { font: 800 44px/1 var(--f-display); letter-spacing: -.04em; padding: 6px 12px; border-radius: 14px; animation: numhl 5s var(--ease) infinite; }
@keyframes numhl { 0%,30% { background: transparent; } 38%,90% { background: #fff; box-shadow: 0 0 0 2px var(--coral); } 100% { background: transparent; } }
.clk .srcs { display: grid; gap: 6px; }
.clk .srcs .src { opacity: 0; animation: srcin 5s var(--ease) infinite; }
.clk .srcs .src:nth-child(2) { animation-delay: .15s; } .clk .srcs .src:nth-child(3) { animation-delay: .3s; }
@keyframes srcin { 0%,36% { opacity: 0; transform: translateX(-8px); } 44%,90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.cursor { position: absolute; width: 22px; height: 22px; left: 70%; top: 90%; animation: cur 5s var(--ease) infinite; z-index: 2; filter: drop-shadow(0 2px 3px rgba(46,34,56,.3)); }
@keyframes cur { 0% { left: 75%; top: 95%; } 28% { left: 12%; top: 46%; } 32% { transform: scale(.8); } 36% { transform: scale(1); } 100% { left: 12%; top: 46%; } }

/* 6: feed */
.feed { width: 86%; display: grid; gap: 7px; }
.feed div { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 11px; padding: 7px 10px; font-size: 12.5px; opacity: 0; animation: feedin 6s var(--ease) infinite; }
.feed div:nth-child(2) { animation-delay: .5s; } .feed div:nth-child(3) { animation-delay: 1s; }
.feed i { width: 8px; height: 8px; border-radius: 99px; flex: none; }
@keyframes feedin { 0% { opacity: 0; transform: translateY(12px); } 10%,80% { opacity: 1; transform: none; } 92%,100% { opacity: 0; transform: translateY(-6px); } }

/* ---------- chat-style team questions ---------- */
.chat { display: grid; gap: 12px; align-content: start; min-height: 330px; }
.msg { max-width: 92%; opacity: 0; transform: translateY(10px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.msg.on { opacity: 1; transform: none; }
.msg.q { justify-self: start; background: #fff; border: 1px solid var(--line); border-radius: 20px 20px 20px 6px; padding: 12px 16px; font: 600 16px/1.4 var(--f-display); box-shadow: var(--sh-card); }
.msg.q .who { display: block; font: 600 11.5px var(--f-ui); color: var(--text-2); margin-bottom: 2px; }
.msg.a { justify-self: end; background: var(--aub); color: #fff; border-radius: 20px 20px 6px 20px; padding: 14px 16px; font-size: 14px; box-shadow: var(--sh-lift); }
.msg.a .who { display: flex; align-items: center; gap: 6px; font: 600 11.5px var(--f-ui); color: var(--on-dark-2); margin-bottom: 6px; }
.msg.a .who img { width: 14px; height: 14px; }
.msg.a .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.msg.a .facts span { background: rgba(255,255,255,.1); border-radius: 99px; padding: 3px 10px; font-size: 12px; }
.msg.a .chip { font-size: 12px; }
.typing { display: inline-flex; gap: 4px; padding: 12px 14px; background: #fff; border: 1px solid var(--line); border-radius: 16px; justify-self: start; }
.typing.r { justify-self: end; background: var(--aub); border-color: var(--aub); }
.typing i { width: 7px; height: 7px; border-radius: 99px; background: var(--text-2); animation: t-type 1s ease-in-out infinite; }
.typing.r i { background: #fff; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }

/* ---------- how-it-works loop: fixed and moving ---------- */
.loop > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop svg.ai { position: static; }
.loop .loop-center { display: grid; place-items: center; text-align: center; gap: 2px; width: 140px; height: 140px; border-radius: 44px; box-shadow: var(--sh-card); background: #fff; border: 1px solid var(--line); }
.loop .loop-center .ai { width: 34px; height: 34px; }
.loop .loop-center b { font: 700 13px/1.25 var(--f-display); padding: 0 10px; min-height: 2.5em; transition: opacity .3s; }
.loop-comet { fill: var(--coral); }
.loop-trail { fill: none; stroke: var(--coral); stroke-width: 3; stroke-linecap: round; opacity: .55; }
.loop-item { transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.loop-item.active { border-color: var(--coral); box-shadow: 0 0 0 4px rgba(242,96,74,.14), var(--sh-lift); transform: translate(-50%, -50%) scale(1.06); }
.loop-item .ai { width: 18px; height: 18px; display: inline-block; vertical-align: -3px; margin-right: 4px; }

/* ---------- step progress pulse ---------- */
.step.in .num { animation: numring 2.6s var(--ease) 1; }
@keyframes numring { 0% { box-shadow: 0 0 0 0 rgba(242,96,74,.35), var(--sh-card); } 100% { box-shadow: 0 0 0 16px rgba(242,96,74,0), var(--sh-card); } }

/* ---------- scroll progress bar ---------- */
.scroll-progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--coral), #F79A86); z-index: 60; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .feat { grid-template-columns: 1fr 1fr; }
  .live { padding: 40px 12px 48px; }
}
@media (max-width: 860px) {
  .feat { grid-template-columns: 1fr; }
  .lb.l2, .lb.l4, .lb.l5 { display: none; }
  .lb { width: 44px; height: 44px; border-radius: 14px; }
  .lb img { width: 22px; height: 22px; }
  .lb.l1 { left: -4px; top: 6px; }
  .lb.l3 { right: -4px; top: 6px; }
  .res-grid { grid-template-columns: 1fr 1fr; }
  .res-grid > div:last-child { grid-column: 1 / -1; }
  .toasts { right: 4px; bottom: 0; }
  .typed-line { white-space: normal; }
  .chat { min-height: 0; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bg-glow, .marquee .track, .core-node .orbit, .wire-ants, .lb { animation: none !important; }
  .marquee .track { flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .d-quote .hl { background-size: 100% 100% !important; }
  .d-pop, .feed div, .clk .srcs .src, .dg .nd, .flip .chip:first-child, .tl .st .chip.b { opacity: 1 !important; animation: none !important; }
  .flip .chip:not(:first-child), .tl .st .chip.a, .cursor { display: none; }
  .dg .ln { stroke-dashoffset: 0 !important; animation: none !important; }
  .tl .today { left: 86% !important; animation: none !important; }
  .msg { opacity: 1 !important; transform: none !important; }
  .caret { animation: none; }
}

/* headline lines */
.hero h1 > span { display: block; }
.page-hero { overflow: hidden; }
.page-hero .bg-glow { top: -220px; }
@media (min-width: 1081px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.hero h1 { font-size: clamp(38px, 4.4vw, 60px); }
.hero h1 .typed-line { min-height: 1.05em; }
.src-logos .ft { width: 30px; height: 30px; font-size: 8.5px; border-radius: 6px 10px 6px 6px; }
.msg.a .facts .chip { background: var(--no-bg); color: var(--no-t); padding: 3px 10px 3px 8px; }
.msg.a .facts .chip.ok { background: var(--ok-bg); color: var(--ok-t); }
.loop[data-loop] { width: min(500px, 100%); }
.loop .loop-center { width: 112px; height: 112px; border-radius: 36px; }
.loop .loop-center b { font-size: 12px; padding: 0 8px; }
.loop[data-loop] .loop-item { width: 156px; font-size: 13.5px; padding: 9px 12px; }
.loop-comet { filter: drop-shadow(0 0 6px rgba(242,96,74,.6)); }
@media (max-width: 860px) { .loop[data-loop] .loop-item { width: 118px; font-size: 12px; } .loop .loop-center { width: 88px; height: 88px; } .loop .loop-center b { display: none; } }

/* ---------- inner page heroes: split with a live visual ---------- */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.hero-split h1 { font-size: clamp(38px, 4.6vw, 64px); }

/* vision: orbiting memory */
.orbit-vis { position: relative; width: min(440px, 100%); aspect-ratio: 1; margin: 0 auto; }
.orbit-vis .ring { position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.orbit-vis .r1 { width: 54%; height: 54%; border: 1.5px solid #F3B9AC; animation: orb 26s linear infinite; }
.orbit-vis .r2 { width: 92%; height: 92%; border: 1.5px dashed var(--line-2); animation: orb 48s linear infinite reverse; }
@keyframes orb { to { transform: translate(-50%, -50%) rotate(360deg); } }
.orbit-vis .core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 30px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lift); display: grid; place-items: center; }
.orbit-vis .core img { width: 46px; }
.orbit-vis .core::after { content: ""; position: absolute; inset: -14px; border-radius: 40px; border: 2px solid var(--coral); opacity: 0; animation: ripple 3s var(--ease) infinite; }
.onode { position: absolute; transform: translate(-50%, -50%); }
.onode span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font: 600 12.5px var(--f-ui); box-shadow: var(--sh-card); }
.r1 .onode span { border-color: #F3B9AC; background: var(--peach-soft); animation: orb-counter 26s linear infinite; }
.r2 .onode span { color: var(--text-2); animation: orb-counter-r 48s linear infinite; }
.r1 .onode span::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--coral); }
@keyframes orb-counter { to { transform: rotate(-360deg); } }
@keyframes orb-counter-r { to { transform: rotate(360deg); } }

/* product: stacked view cards cycling */
.views-stack { position: relative; height: 330px; width: min(440px, 100%); margin: 0 auto; }
.vcard { position: absolute; left: 0; right: 0; top: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--sh-lift);
  transition: transform .7s var(--ease), opacity .7s var(--ease); transform-origin: 50% 0; }
.vcard[data-pos="0"] { transform: translateY(70px) scale(1); opacity: 1; z-index: 5; }
.vcard[data-pos="1"] { transform: translateY(44px) scale(.95); opacity: .9; z-index: 4; }
.vcard[data-pos="2"] { transform: translateY(20px) scale(.9); opacity: .7; z-index: 3; }
.vcard[data-pos="3"] { transform: translateY(0) scale(.85); opacity: .45; z-index: 2; }
.vcard[data-pos="4"] { transform: translateY(-24px) scale(.8); opacity: 0; z-index: 1; }
.vcard h4 { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 12px; }
.vcard h4 .ai { width: 20px; height: 20px; }
.vcard .vrow { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--paper); font-size: 12.5px; margin-top: 6px; }
.vcard .vrow b { font-weight: 600; }

/* how it works: a document travels the pipeline */
.pipe-vis { position: relative; width: min(460px, 100%); margin: 0 auto; padding: 56px 10px 20px; }
.pipe-track { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; }
.pipe-track::before { content: ""; position: absolute; left: 8%; right: 8%; top: 50%; height: 3px; background: var(--line-2); border-radius: 3px; }
.pipe-track::after { content: ""; position: absolute; left: 8%; top: 50%; height: 3px; width: 0; background: var(--coral); border-radius: 3px; animation: pipefill 7s var(--ease) infinite; }
@keyframes pipefill { 0%,5% { width: 0; } 80%,100% { width: 84%; } }
.pdot { position: relative; z-index: 1; justify-self: center; width: 44px; height: 44px; border-radius: 15px; background: #fff; border: 1.5px solid var(--line-2); display: grid; place-items: center; font: 700 14px var(--f-display); animation: pdot 7s var(--ease) infinite; }
.pdot:nth-child(2) { animation-delay: .9s; } .pdot:nth-child(3) { animation-delay: 1.8s; } .pdot:nth-child(4) { animation-delay: 2.7s; } .pdot:nth-child(5) { animation-delay: 3.6s; } .pdot:nth-child(6) { animation-delay: 4.5s; }
@keyframes pdot { 0%,8% { border-color: var(--line-2); background: #fff; color: var(--text); } 14%,80% { border-color: var(--coral); background: var(--peach); color: var(--evidence); transform: scale(1.08); } 90%,100% { border-color: var(--line-2); background: #fff; transform: scale(1); } }
.pipe-labels { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 10px; font: 600 11.5px/1.25 var(--f-ui); color: var(--text-2); text-align: center; }
.pipe-doc { position: absolute; top: 4px; left: 3%; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 7px 10px; box-shadow: var(--sh-lift); font: 600 12px var(--f-ui); white-space: nowrap; animation: pipedoc 7s var(--ease) infinite; }
.pipe-doc .ft { width: 22px; height: 24px; font-size: 7px; }
@keyframes pipedoc { 0%,5% { left: 0%; opacity: 0; } 10% { opacity: 1; } 80% { left: 52%; opacity: 1; } 92%,100% { left: 52%; opacity: 0; } }
.pipe-result { margin-top: 26px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pipe-result .chip { animation: presult 7s var(--ease) infinite; opacity: 0; }
.pipe-result .chip:nth-child(2) { animation-delay: .2s; } .pipe-result .chip:nth-child(3) { animation-delay: .4s; }
@keyframes presult { 0%,74% { opacity: 0; transform: translateY(8px); } 80%,94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

@media (max-width: 1080px) {
  .hero-split { grid-template-columns: 1fr; }
  .orbit-vis { width: min(360px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-vis .ring, .onode span, .pipe-track::after, .pdot, .pipe-doc, .pipe-result .chip { animation: none !important; }
  .pipe-track::after { width: 84%; } .pipe-result .chip { opacity: 1; }
}

.result.dim { opacity: .35; filter: blur(1.5px); transform: scale(.99); }
.vcard:not([data-pos="0"]) > * { visibility: hidden; }