/* Provaniq website v3.6 — floating source logos with data particles, step-by-step
   form, how-it-works stepper, use-case tabs. Loaded last. */

/* ---------- home hero: logos float around the card and feed it ---------- */
.dock { display: none; }
.live { padding: 58px 46px 52px; }
.orb-logo { position: absolute; z-index: 3; width: 56px; height: 56px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-lift); display: grid; place-items: center; animation: orb-float 6s ease-in-out infinite; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.orb-logo img { width: 26px; height: 26px; }
.orb-logo img.wide { width: 34px; height: auto; }
.orb-logo::after { content: attr(data-name); position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); font: 600 11px var(--f-ui); color: var(--text-2); white-space: nowrap; opacity: 0; transition: opacity .3s; }
.orb-logo.hot { animation-play-state: paused; transform: scale(1.14); box-shadow: 0 0 0 6px rgba(242,96,74,.14), var(--sh-lift); }
.orb-logo.hot::after { opacity: 1; }
.orb-logo.o1 { left: 0; top: 110px; animation-delay: -1s; }
.orb-logo.o2 { left: 6px; top: 300px; animation-delay: -3s; }
.orb-logo.o3 { left: 30px; bottom: 6px; animation-delay: -5s; width: 48px; height: 48px; border-radius: 16px; }
.orb-logo.o4 { right: 0; top: 150px; animation-delay: -2s; }
.orb-logo.o5 { right: 10px; top: 340px; animation-delay: -4s; }
.orb-logo.o6 { right: 120px; bottom: 0; animation-delay: -2.5s; width: 52px; height: 52px; }
@keyframes orb-float { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(4px, -9px); } 50% { transform: translate(-3px, -4px); } 75% { transform: translate(-5px, -10px); } }
.data-dot { position: fixed; left: 0; top: 0; z-index: 60; width: 9px; height: 9px; border-radius: 99px; background: var(--coral); box-shadow: 0 0 0 3px rgba(242,96,74,.22); pointer-events: none; }
.data-dot.c2 { background: var(--rev); box-shadow: 0 0 0 3px rgba(122,91,181,.2); }
.data-dot.c3 { background: var(--ok); box-shadow: 0 0 0 3px rgba(46,139,98,.2); }
.live .app-search.flash { animation: search-flash .5s var(--ease); }
@keyframes search-flash { 50% { box-shadow: 0 0 0 6px rgba(242,96,74,.18); } }

