/* home.css — the v3 home page, linked by the home layout only.

   Every value comes from the design export (Main.dc.html, v3-eng): layout and
   type are classes here; the phone and card illustrations keep the design's
   exact values inline in pages/index.html. The design is a 1440px artboard -
   the breakpoints at the end are the only additions, and they never change a
   colour or a timing, only sizes, so phones get the same page at their width.

   Everything is prefixed vh- so nothing can collide with the shared vx-
   components the other pages use. */

/* --------------------------------------------------------------- page --- */
.vh {
  font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
  font-size: 16px; line-height: normal; color: #16142b;
  background: #f6f5fc; overflow-x: clip;
}
/* The design is drawn in the browser's default content-box sizing - a
   max-width of 1200px plus 24px of padding is 1248px wide - whereas the site
   resets everything to border-box. The design's boxes get theirs back; the
   shared vx- partials embedded here (store badges, the waitlist form) keep the
   site's. Elements the design sizes explicitly carry their own box-sizing. */
.vh, .vh :where(*, *::before, *::after) { box-sizing: content-box; }
.vh :where([class*="vx-"], [class*="vx-"] *, [class*="vx-"] *::before, [class*="vx-"] *::after) { box-sizing: border-box; }
/* The design sets type per element; the site's global heading rhythm must not
   leak in. :where() keeps this at class weight so .vh-h2 and friends win. */
