/* Motion layer. Every moved piece uses the individual transform properties
   (translate / rotate / scale) driven by custom properties, so it composes with
   the `transform` the base stylesheet already sets on the same elements. */
.fx-progress {
  position: fixed; left: 0; top: 0; z-index: 9999; height: 3px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
  background: linear-gradient(90deg, #0092D5, #3E7DD0 55%, #B53ED0);
  box-shadow: 0 0 12px rgba(0,146,213,.6);
}
.fx-w, .fx-c {
  display: inline-block; white-space: pre;
  translate: var(--fx-x, 0) var(--fx-y, 0);
  rotate: var(--fx-r, 0deg);
  scale: var(--fx-s, 1);
  opacity: var(--fx-o, 1);
}
.fx-w { white-space: normal; transform: skewY(var(--fx-skew, 0deg)); }
.fx-blur { filter: blur(var(--fx-b, 0px)); }
.fx-t {
  translate: var(--fx-x, 0) var(--fx-y, 0);
  rotate: var(--fx-r, 0deg);
  scale: var(--fx-s, 1);
  filter: opacity(var(--fx-o, 1));
}
/* gradient text split into pieces: each piece carries the parent's gradient */
.fx-gradpiece { -webkit-background-clip: text; background-clip: text; color: transparent; }
/* cursor glow on cards */
.fx-rel { position: relative; }
.fx-spot-host { isolation: isolate; }
.fx-spot {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(0,146,213,.18), rgba(181,62,208,.08) 45%, transparent 70%);
  mix-blend-mode: screen;
}
.fx-spot-host:hover > .fx-spot { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .fx-progress { display: none; }
}

/* Call-to-action buttons: a real button shape, not a text link. Declared here as well
   as in vertical.css so the shape never depends on one stylesheet alone. */
a.vf-cta-btn, a.hdr-cta {
  isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.22);
  background: linear-gradient(100deg, #0092D5 0%, #3E7DD0 48%, #B53ED0 100%);
  color: #fff !important; text-decoration: none !important;
  font-family: 'Lexend', system-ui, sans-serif; font-weight: 500; letter-spacing: .01em; line-height: 1;
  box-shadow: 0 10px 30px -6px rgba(0,146,213,.55), 0 4px 18px -4px rgba(181,62,208,.45), inset 0 1px 0 rgba(255,255,255,.28);
  transition: translate .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease, filter .25s ease;
  -webkit-tap-highlight-color: transparent;
}
a.vf-cta-btn { position: relative; min-height: 58px; padding: 0 34px 0 38px; font-size: 18px; }
a.hdr-cta { min-height: 40px; padding: 0 20px; font-size: 14px; }
/* light sweep across the face */
a.vf-cta-btn::before, a.hdr-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.45) 48%, transparent 66%);
  translate: -120% 0; animation: fx-shine 4.2s ease-in-out 1.2s infinite;
}
/* arrow in its own round chip */
a.vf-cta-btn > span[aria-hidden] {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.2); font-size: 17px; transition: translate .25s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
a.vf-cta-btn:hover, a.hdr-cta:hover {
  translate: 0 -3px; filter: saturate(1.15) brightness(1.06);
  box-shadow: 0 16px 40px -6px rgba(0,146,213,.65), 0 8px 26px -4px rgba(181,62,208,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
a.vf-cta-btn:hover > span[aria-hidden] { translate: 4px 0; background: rgba(255,255,255,.32); }
a.vf-cta-btn:active, a.hdr-cta:active { translate: 0 0; }
a.vf-cta-btn:focus-visible, a.hdr-cta:focus-visible { outline: 3px solid #8FD3F2; outline-offset: 4px; }
/* soft breathing halo behind the large buttons */
.vf-cta { position: relative; }
.vf-cta a.vf-cta-btn { animation: fx-halo 3.2s ease-in-out infinite; }
@keyframes fx-shine { 0%, 55% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }
@keyframes fx-halo {
  0%, 100% { box-shadow: 0 10px 30px -6px rgba(0,146,213,.55), 0 4px 18px -4px rgba(181,62,208,.45), inset 0 1px 0 rgba(255,255,255,.28); }
  50% { box-shadow: 0 14px 42px -4px rgba(0,146,213,.75), 0 6px 28px -2px rgba(181,62,208,.6), inset 0 1px 0 rgba(255,255,255,.28); }
}
.vf-cta a.vf-cta-btn:hover { animation: none; }
@media (max-width: 420px) { a.vf-cta-btn { min-height: 54px; padding: 0 24px 0 28px; font-size: 16px; } }
@media (prefers-reduced-motion: reduce) {
  a.vf-cta-btn::before, a.hdr-cta::before, .vf-cta a.vf-cta-btn { animation: none; }
}

@media (max-width: 900px) { a.hdr-cta { display: none; } }