/* ---------- apply: steps ---------- */
.form-steps { display: none; }
.fsteps { display: flex; gap: 8px; margin-bottom: 4px; }
.fsteps button { flex: 1; display: flex; align-items: center; gap: 8px; border: 0; background: var(--paper); border-radius: 12px; padding: 10px 12px; font: 600 13.5px var(--f-ui); color: var(--text-2); cursor: pointer; text-align: left; transition: background .25s, color .25s; }
.fsteps button i { width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font: 700 12px var(--f-ui); font-style: normal; background: #fff; border: 1.5px solid var(--line-2); flex: none; transition: background .25s, border-color .25s, color .25s; }
.fsteps button.on { background: var(--peach-soft); color: var(--text); }
.fsteps button.on i { border-color: var(--coral); color: var(--evidence); }
.fsteps button.done i { background: var(--ok); border-color: var(--ok); color: #fff; }
.fstep { display: grid; gap: 18px; }
.fstep[hidden] { display: none; }
.fstep.enter { animation: fstep-in .45s var(--ease); }
@keyframes fstep-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.fnav { display: flex; gap: 10px; justify-content: space-between; align-items: center; }
.fnav .count { font: 600 13px var(--f-ui); color: var(--text-2); }
.info-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 18px; box-shadow: var(--sh-card); display: grid; gap: 12px; }
.info-card div { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 14px; color: var(--text-2); }
.info-card b { color: var(--text); display: block; font-size: 14.5px; }
.info-card .ai { width: 22px; height: 22px; }

/* ---------- how it works: stepper replaces the long vertical list ---------- */
.stepper { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.stepper-list { display: grid; gap: 8px; }
.sbtn { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 14px 16px; cursor: pointer; overflow: hidden; transition: border-color .25s, box-shadow .25s, background .25s; }
.sbtn .n { position: relative; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--line); }
.sbtn .n .ai { width: 22px; height: 22px; }
.sbtn .n small { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 99px; background: var(--aub); color: #fff; font: 700 11px/20px var(--f-ui); text-align: center; }
.sbtn h3 { font-size: 17px; margin: 2px 0 0; }
.sbtn p { display: none; font-size: 14px; color: var(--text-2); margin-top: 6px; }
.sbtn.on { border-color: #F3B9AC; background: var(--peach-soft); box-shadow: var(--sh-card); }
.sbtn.on p { display: block; animation: fadeup .35s var(--ease); }
.sbtn.on .n { background: #fff; border-color: #F3B9AC; }
.sbtn .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--coral); }
.sbtn.on .bar { animation: sbar var(--t, 5s) linear forwards; }
.stepper.paused .sbtn.on .bar { animation-play-state: paused; }
@keyframes sbar { to { width: 100%; } }
.stepper-stage { position: sticky; top: 96px; }
.stepper-stage .ex { display: none; }
.stepper-stage .ex.on { display: block; animation: fstep-in .45s var(--ease); }
.stepper-stage .ex { padding: 22px; border-radius: 22px; box-shadow: var(--sh-lift); }
.stepper-stage .ex-title { font-size: 13px; }
.stepper-stage .stage-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font: 700 15px var(--f-display); }
.stepper-stage .stage-head .p-mini { width: 38px; height: 38px; border-radius: 13px; background: var(--peach); display: grid; place-items: center; }
.stepper-stage .stage-head .p-mini svg { width: 26px; height: 26px; }

/* ---------- use cases: one role at a time ---------- */
.uc-nav { position: sticky; top: 80px; z-index: 5; background: rgba(251,248,245,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 10px 0; margin-bottom: 10px; }
.uc-nav a { cursor: pointer; }
.uc-nav a.on { background: var(--aub); color: #fff; border-color: var(--aub); }
.uc-nav a.on i { box-shadow: 0 0 0 2px #fff; }
.uc { display: none; border-top: 0; padding: 26px 0 10px; }
.uc.on { display: grid; animation: fstep-in .45s var(--ease); }
.uc:nth-of-type(even) > :first-child { order: 0; }

@media (max-width: 1080px) {
  .stepper { grid-template-columns: 1fr; }
  .stepper-stage { position: static; }
}
@media (max-width: 860px) {
  .live { padding: 70px 0 70px; }
  .orb-logo { width: 44px; height: 44px; border-radius: 14px; }
  .orb-logo img { width: 22px; height: 22px; }
  .orb-logo.o1 { left: -4px; top: 6px; } .orb-logo.o4 { right: 90px; top: 6px; }
  .orb-logo.o2, .orb-logo.o5 { display: none; }
  .orb-logo.o3 { left: 10px; bottom: 6px; } .orb-logo.o6 { right: 10px; bottom: 6px; }
  .fsteps button span { display: none; }
  .fsteps button { justify-content: center; }
  .uc-nav { top: 72px; flex-wrap: nowrap; overflow-x: auto; }
  .uc-nav a { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .orb-logo { animation: none !important; }
  .sbtn.on .bar { animation: none; width: 100%; }
}
.fnav [hidden] { display: none !important; }
.fnav .count { margin-right: auto; margin-left: 4px; }
.fnav .back[hidden] + .count { margin-left: 0; }
@media (max-width: 1080px) { .form-wrap > aside .info-card { display: none; } }
@media (max-width: 860px) { .orb-logo.o4 { right: auto; left: 46%; top: 10px; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 14px; color: var(--no-t); min-height: 0; margin: 0; }
.form-status:empty { display: none; }
.form-status a { color: var(--text); font-weight: 600; }