.vh :where(h1, h2, h3, h4) { letter-spacing: normal; line-height: normal; text-wrap: initial; }
.vh :where(img, svg) { max-width: none; }
.vh a:not([class]) { color: #5b4fe0; }

.vh-night {
  background: radial-gradient(ellipse at 72% 45%, #2e2380 0%, #151236 46%, #0b0a1e 100%);
  color: #f4f3fb;
}

/* --------------------------------------------------------------- type --- */
.vh-h1 { margin: 0; font-size: 72px; font-weight: 800; line-height: 1.04; letter-spacing: -2.5px; }
.vh-h2 { margin: 0; font-size: 50px; font-weight: 800; line-height: 1.08; letter-spacing: -1.5px; }
.vh-h2--56 { font-size: 56px; line-height: 1.05; letter-spacing: -2px; }
.vh-h2--54 { max-width: 640px; font-size: 54px; line-height: 1.06; letter-spacing: -2px; }
.vh-h2--48 { font-size: 48px; letter-spacing: -1.6px; }
.vh-h2--44 { font-size: 44px; letter-spacing: -1.4px; }
.vh-lead { margin: 0; max-width: 520px; font-size: 19px; line-height: 1.6; color: #4a4766; }
.vh-lead--20 { max-width: none; font-size: 20px; }
.vh-lead--night { color: #c4c0e6; }

.vh-grad {
  background: linear-gradient(90deg, #6a73ff 0%, #2f8fd6 55%, #1fae9f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #2f8fd6;
}
.vh-grad--hero { background-image: linear-gradient(90deg, #7b83ff 0%, #3d9be0 55%, #2ec4b6 100%); color: #3d9be0; }
.vh-grad--night { background-image: linear-gradient(90deg, #8a90ff 0%, #4aa6ee 55%, #2ec4b6 100%); color: #4aa6ee; }
.vh-grad--final { background-image: linear-gradient(90deg, #a9a3ff 0%, #6fb8f2 55%, #4fd6c6 100%); color: #6fb8f2; }
.vh-grad--nowrap { white-space: nowrap; }

.vh-points { margin: 0; padding: 4px 0 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.vh-points li { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 400; color: #16142b; }
.vh-points--night li { color: #e6e4f5; }

/* Stock state colours shared by the illustrations. */
.vh-tone--ok { color: #0f9e8e; }
.vh-tone--low { color: #d97706; }
.vh-tone--out { color: #dc2626; }

/* ------------------------------------------------------------- layout --- */
.vh-split {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 64px;
}
.vh-split--reverse { flex-wrap: wrap-reverse; }
.vh-copy { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.vh-art { flex: 1 1 420px; min-width: 0; display: flex; justify-content: center; }

/* The illustration stage: a fixed artboard the design scales with zoom. */
.vh-stage { position: relative; width: 100%; max-width: 460px; height: 680px; zoom: 0.86; }
.vh-stage--92 { zoom: 0.92; }
.vh-stage--dash { height: 660px; zoom: 0.92; }
.vh-stage--hero { max-width: 600px; height: 700px; zoom: 0.78; }

/* --------------------------------------------------------------- hero --- */
/* Pulled up under the sticky header so the bar floats over the night sky. */
.vh-hero { position: relative; overflow: hidden; margin-top: calc(-1 * var(--vx-header-h)); }
.vh-hero__inner {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 116px 24px 72px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 40px;
}
.vh-hero__copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.vh-hero__badge {
  margin: 0; align-self: flex-start; display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 999px; border: 1px solid #3b3566; background: #1a1640;
  font-size: 15px; font-weight: 600; color: #c4c0e6;
}
.vh-hero__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #38bdb2; animation: vh-ring 2s infinite; }
.vh-hero__sub { margin: 0; max-width: 520px; font-size: 20px; line-height: 1.6; color: #c4c0e6; }
.vh-hero__art { flex: 1 1 560px; min-width: 0; display: flex; justify-content: center; }

/* ------------------------------------------------------- store badges --- */
/* The shared badge partials, dressed as the design draws them: solid black
   Play and outlined App Store on the night hero, inverted on the final band. */
.vh-hero .vx-cta-row, .vh-final__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.vh-hero .vx-cta-row { padding-top: 6px; }
.vh-final__cta { justify-content: center; padding-top: 10px; }
.vh .vx-store {
  display: flex; align-items: center; gap: 12px; min-height: 56px; box-sizing: border-box;
  padding: 10px 20px 10px 16px; border-radius: 12px; text-decoration: none;
  font-family: inherit; transition: transform .25s, box-shadow .25s;
}
.vh .vx-store:hover { transform: translateY(-3px); box-shadow: 0 12px 28px #0006; }
.vh .vx-store__lines { line-height: 1.1; text-align: left; }
.vh .vx-store__small { font-size: 11px; font-weight: 500; opacity: 1; }
.vh .vx-store__big { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; }
.vh .vx-store__glyph--play { width: 28px; height: 30px; }
.vh .vx-store__glyph--apple { width: 24px; height: 28px; margin: 0; }

.vh-hero .vx-store { background: #000; border: 1px solid #4b4580; color: #fff; }
.vh-hero .vx-store__small { color: #e6e6e6; }
.vh-hero .vx-store--soon { background: #fff; border: 1.5px dashed #c9c6d8; color: #16142b; }
.vh-hero .vx-store--soon .vx-store__small { color: #6b6880; }
.vh-hero .vx-store--soon .vx-store__big { color: #2e2c3a; }
.vh-hero .vx-store--soon .vx-store__glyph--apple { color: #3a3a3c; }
.vh-hero span.vx-store--soon { background: transparent; border-color: #ffffff4d; color: #fff; }
.vh-hero span.vx-store--soon .vx-store__small, .vh-hero span.vx-store--soon .vx-store__big { color: #c4c0e6; }
.vh-hero .vx-btn--primary { min-height: 56px; border-radius: 12px; background: #5b4fe0; color: #fff; font-weight: 700; }
.vh-hero .vx-btn--primary:hover { background: #3d33a8; }

.vh-final .vx-store { background: #fff; border: 0; color: #16142b; }
.vh-final .vx-store__small { color: #4a4766; }
.vh-final .vx-store__big { font-size: 19px; letter-spacing: 0; }
.vh-final .vx-store__glyph--play { width: 24px; height: 26px; }
.vh-final .vx-store--soon { background: #ffffff0d; border: 1.5px dashed #ffffff4d; color: #fff; }
.vh-final .vx-store--soon .vx-store__small { color: #c4c0e6; }
.vh-final .vx-store--soon .vx-store__glyph--apple { width: 22px; height: 26px; }

/* -------------------------------------------------------- trust band --- */
.vh-trustband { width: 100%; background: #fff; border-top: 1px solid #ebe9f6; border-bottom: 1px solid #ebe9f6; }
.vh-trustband__grid {
  max-width: 1240px; margin: 0 auto; padding: 28px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 16px 24px;
}
.vh-trust { transition: background .3s; }
.vh-trust:hover { background: #f6f5fc; }

/* ----------------------------------------------------------- problem --- */
.vh-problem { background: #f3f4f6; }
.vh-problem__inner { max-width: 1200px; margin: 0 auto; padding: 112px 24px; display: flex; flex-direction: column; gap: 56px; }
.vh-problem__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.vh-card { transition: transform .35s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s; }
.vh-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px #2b21702a; }

/* ---------------------------------------------- pinned step sequences --- */
/* Two steps share one phone. Static by default - the texts stack and the
   phone alternates on its own (site.js) - which is what phones and no-JS get.
   From 900px site.js adds .is-pinned and the scroll drives the steps. */
.vh-steps-sec { position: relative; background: #f8f7ff; }
.vh-steps-sec.vh-night { background: radial-gradient(ellipse at 72% 45%, #2e2380 0%, #151236 46%, #0b0a1e 100%); }
.vh-steps { position: relative; }
.vh-steps__row {
  max-width: 1200px; margin: 0 auto; padding: 96px 24px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; gap: 48px;
}
.vh-steps__copy { order: -1; display: flex; flex-direction: column; gap: 64px; }
.vh-step--text { display: flex; flex-direction: column; gap: 22px; }

.vh-step--overlay {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.vh-step--overlay.is-on { opacity: 1; transform: translateY(0); }

.vh-scr { transform: translateY(100%); z-index: 1; transition: transform .75s cubic-bezier(.65,0,.35,1), filter .75s ease; will-change: transform; }
.vh-scr.is-on { transform: translateY(0); z-index: 2; box-shadow: 0 -10px 30px #0b0a1e33; }
.vh-scr.is-past { transform: translateY(-28%); filter: brightness(.55); z-index: 1; }

.vh-steps.is-pinned { height: 1640px; }
.is-pinned .vh-steps__pin {
  position: sticky; top: var(--vx-header-h); overflow: hidden;
  height: min(760px, calc(100vh - var(--vx-header-h)));
}
.is-pinned .vh-steps__row { height: 100%; padding: 0 24px; flex-direction: row; align-items: center; gap: 64px; }
.is-pinned .vh-steps__copy { order: 0; display: block; flex: 1 1 440px; min-width: 0; position: relative; height: 560px; }
.is-pinned .vh-step--text {
  position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; transform-origin: left;
  opacity: 0; transform: translateY(24px); pointer-events: none;
}
.is-pinned .vh-step--text.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Only once the pinned layout has painted (site.js adds .is-live a frame
   later), or the second step would visibly fade out on page load. */
.is-pinned.is-live .vh-step--text { transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }

/* Purchase-order status pills in the orders phone. */
.vh-po { padding: 4px 9px; border-radius: 8px; font-size: 9.5px; font-weight: 700; }
.vh-po--progress { background: #eef0ff; color: #4c5fd5; }
.vh-po--draft { background: #ececef; color: #6b7280; }
.vh-po--received { background: #dcfce7; color: #15803d; }
.vh-po--canceled { background: #fee2e2; color: #dc2626; }

/* ------------------------------------------------------ import & home --- */
.vh-import { background: #fff; }
.vh-import__inner { padding: 110px 24px; }
.vh-dash { background: #f8f7ff; }
.vh-dash__inner { padding: 120px 24px; }
.vh-hcards { margin: 0; padding: 10px 0 0; list-style: none; display: flex; flex-direction: column; gap: 14px; max-width: 560px; }

/* ------------------------------------------------------------- bento --- */
.vh-bento { background: #f3f4f6; }
.vh-bento__inner { max-width: 1200px; margin: 0 auto; padding: 88px 24px; display: flex; flex-direction: column; gap: 36px; }

/* ----------------------------------------------------------- pricing --- */
.vh-pricing {
  position: relative; overflow: hidden;
  background-color: #fff; background-image: radial-gradient(#ebe8f8 1px, #ffffff00 1px); background-size: 24px 24px;
}
.vh-pricing__inner {
  position: relative; max-width: 1120px; margin: 0 auto; padding: 100px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 48px;
}
.vh-plan {
  flex: 1 1 340px; min-width: 0; position: relative; overflow: hidden; padding: 34px 32px 32px; box-sizing: border-box;
  border-radius: 26px; background: radial-gradient(ellipse at 80% 0%, #3a2d9c 0%, #1b1650 45%, #0b0a1e 100%);
  color: #f4f3fb; box-shadow: 0 30px 70px #1b165055; display: flex; flex-direction: column; gap: 24px;
}
.vh-plan__price {
  font-size: 64px; font-weight: 800; letter-spacing: -2.5px; line-height: 1;
  background: linear-gradient(90deg, #ffffff 0%, #c9c2ff 50%, #8fe3d9 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #fff;
}
.vh-founders {
  flex: 1.5 1 480px; min-width: 0; position: relative; padding: 2px;
  border-radius: 26px; overflow: hidden; box-shadow: 0 24px 60px #b7791f1f;
}
.vh-founders__body {
  position: relative; height: 100%; overflow: hidden; padding: 34px 34px 32px; box-sizing: border-box;
  border-radius: 24px; background: linear-gradient(150deg, #fffaea 0%, #ffffff 55%, #fffdf6 100%);
  display: flex; flex-direction: column; gap: 18px;
}
/* The design breaks this title by hand to clear the rotating seal; a
   translated title cannot carry that <br>, so the seal's width is reserved and
   balance splits the lines - which lands on the design's own break in English. */
.vh-founders__body > h3 { padding-right: 80px; text-wrap: balance; }
.vh-founders__seats { position: relative; font-size: 14px; font-weight: 700; color: #8a5a12; }

/* --------------------------------------------------------------- faq --- */
.vh-faqsec { position: relative; overflow: hidden; background: #f8f7ff; }
.vh-faqsec__inner { position: relative; max-width: 860px; margin: 0 auto; padding: 100px 24px; display: flex; flex-direction: column; gap: 44px; }
/* <details> underneath: it opens without JS. site.js adds .is-open for the
   slide; html:not(.js) lets the native [open] state drive the same look. */
.vh-faq { border-bottom: 1px solid #e4e1f5; }
.vh-faq__q {
  list-style: none; min-height: 64px; padding: 18px 4px; box-sizing: border-box;
  display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer;
}
.vh-faq__q::-webkit-details-marker { display: none; }
.vh-faq-ic {
  flex: none; width: 40px; height: 40px; border-radius: 12px; background: #eceeff;
  display: flex; align-items: center; justify-content: center; transition: transform .3s, background .3s;
}
.vh-faq__q:hover .vh-faq-ic { transform: scale(1.08); }
.vh-faq-q { flex: 1; font-size: 19px; font-weight: 700; letter-spacing: -0.2px; color: #16142b; transition: color .3s; }
.vh-faq-chev {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; transition: transform .35s, background .3s;
}
.vh-ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.2,.8,.2,1); }
.vh-ans > div { overflow: hidden; }
.vh-ans p { margin: 0; padding: 0 56px 22px 60px; font-size: 16.5px; line-height: 1.65; color: #4a4766; }
.vh-faq.is-open .vh-ans, html:not(.js) .vh-faq[open] .vh-ans { grid-template-rows: 1fr; }
.vh-faq.is-open .vh-faq-q, html:not(.js) .vh-faq[open] .vh-faq-q { color: #4f46e5; }
.vh-faq.is-open .vh-faq-chev, html:not(.js) .vh-faq[open] .vh-faq-chev { transform: rotate(180deg); background: #eceeff; }
.vh-faq.is-open .vh-faq-ic, html:not(.js) .vh-faq[open] .vh-faq-ic { background: #4f46e5; }
.vh-faq.is-open .vh-faq-ic svg, html:not(.js) .vh-faq[open] .vh-faq-ic svg { stroke: #fff; }
.vh-mail { transition: border-color .2s, box-shadow .2s; }
.vh-mail:hover { border-color: #8f80ff !important; box-shadow: 0 0 0 4px #8f80ff22; }

/* -------------------------------------------------------- final band --- */
.vh-final { background: #f8f7ff; }
.vh-final__wrap { max-width: 1200px; margin: 0 auto; padding: 40px 24px 96px; }
.vh-final__band {
  position: relative; overflow: hidden; padding: 80px 32px; border-radius: 32px;
  background: radial-gradient(ellipse at 50% 0%, #2e2380 0%, #151236 55%, #0b0a1e 100%);
  color: #f4f3fb; text-align: center; box-shadow: 0 40px 90px #1b165040;
}
.vh-final__lead { margin: 0; font-size: 18px; line-height: 1.6; color: #c4c0e6; }
.vh-final__form { width: 100%; }
.vh-final__form .vx-inline-form { margin-top: 10px; }
.vh-final__form .vx-form__privacy { color: #c4c0e6; }
.vh-final__form .vx-btn--primary { border-radius: 12px; background: #5b4fe0; color: #fff; font-weight: 700; }

/* --------------------------------------------------------- ios notify --- */
.vh-ios { background: #f3f4f6; }
.vh-ios__wrap { max-width: 920px; margin: 0 auto; padding: 56px 24px; }
.vh-ios__card {
  position: relative; overflow: hidden; padding: 24px 28px; border-radius: 22px;
  background: #fff; border: 1.5px dashed #d6d3e6;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.vh-ios__lead { flex: 1 1 min(360px, 100%); min-width: 0; display: flex; align-items: center; gap: 20px; }
.vh-ios__icon {
  position: relative; flex: none; width: 56px; height: 56px; border-radius: 14px; background: #111;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px #0002;
}
.vh-ios__ping {
  position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; border-radius: 50%;
  background: #5b5fe0; box-shadow: 0 0 0 3px #fff; animation: vh-ring 2s infinite;
}
.vh-ios__copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vh-ios__title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.6px; color: #16142b; }
.vh-ios__note { margin: 0; font-size: 14px; color: #6b6880; }
.vh-ios__actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vh-ios__btn {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px;
  padding: 14px 24px; min-height: 44px; box-sizing: border-box; border-radius: 12px;
  background: #5b5fe0; box-shadow: 0 10px 24px #5b5fe040; color: #fff;
  font-size: 17px; font-weight: 700; text-decoration: none;
}
.vh-ios__mail { font-size: 14px; color: #4a4766; }
.vh-shine {
  position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(90deg, #ffffff00, #ffffff55, #ffffff00);
  transform: skewX(-20deg); animation: vh-btnshine 3.5s ease-in-out infinite;
}

/* ------------------------------------------------- animation helpers --- */
.vh-float { animation: vh-float 4.5s ease-in-out infinite alternate; }
.vh-l { animation: vh-float-l 5.5s ease-in-out infinite alternate; }
.vh-r { animation: vh-float-r 6s ease-in-out infinite alternate; }
.vh-tilt { animation: vh-tilt 6s ease-in-out infinite alternate; }
.vh-tilt2 { animation: vh-tilt2 6s ease-in-out infinite alternate; }
.vh-chip { animation: vh-chip 5s ease-in-out infinite; }

/* -------------------------------------------------------- breakpoints --- */
/* Sizes only: the 1440px artboard folded down for tablets and phones. */
@media (max-width: 899px) {
  .vh-hero__inner { padding: 108px 20px 56px; }
  .vh-h1 { font-size: 54px; letter-spacing: -1.8px; }
  .vh-h2, .vh-h2--56, .vh-h2--54, .vh-h2--48 { font-size: 40px; letter-spacing: -1.2px; }
  .vh-h2--44 { font-size: 36px; letter-spacing: -1.1px; }
  .vh-problem__inner, .vh-import__inner, .vh-dash__inner, .vh-bento__inner, .vh-pricing__inner, .vh-faqsec__inner { padding: 80px 20px; }
  .vh-steps__row { padding: 80px 20px; }
  .vh-split { gap: 48px; }
  .vh-final__wrap { padding: 32px 20px 80px; }
}

@media (max-width: 599px) {
  .vh-hero__inner { padding: 100px 16px 40px; gap: 28px; }
  .vh-hero__copy { gap: 20px; }
  .vh-hero__badge { font-size: 14px; }
  .vh-h1 { font-size: 40px; letter-spacing: -1.2px; }
  .vh-hero__sub, .vh-lead, .vh-lead--20 { font-size: 17px; }
  .vh-h2, .vh-h2--56, .vh-h2--54, .vh-h2--48, .vh-h2--44 { font-size: 32px; line-height: 1.12; letter-spacing: -1px; }
  .vh-points li { font-size: 15px; }

  .vh-stage { zoom: 0.64; }
  .vh-stage--92, .vh-stage--dash { zoom: 0.68; }
  .vh-stage--hero { zoom: 0.52; }

  .vh-trustband__grid { padding: 24px 16px; }
  .vh-problem__inner, .vh-import__inner, .vh-dash__inner, .vh-bento__inner, .vh-pricing__inner, .vh-faqsec__inner { padding: 64px 16px; gap: 32px; }
  .vh-steps__row { padding: 64px 16px; gap: 32px; }
  .vh-steps__copy { gap: 48px; }
  .vh-split { gap: 32px; }
  .vh-hcards li > span:nth-child(2) { font-size: 16px !important; }

  .vh-plan { padding: 28px 22px; }
  .vh-plan__price { font-size: 52px; }
  .vh-founders__body { padding: 28px 20px; }
  .vh-founders__body > h3 { padding-right: 76px; font-size: 24px !important; }

  .vh-faq-q { font-size: 17px; }
  .vh-faq__q { gap: 12px; }
  .vh-ans p { padding: 0 4px 20px; font-size: 16px; }

  .vh-final__wrap { padding: 24px 16px 64px; }
  .vh-final__band { padding: 56px 20px; border-radius: 24px; }
  .vh-ios__wrap { padding: 40px 16px; }
  .vh-ios__card { padding: 22px 20px; }
  .vh-ios__title { font-size: 22px; }
  .vh-ios__actions { width: 100%; }
}

/* The design's own rule: no motion at all when the visitor asks for none. */
@media (prefers-reduced-motion: reduce) {
  .vh *, .vh *::before, .vh *::after { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- keyframes --- */
/* Verbatim from the design, renamed vx- -> vh-. */
@keyframes vh-float{0%{transform:translateY(0)}100%{transform:translateY(-16px)}}
@keyframes vh-float-l{0%{transform:perspective(1400px) rotateY(24deg) rotateZ(-5deg) translateY(0)}100%{transform:perspective(1400px) rotateY(24deg) rotateZ(-5deg) translateY(-12px)}}
@keyframes vh-float-r{0%{transform:perspective(1400px) rotateY(-24deg) rotateZ(5deg) translateY(-10px)}100%{transform:perspective(1400px) rotateY(-24deg) rotateZ(5deg) translateY(4px)}}
@keyframes vh-tilt{0%{transform:perspective(1400px) rotateY(-14deg) rotateX(4deg) translateY(0)}100%{transform:perspective(1400px) rotateY(-8deg) rotateX(2deg) translateY(-12px)}}
@keyframes vh-tilt2{0%{transform:perspective(1400px) rotateY(14deg) rotateX(4deg) translateY(0)}100%{transform:perspective(1400px) rotateY(8deg) rotateX(2deg) translateY(-12px)}}
@keyframes vh-scroll{0%,16%{transform:translateY(0)}24%,40%{transform:translateY(-186px)}48%,64%{transform:translateY(-372px)}72%,88%{transform:translateY(-558px)}100%{transform:translateY(-744px)}}
@keyframes vh-spin{to{transform:rotate(360deg)}}
@keyframes vh-chip{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes vh-toast{0%,6%{opacity:0;transform:translateY(-36px) scale(.96)}14%,78%{opacity:1;transform:translateY(0) scale(1)}88%,100%{opacity:0;transform:translateY(-36px) scale(.96)}}
@keyframes vh-laser{0%{top:72px}100%{top:560px}}
@keyframes vh-ring{0%{box-shadow:0 0 0 0 #6366f1aa}70%{box-shadow:0 0 0 14px #6366f100}100%{box-shadow:0 0 0 0 #6366f100}}
@keyframes vh-marquee{to{transform:translateX(-50%)}}
@keyframes vh-wave{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
@keyframes vh-t1{0%,6%{clip-path:inset(0 100% 0 0)}20%,90%{clip-path:inset(0 0 0 0)}94%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes vh-t2{0%,24%{clip-path:inset(0 100% 0 0)}42%,90%{clip-path:inset(0 0 0 0)}94%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes vh-t3{0%,46%{clip-path:inset(0 100% 0 0)}52%,90%{clip-path:inset(0 0 0 0)}94%,100%{clip-path:inset(0 100% 0 0)}}
@keyframes vh-f1{0%,6%{opacity:0}8%,20%{opacity:1}24%,100%{opacity:0}}
@keyframes vh-f2{0%,24%{opacity:0}26%,42%{opacity:1}46%,100%{opacity:0}}
@keyframes vh-f3{0%,46%{opacity:0}48%,52%{opacity:1}56%,100%{opacity:0}}
@keyframes vh-saved{0%,58%{opacity:0;transform:scale(.6)}62%,86%{opacity:1;transform:scale(1)}90%,100%{opacity:0;transform:scale(.6)}}
@keyframes vh-rows{0%,4%{top:257px;opacity:0}8%,18%{top:257px;opacity:1}24%,34%{top:306px;opacity:1}40%,50%{top:355px;opacity:1}56%,66%{top:404px;opacity:1}72%,82%{top:453px;opacity:1}88%,100%{top:453px;opacity:0}}
@keyframes vh-import{0%,84%{box-shadow:0 0 0 0 #6366f100}90%{box-shadow:0 0 0 10px #6366f155}100%{box-shadow:0 0 0 0 #6366f100}}
@keyframes vh-fly{0%{opacity:0;transform:translate(-40px,60px) rotate(-14deg) scale(1)}8%{opacity:1}22%{opacity:1;transform:translate(150px,-10px) rotate(4deg) scale(.7)}28%,100%{opacity:0;transform:translate(190px,-20px) rotate(6deg) scale(.4)}}
@keyframes vh-steps{0%,25%{width:33%}26%,85%{width:66%}86%,100%{width:100%}}
@keyframes vh-set{0%,4%{top:293px;opacity:0}8%,18%{top:293px;opacity:1}24%,36%{top:334px;opacity:1}42%,54%{top:375px;opacity:1}60%,72%{top:415px;opacity:1}78%,90%{top:456px;opacity:1}96%,100%{top:456px;opacity:0}}
@keyframes vh-bell{0%,70%,100%{transform:rotate(0)}74%{transform:rotate(16deg)}78%{transform:rotate(-14deg)}82%{transform:rotate(10deg)}86%{transform:rotate(-6deg)}}
@keyframes vh-attn{0%,100%{box-shadow:0 0 0 2px #ef444400}50%{box-shadow:0 0 0 3px #ef4444aa}}
@keyframes vh-corner{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes vh-scanline{0%{top:14px;opacity:1}25%{top:142px}50%{top:14px}58%{top:78px;opacity:1}62%,100%{top:78px;opacity:0}}
@keyframes vh-detect{0%,56%{border-color:#38bdb2;transform:scale(1)}60%{border-color:#4ade80;transform:scale(1.08)}66%,94%{border-color:#4ade80;transform:scale(1)}100%{border-color:#38bdb2}}
@keyframes vh-result{0%,58%{opacity:0;transform:translateY(24px) scale(.92)}66%,92%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(12px) scale(.96)}}
@keyframes vh-optin{0%,100%{border-color:#ebe9f6;box-shadow:0 10px 30px #2b217012}12%,28%{border-color:#8f80ff;box-shadow:0 14px 34px #5b4fe026}40%{border-color:#ebe9f6;box-shadow:0 10px 30px #2b217012}}
@keyframes vh-plus{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.12)}}
@keyframes vh-fill{0%{transform:scaleX(0);opacity:1}33%{transform:scaleX(1);opacity:1}40%,100%{transform:scaleX(1);opacity:0}}
@keyframes vh-ring-t{0%{box-shadow:0 0 0 0 #19b1a8aa}70%{box-shadow:0 0 0 10px #19b1a800}100%{box-shadow:0 0 0 0 #19b1a800}}
@keyframes vh-cyc{0%,22%{opacity:1}25%,100%{opacity:0}}
@keyframes vh-cellpulse{0%,100%{box-shadow:0 0 0 0 #d9770600}50%{box-shadow:0 0 0 5px #d9770622}}
@keyframes vh-take{0%,8%{opacity:1;transform:translateY(0)}16%,80%{opacity:0;transform:translateY(-14px)}92%,100%{opacity:1;transform:translateY(0)}}
@keyframes vh-bellin{0%,40%{opacity:0;transform:scale(.6)}46%,80%{opacity:1;transform:scale(1)}88%,100%{opacity:0;transform:scale(.6)}}
@keyframes vh-chipin{0%{opacity:0;transform:translateY(8px)}8%,78%{opacity:1;transform:translateY(0)}90%,100%{opacity:0;transform:translateY(0)}}
@keyframes vh-chipbad{0%{opacity:0;transform:translateY(8px)}8%{opacity:1;transform:translateY(0)}12%{transform:translateX(-4px)}16%{transform:translateX(4px)}20%{transform:translateX(-3px)}24%,78%{opacity:1;transform:translateX(0)}90%,100%{opacity:0}}
@keyframes vh-match{0%{opacity:0;transform:translateX(14px)}6%,86%{opacity:1;transform:translateX(0)}94%,100%{opacity:0;transform:translateX(0)}}
@keyframes vh-r0{0%,33%{transform:scale(1);color:inherit}35%{transform:scale(1.06)}38%,100%{transform:scale(1)}}
@keyframes vh-k0{0%,33%{opacity:0;transform:scale(.3)}36%{opacity:1;transform:scale(1.2)}38%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes vh-v0{0%,33%{opacity:1}35%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes vh-r1{0%,38%{transform:scale(1);color:inherit}40%{transform:scale(1.06)}43%,100%{transform:scale(1)}}
@keyframes vh-k1{0%,38%{opacity:0;transform:scale(.3)}41%{opacity:1;transform:scale(1.2)}43%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes vh-v1{0%,38%{opacity:1}40%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes vh-r2{0%,43%{transform:scale(1);color:inherit}45%{transform:scale(1.06)}48%,100%{transform:scale(1)}}
@keyframes vh-k2{0%,43%{opacity:0;transform:scale(.3)}46%{opacity:1;transform:scale(1.2)}48%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes vh-v2{0%,43%{opacity:1}45%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes vh-r3{0%,48%{transform:scale(1);color:inherit}50%{transform:scale(1.06)}53%,100%{transform:scale(1)}}
@keyframes vh-k3{0%,48%{opacity:0;transform:scale(.3)}51%{opacity:1;transform:scale(1.2)}53%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes vh-v3{0%,48%{opacity:1}50%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes vh-r4{0%,53%{transform:scale(1);color:inherit}55%{transform:scale(1.06)}58%,100%{transform:scale(1)}}
@keyframes vh-k4{0%,53%{opacity:0;transform:scale(.3)}56%{opacity:1;transform:scale(1.2)}58%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes vh-v4{0%,53%{opacity:1}55%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes vh-r5{0%,58%{transform:scale(1);color:inherit}60%{transform:scale(1.06)}63%,100%{transform:scale(1)}}
@keyframes vh-k5{0%,58%{opacity:0;transform:scale(.3)}61%{opacity:1;transform:scale(1.2)}63%,92%{opacity:1;transform:scale(1)}97%,100%{opacity:0}}
@keyframes vh-v5{0%,58%{opacity:1}60%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes vh-bigfile{0%{opacity:0;transform:translate(-30px,40px) scale(.9) rotate(-4deg)}6%,20%{opacity:1;transform:translate(0,0) scale(1) rotate(-2deg)}28%{opacity:0;transform:translate(110px,-95px) scale(.55) rotate(0)}100%{opacity:0;transform:translate(110px,-95px) scale(.55)}}
@keyframes vh-slot{0%,25%{border-color:#e8e8ee;box-shadow:0 0 0 0 #6468ee00;transform:scale(1)}28%{border-color:#6468ee;box-shadow:0 0 0 3px #6468ee33;transform:scale(1.03)}31%,52%{border-color:#6468ee;box-shadow:0 0 0 3px #6468ee26;transform:scale(1)}60%,100%{border-color:#e8e8ee;box-shadow:0 0 0 0 #6468ee00;transform:scale(1)}}
@keyframes vh-press{0%,66%{transform:scale(1);opacity:1}68%{transform:scale(.94)}70%,100%{transform:scale(1)}}
@keyframes vh-done{0%,69%{opacity:0;transform:scale(.9)}72%,94%{opacity:1;transform:scale(1)}98%,100%{opacity:0}}
@keyframes vh-ring-b{0%{box-shadow:0 0 0 0 #2678b7aa}70%{box-shadow:0 0 0 10px #2678b700}100%{box-shadow:0 0 0 0 #2678b700}}
@keyframes vh-ring-i{0%{box-shadow:0 0 0 0 #3340c6aa}70%{box-shadow:0 0 0 10px #3340c600}100%{box-shadow:0 0 0 0 #3340c600}}
@keyframes vh-sw0{0%,3%{opacity:.12}5%,88%{opacity:1}94%,100%{opacity:.12}}
@keyframes vh-sw1{0%,8%{opacity:.12}10%,88%{opacity:1}94%,100%{opacity:.12}}
@keyframes vh-sw2{0%,21%{opacity:.12}23%,88%{opacity:1}94%,100%{opacity:.12}}
@keyframes vh-sw3{0%,26%{opacity:.12}28%,88%{opacity:1}94%,100%{opacity:.12}}
@keyframes vh-sw4{0%,31%{opacity:.12}33%,88%{opacity:1}94%,100%{opacity:.12}}
@keyframes vh-sw5{0%,36%{opacity:.12}38%,88%{opacity:1}94%,100%{opacity:.12}}
@keyframes vh-sw6{0%,43%{opacity:.12}45%,88%{opacity:1}94%,100%{opacity:.12}}
@keyframes vh-sw7{0%,47%{opacity:.12}49%,88%{opacity:1}94%,100%{opacity:.12}}
@keyframes vh-talk{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
@keyframes vh-voiceon{0%,2%{opacity:.35}4%,50%{opacity:1}56%,100%{opacity:.35}}
@keyframes vh-n0{0%,12%{opacity:1}14%,100%{opacity:0}}
@keyframes vh-n1{0%,12%{opacity:0}14%,24%{opacity:1}26%,100%{opacity:0}}
@keyframes vh-n2{0%,24%{opacity:0}26%,34%{opacity:1}36%,100%{opacity:0}}
@keyframes vh-n3{0%,34%{opacity:0}36%,94%{opacity:1}97%,100%{opacity:0}}
@keyframes vh-bar{0%,4%{width:100%;background:#2ec4b6}14%{width:75%;background:#2ec4b6}26%{width:56%;background:#f0a35e}36%,94%{width:35%;background:#f87171}100%{width:100%;background:#2ec4b6}}
@keyframes vh-lowtxt{0%,34%{opacity:0;color:#f87171}37%,94%{opacity:1;color:#fca5a5}97%,100%{opacity:0}}
@keyframes vh-nt1{0%,38%{opacity:0;transform:translateY(-24px) scale(.94)}42%,92%{opacity:1;transform:translateY(0) scale(1)}97%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes vh-nt2{0%,54%{opacity:0;transform:translateY(-24px) scale(.94)}58%,92%{opacity:1;transform:translateY(0) scale(1)}97%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes vh-nt3{0%,70%{opacity:0;transform:translateY(-24px) scale(.94)}74%,92%{opacity:1;transform:translateY(0) scale(1)}97%,100%{opacity:0;transform:translateY(-10px)}}
@keyframes vh-ntglow{0%,40%{box-shadow:0 0 0 0 #8f80ff00}44%{box-shadow:0 0 0 0 #8f80ffaa}56%{box-shadow:0 0 0 18px #8f80ff00}100%{box-shadow:0 0 0 0 #8f80ff00}}
@keyframes vh-buzz{0%,40%,50%,100%{transform:translateX(0) rotate(0)}41%{transform:translateX(-3px) rotate(-1deg)}42%{transform:translateX(3px) rotate(1deg)}43%{transform:translateX(-3px) rotate(-1deg)}44%{transform:translateX(3px) rotate(1deg)}45%{transform:translateX(-2px)}46%{transform:translateX(2px)}47%{transform:translateX(0)}}
@keyframes vh-wake{0%,40%{opacity:0}42%{opacity:.18}50%,100%{opacity:0}}
@keyframes vh-ln0{0%,30%{opacity:1}32%,100%{opacity:0}}
@keyframes vh-ln1{0%,30%{opacity:0}32%,62%{opacity:1}64%,100%{opacity:0}}
@keyframes vh-ln2{0%,62%{opacity:0}64%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes vh-addln{0%,28%{opacity:0;transform:scale(.8)}32%,42%{opacity:1;transform:scale(1)}48%,60%{opacity:0}64%,74%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(.8)}}
@keyframes vh-ship{0%,10%{width:20%}50%,90%{width:62%}100%{width:20%}}
@keyframes vh-hl{0%{opacity:0;transform:scale(.97)}3%,22%{opacity:1;transform:scale(1)}26%,100%{opacity:0;transform:scale(1)}}
@keyframes vh-hb{0%,100%{transform:scale(1)}3%{transform:scale(1.35)}6%,22%{transform:scale(1.1)}26%{transform:scale(1)}}
@keyframes vh-hc{0%{border-color:#ebe9f6;box-shadow:0 0 0 0 #4f46e500;transform:translateX(0)}3%,22%{border-color:#a5a0f5;box-shadow:0 14px 34px #4f46e526;transform:translateX(8px)}26%,100%{border-color:#ebe9f6;box-shadow:0 0 0 0 #4f46e500;transform:translateX(0)}}
@keyframes vh-hbar{0%{transform:scaleX(0);opacity:1}24%{transform:scaleX(1);opacity:1}26%,100%{transform:scaleX(1);opacity:0}}
@keyframes vh-c0{0%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes vh-c1{0%,30%{opacity:0}33%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes vh-c2{0%,63%{opacity:0}66%,97%{opacity:1}100%{opacity:0}}
@keyframes vh-d0{0%,30%{opacity:1}33%,100%{opacity:0}}
@keyframes vh-d1{0%,30%{opacity:0}33%,63%{opacity:1}66%,100%{opacity:0}}
@keyframes vh-d2{0%,63%{opacity:0}66%,97%{opacity:1}100%{opacity:0}}
@keyframes vh-box{0%{transform:translateX(0) translateY(0);opacity:0}10%{opacity:1}50%{transform:translateX(70px) translateY(-8px)}90%{opacity:1}100%{transform:translateX(150px) translateY(0);opacity:0}}
@keyframes vh-mv{0%{opacity:0;transform:translateX(-14px)}8%,85%{opacity:1;transform:translateX(0)}95%,100%{opacity:0}}
@keyframes vh-ph{0%,30%{background:#e6e8ff}33%,63%{background:#e3f6f1}66%,97%{background:#fdf1e6}100%{background:#e6e8ff}}
@keyframes vh-rep{0%{transform:scaleX(0)}20%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes vh-swap{0%,40%{transform:rotate(0)}55%,100%{transform:rotate(180deg)}}
@keyframes vh-delta{0%,40%{opacity:0;transform:translateY(6px)}50%{opacity:1;transform:translateY(0)}80%{opacity:1;transform:translateY(-6px)}100%{opacity:0;transform:translateY(-10px)}}
@keyframes vh-thumb0{0%,30%{border-color:#6468ee;box-shadow:0 0 0 2px #6468ee33}33%,100%{border-color:#e6e5ee;box-shadow:none}}
@keyframes vh-thumb1{0%,30%{border-color:#e6e5ee;box-shadow:none}33%,63%{border-color:#6468ee;box-shadow:0 0 0 2px #6468ee33}66%,100%{border-color:#e6e5ee;box-shadow:none}}
@keyframes vh-thumb2{0%,63%{border-color:#e6e5ee;box-shadow:none}66%,97%{border-color:#6468ee;box-shadow:0 0 0 2px #6468ee33}100%{border-color:#e6e5ee;box-shadow:none}}
@keyframes vh-shine{0%,60%{left:-40%}100%{left:130%}}
@keyframes vh-day0{0%,4%{background:#ffffff00;border-color:#cfcbe6}7%,88%{background:#1fae9f;border-color:#1fae9f}96%,100%{background:#ffffff00;border-color:#cfcbe6}}
@keyframes vh-day1{0%,12%{background:#ffffff00;border-color:#cfcbe6}15%,88%{background:#1fae9f;border-color:#1fae9f}96%,100%{background:#ffffff00;border-color:#cfcbe6}}
@keyframes vh-day2{0%,20%{background:#ffffff00;border-color:#cfcbe6}23%,88%{background:#1fae9f;border-color:#1fae9f}96%,100%{background:#ffffff00;border-color:#cfcbe6}}
@keyframes vh-day3{0%,28%{background:#ffffff00;border-color:#cfcbe6}31%,88%{background:#1fae9f;border-color:#1fae9f}96%,100%{background:#ffffff00;border-color:#cfcbe6}}
@keyframes vh-day4{0%,36%{background:#ffffff00;border-color:#cfcbe6}39%,88%{background:#1fae9f;border-color:#1fae9f}96%,100%{background:#ffffff00;border-color:#cfcbe6}}
@keyframes vh-day5{0%,44%{background:#ffffff00;border-color:#cfcbe6}47%,88%{background:#1fae9f;border-color:#1fae9f}96%,100%{background:#ffffff00;border-color:#cfcbe6}}
@keyframes vh-day6{0%,52%{background:#ffffff00;border-color:#cfcbe6}55%,88%{background:#1fae9f;border-color:#1fae9f}96%,100%{background:#ffffff00;border-color:#cfcbe6}}
@keyframes vh-btnshine{0%,55%{left:-60%}100%{left:130%}}
@keyframes vh-perkin{0%,100%{background:#ffffff00}6%,18%{background:#ffffffcc;box-shadow:0 8px 20px #b7791f14}26%{background:#ffffff00;box-shadow:none}}
@keyframes vh-trial{0%,8%{width:0%}70%,90%{width:100%}100%{width:0%}}
@keyframes vh-trialdot{0%,8%{left:0%}70%,90%{left:100%}100%{left:0%}}
@keyframes vh-aur1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(120px,60px) scale(1.15)}}
@keyframes vh-aur2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-140px,90px) scale(1.1)}}
@keyframes vh-aur3{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(-100px,-70px) scale(.95)}}
@keyframes vh-bub1{0%{opacity:0;transform:translateY(8px) scale(.9)}10%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vh-bub2{0%,25%{opacity:0;transform:translateY(8px) scale(.9)}35%,90%{opacity:1;transform:none}100%{opacity:0}}
@keyframes vh-dot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-4px);opacity:1}}
@keyframes vh-glow{0%,100%{box-shadow:0 0 0 0 #2ec4b600}50%{box-shadow:0 0 0 6px #2ec4b61f}}
@keyframes vh-sweep{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes vh-flow{to{background-position:200% 0}}