/* ==========================================================================
   DataFeedWatch Homepage — Animation & Layout CSS
   All keyframes, utility classes, hover effects and reduced-motion overrides.
   Ported from the static handoff (page/index.html).
   ========================================================================== */

/* ---------- homepage global ---------- */
#main-content {
  overflow-x: clip;
}
#main-content *,
#main-content *::before,
#main-content *::after {
  box-sizing: border-box;
}
#main-content img {
  max-width: 100%;
  height: auto;
}

/* ---------- base utilities ---------- */
.dfw-skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: #ffffff;
  color: #010025;
  font-weight: 700;
  text-decoration: none;
}
.dfw-skip:focus {
  left: 16px;
}

.dfw-navlinks {
  display: flex;
}
@media (max-width: 900px) {
  .dfw-navlinks {
    display: none;
  }
}

@keyframes dfwPop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.dfw-pop {
  animation: dfwPop 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* ---------- particle ribbons ---------- */
@keyframes dfwDrift {
  to {
    background-position:
      192px 0,
      -132px 8px,
      0 0;
  }
}
.dfw-ribbon {
  position: absolute;
  top: -25%;
  right: -20%;
  left: 30%;
  height: 140%;
  transform: skewY(-14deg);
  transform-origin: top left;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(150, 205, 255, 0.95) 0 1.3px, transparent 2px),
    radial-gradient(
      ellipse 50% 22% at 55% 55%,
      rgba(29, 86, 247, 0.75),
      rgba(29, 86, 247, 0) 70%
    );
  background-size:
    16px 16px,
    100% 100%;
  background-position:
    0 0,
    0 0;
  -webkit-mask-image: radial-gradient(
    ellipse 58% 26% at 55% 55%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 50%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 58% 26% at 55% 55%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 50%,
    transparent 78%
  );
}
.dfw-ribbon-cta {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -120px;
  height: 320px;
  transform: skewY(-5deg);
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(150, 205, 255, 0.9) 0 1.3px, transparent 2px),
    radial-gradient(circle, rgba(61, 139, 255, 0.75) 0 1px, transparent 1.7px),
    radial-gradient(
      ellipse 60% 30% at 70% 50%,
      rgba(29, 86, 247, 0.7),
      rgba(29, 86, 247, 0) 70%
    );
  background-size:
    16px 16px,
    11px 11px,
    100% 100%;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 30% at 70% 50%,
    #000 0%,
    transparent 80%
  );
  mask-image: radial-gradient(
    ellipse 60% 30% at 70% 50%,
    #000 0%,
    transparent 80%
  );
  animation: dfwDrift 40s linear infinite;
}
.dfw-cta-card {
  background:
    linear-gradient(
      90deg,
      rgba(2, 2, 2, 0.95) 0%,
      rgba(2, 2, 2, 0.75) 40%,
      rgba(2, 2, 2, 0) 75%
    ),
    #020202
      url('https://www.datafeedwatch.com/hubfs/homepage/cta-particles.jpg')
      center 80% / cover no-repeat;
}

/* ---------- guides ---------- */
.dfw-guides {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(1240px, 100%);
  transform: translateX(-50%);
  pointer-events: none;
  background-image: linear-gradient(
    to right,
    rgba(11, 18, 56, 0.09) 1px,
    transparent 1px
  );
  background-size: 25% 100%;
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 5px,
    transparent 5px 10px
  );
  mask-image: repeating-linear-gradient(
    to bottom,
    #000 0 5px,
    transparent 5px 10px
  );
}
.dfw-guides-dark {
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
}

/* ---------- marquees ---------- */
.dfw-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}
.dfw-track-scroll {
  display: flex;
  animation: marquee 300s linear infinite;
}
.dfw-track-scroll--reverse {
  animation-direction: reverse;
}
.dfw-track-img {
  display: block;
  height: 60px;
  width: auto;
  flex-shrink: 0;
}

.dfw-marquee {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 10%,
    #000 90%,
    transparent
  );
}
.dfw-marquee-track {
  animation: dfwMarq 45s linear infinite;
}
@media (max-width: 767px) {
  .dfw-trust-logos {
    --dfw-logo-scale: 0.5;
    --dfw-logo-spacing: 28px;
    --dfw-trust-gap: 28px;
  }
}
@keyframes dfwMarq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ---------- float & reveal ---------- */
.dfw-float {
  display: block;
}
.dfw-reveal {
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dfw-panel:hover .dfw-reveal {
  opacity: 1;
  transform: scale(1);
}
.dfw-lift {
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dfw-panel:hover .dfw-lift {
  transform: translateY(-6px);
}

/* ---------- testimonial cards ---------- */
.dfw-tcard {
  transition:
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 0.7s ease;
}
.dfw-tcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -24px rgba(29, 86, 247, 0.35) !important;
  border-color: #bfd3ff !important;
}
.dfw-tdots {
  background-image: radial-gradient(
    circle,
    rgba(150, 205, 255, 0.55) 0 1px,
    transparent 1.6px
  );
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(
    ellipse 70% 45% at 100% 100%,
    #000,
    transparent 75%
  );
  mask-image: radial-gradient(
    ellipse 70% 45% at 100% 100%,
    #000,
    transparent 75%
  );
}

/* ---------- case study hover ---------- */
.dfw-story .dfw-story-art {
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.dfw-story:hover .dfw-story-art {
  transform: scale(1.04);
}

/* ---------- axis (desktop only) ---------- */
.dfw-axis {
  display: flex;
}
@media (max-width: 900px) {
  .dfw-axis {
    display: none;
  }
}
@media (max-width: 900px) {
  .dfw-float {
    display: none;
  }
  .dfw-ribbon {
    top: auto;
    bottom: -80px;
    left: -20%;
    right: -20%;
    height: 380px;
  }
}

/* ---------- motion layer ---------- */
@keyframes dfwRise {
  from {
    opacity: 0;
    translate: 0 28px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes dfwBob {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -10px;
  }
}
@keyframes dfwBar {
  from {
    scale: 0 1;
  }
  to {
    width: 100% !important;
  }
}
.dfw-float {
  animation: dfwBob 4.8s ease-in-out -1.5s infinite alternate;
}
@supports (animation-timeline: view()) {
  section:not(#top) h2,
  .dfw-tcard,
  .dfw-panel,
  .dfw-motion {
    animation: dfwRise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 38%;
  }
  .dfw-bar {
    transform-origin: left center;
    animation: dfwBar linear both;
    animation-timeline: view();
    animation-range: entry 30% cover 45%;
  }
}
a[style*='border-radius: 999px'] {
  transition:
    translate 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 0.35s ease;
}
a[style*='border-radius: 999px']:hover {
  translate: 0 -2px;
  filter: brightness(1.06);
}

/* ---------- pause control ---------- */
[data-motion='paused'] *,
[data-motion='paused'] *::before,
[data-motion='paused'] *::after {
  animation-play-state: paused !important;
}
.dfw-marquee:is(:hover, :focus-within) .dfw-marquee-track {
  animation-play-state: paused;
}
.dfw-track:is(:hover, :focus-within) .dfw-track-scroll {
  animation-play-state: paused;
}
.dfw-motion-btn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
}

/* ---------- focus styles for inline-styled pill buttons ---------- */
#main-content a[style*='border-radius']:focus-visible {
  outline: 3px solid #1d56f7;
  outline-offset: 3px;
}

/* ---------- reduced-motion: catch-all for inline animations ---------- */
@media (prefers-reduced-motion: reduce) {
  #main-content *,
  #main-content *::before,
  #main-content *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ===================================================================
   HERO SYNC GRAPHIC (10.5s loop)
   =================================================================== */
.ha-spin {
  animation: ha_spin 0.8s linear infinite;
}
.ha-hubring {
  animation: ha_hub 10.5s ease-out infinite both;
}
@keyframes ha_ln0 {
  0%,
  30.48% {
    stroke-dashoffset: 1;
  }
  35.24%,
  85.0% {
    stroke-dashoffset: 0;
  }
  86.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes ha_pu0 {
  0%,
  30.48% {
    offset-distance: 0%;
    opacity: 0;
  }
  30.95% {
    opacity: 1;
  }
  36.19% {
    offset-distance: 100%;
    opacity: 1;
  }
  37.62%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@keyframes ha_sy0 {
  0%,
  35.24% {
    opacity: 0;
  }
  36.0%,
  48.57% {
    opacity: 1;
  }
  49.33%,
  100% {
    opacity: 0;
  }
}
@keyframes ha_ok0 {
  0%,
  48.57% {
    opacity: 0;
    scale: 0.6;
  }
  49.71% {
    opacity: 1;
    scale: 1.15;
  }
  51.43%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.5%,
  100% {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes ha_tp0 {
  0%,
  48.57% {
    scale: 1;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  50.48% {
    scale: 1.03;
    box-shadow:
      0 0 0 3px rgba(34, 197, 94, 0.55),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  54.29%,
  85.0% {
    scale: 1;
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  86.5%,
  100% {
    scale: 1;
  }
}
@keyframes ha_ln1 {
  0%,
  31.62% {
    stroke-dashoffset: 1;
  }
  36.38%,
  85.0% {
    stroke-dashoffset: 0;
  }
  86.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes ha_pu1 {
  0%,
  31.62% {
    offset-distance: 0%;
    opacity: 0;
  }
  32.1% {
    opacity: 1;
  }
  37.33% {
    offset-distance: 100%;
    opacity: 1;
  }
  38.76%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@keyframes ha_sy1 {
  0%,
  36.38% {
    opacity: 0;
  }
  37.14%,
  49.71% {
    opacity: 1;
  }
  50.48%,
  100% {
    opacity: 0;
  }
}
@keyframes ha_ok1 {
  0%,
  49.71% {
    opacity: 0;
    scale: 0.6;
  }
  50.86% {
    opacity: 1;
    scale: 1.15;
  }
  52.57%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.5%,
  100% {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes ha_tp1 {
  0%,
  49.71% {
    scale: 1;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  51.62% {
    scale: 1.03;
    box-shadow:
      0 0 0 3px rgba(34, 197, 94, 0.55),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  55.43%,
  85.0% {
    scale: 1;
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  86.5%,
  100% {
    scale: 1;
  }
}
@keyframes ha_ln2 {
  0%,
  32.76% {
    stroke-dashoffset: 1;
  }
  37.52%,
  85.0% {
    stroke-dashoffset: 0;
  }
  86.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes ha_pu2 {
  0%,
  32.76% {
    offset-distance: 0%;
    opacity: 0;
  }
  33.24% {
    opacity: 1;
  }
  38.48% {
    offset-distance: 100%;
    opacity: 1;
  }
  39.9%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@keyframes ha_sy2 {
  0%,
  37.52% {
    opacity: 0;
  }
  38.29%,
  50.86% {
    opacity: 1;
  }
  51.62%,
  100% {
    opacity: 0;
  }
}
@keyframes ha_ok2 {
  0%,
  50.86% {
    opacity: 0;
    scale: 0.6;
  }
  52.0% {
    opacity: 1;
    scale: 1.15;
  }
  53.71%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.5%,
  100% {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes ha_tp2 {
  0%,
  50.86% {
    scale: 1;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  52.76% {
    scale: 1.03;
    box-shadow:
      0 0 0 3px rgba(34, 197, 94, 0.55),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  56.57%,
  85.0% {
    scale: 1;
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  86.5%,
  100% {
    scale: 1;
  }
}
@keyframes ha_ln3 {
  0%,
  33.9% {
    stroke-dashoffset: 1;
  }
  38.67%,
  85.0% {
    stroke-dashoffset: 0;
  }
  86.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes ha_pu3 {
  0%,
  33.9% {
    offset-distance: 0%;
    opacity: 0;
  }
  34.38% {
    opacity: 1;
  }
  39.62% {
    offset-distance: 100%;
    opacity: 1;
  }
  41.05%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@keyframes ha_sy3 {
  0%,
  38.67% {
    opacity: 0;
  }
  39.43%,
  52.0% {
    opacity: 1;
  }
  52.76%,
  100% {
    opacity: 0;
  }
}
@keyframes ha_ok3 {
  0%,
  52.0% {
    opacity: 0;
    scale: 0.6;
  }
  53.14% {
    opacity: 1;
    scale: 1.15;
  }
  54.86%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.5%,
  100% {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes ha_tp3 {
  0%,
  52.0% {
    scale: 1;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  53.9% {
    scale: 1.03;
    box-shadow:
      0 0 0 3px rgba(34, 197, 94, 0.55),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  57.71%,
  85.0% {
    scale: 1;
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  86.5%,
  100% {
    scale: 1;
  }
}
@keyframes ha_ln4 {
  0%,
  35.05% {
    stroke-dashoffset: 1;
  }
  39.81%,
  85.0% {
    stroke-dashoffset: 0;
  }
  86.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes ha_pu4 {
  0%,
  35.05% {
    offset-distance: 0%;
    opacity: 0;
  }
  35.52% {
    opacity: 1;
  }
  40.76% {
    offset-distance: 100%;
    opacity: 1;
  }
  42.19%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}
@keyframes ha_sy4 {
  0%,
  39.81% {
    opacity: 0;
  }
  40.57%,
  53.14% {
    opacity: 1;
  }
  53.9%,
  100% {
    opacity: 0;
  }
}
@keyframes ha_ok4 {
  0%,
  53.14% {
    opacity: 0;
    scale: 0.6;
  }
  54.29% {
    opacity: 1;
    scale: 1.15;
  }
  56.0%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.5%,
  100% {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes ha_tp4 {
  0%,
  53.14% {
    scale: 1;
    box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  55.05% {
    scale: 1.03;
    box-shadow:
      0 0 0 3px rgba(34, 197, 94, 0.55),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  58.86%,
  85.0% {
    scale: 1;
    box-shadow:
      0 0 0 0 rgba(34, 197, 94, 0),
      0 18px 40px -20px rgba(0, 0, 0, 0.6);
  }
  86.5%,
  100% {
    scale: 1;
  }
}
@keyframes ha_btn {
  0%,
  8.1% {
    scale: 1;
    filter: brightness(1);
  }
  9.24% {
    scale: 0.94;
    filter: brightness(1.25);
  }
  10.95%,
  85.0% {
    scale: 1;
    filter: brightness(1.1);
  }
  86.5%,
  100% {
    scale: 1;
    filter: brightness(1);
  }
}
@keyframes ha_tSweep {
  0%,
  14.29% {
    opacity: 0;
    translate: -120% 0;
  }
  14.76% {
    opacity: 1;
    translate: -120% 0;
  }
  20.48% {
    opacity: 1;
    translate: 220% 0;
  }
  20.95%,
  100% {
    opacity: 0;
    translate: 220% 0;
  }
}
@keyframes ha_oldTitle {
  0%,
  17.14% {
    opacity: 1;
    translate: 0 0;
  }
  19.52%,
  85.0% {
    opacity: 0;
    translate: 0 -10px;
  }
  86.5%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes ha_newTitle {
  0%,
  18.1% {
    opacity: 0;
    translate: 0 10px;
  }
  20.95%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.5%,
  100% {
    opacity: 0;
    translate: 0 10px;
  }
}
@keyframes ha_oldBig {
  0%,
  23.81% {
    opacity: 1;
    translate: 0 0;
  }
  26.19%,
  85.0% {
    opacity: 0;
    translate: 0 -10px;
  }
  86.5%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes ha_strike {
  0%,
  24.29% {
    opacity: 0;
  }
  26.67%,
  85.0% {
    opacity: 1;
  }
  86.5%,
  100% {
    opacity: 0;
  }
}
@keyframes ha_newBig {
  0%,
  24.76% {
    opacity: 0;
    scale: 0.85;
    translate: 0 10px;
  }
  27.62% {
    opacity: 1;
    scale: 1.06;
    translate: 0 0;
  }
  29.52%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.5%,
  100% {
    opacity: 0;
    scale: 0.85;
    translate: 0 10px;
  }
}
@keyframes ha_glow {
  0%,
  26.67% {
    box-shadow:
      0 0 0 2px #3b5bff,
      0 0 30px rgba(59, 91, 255, 0.45);
  }
  29.05% {
    box-shadow:
      0 0 0 2px #6fa8ff,
      0 0 60px rgba(111, 168, 255, 0.9);
  }
  34.29%,
  100% {
    box-shadow:
      0 0 0 2px #3b5bff,
      0 0 30px rgba(59, 91, 255, 0.45);
  }
}
@keyframes ha_spin {
  to {
    rotate: 360deg;
  }
}
@keyframes ha_hub {
  0%,
  29.52% {
    r: 7;
    opacity: 0;
  }
  30.0% {
    r: 7;
    opacity: 1;
  }
  35.71%,
  100% {
    r: 26;
    opacity: 0;
  }
}
@keyframes ha_star {
  0%,
  100% {
    scale: 1;
    opacity: 0.85;
  }
  50% {
    scale: 1.25;
    opacity: 1;
  }
}

.ha-wrap {
  width: 600px;
  height: 372px;
}
.ha-wrap .ha-stage {
  transform: scale(0.6);
}
@media (max-width: 1180px) {
  .ha-wrap {
    width: 500px;
    height: 310px;
  }
  .ha-wrap .ha-stage {
    transform: scale(0.5);
  }
}
@media (max-width: 640px) {
  .ha-wrap {
    width: 340px;
    height: 211px;
  }
  .ha-wrap .ha-stage {
    transform: scale(0.34);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ha-stage * {
    animation: none !important;
  }
}

/* ===================================================================
   AI RECOMMENDATION GRAPHIC (11s loop)
   =================================================================== */
@keyframes aiIn1 {
  0%,
  3% {
    opacity: 0;
    translate: 0 14px;
  }
  9%,
  86% {
    opacity: 1;
    translate: 0 0;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes aiIn2 {
  0%,
  14% {
    opacity: 0;
    translate: 0 14px;
  }
  20%,
  86% {
    opacity: 1;
    translate: 0 0;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes aiIn3 {
  0%,
  23% {
    opacity: 0;
    translate: 0 14px;
  }
  29%,
  86% {
    opacity: 1;
    translate: 0 0;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes aiIn4 {
  0%,
  30% {
    opacity: 0;
    translate: 0 14px;
  }
  36%,
  86% {
    opacity: 1;
    translate: 0 0;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes aiIn5 {
  0%,
  38% {
    opacity: 0;
    translate: 0 14px;
  }
  43%,
  86% {
    opacity: 1;
    translate: 0 0;
  }
  90%,
  100% {
    opacity: 0;
  }
}
@keyframes aiPop6 {
  0%,
  46% {
    opacity: 0;
    scale: 0.9;
  }
  52%,
  86% {
    opacity: 1;
    scale: 1;
  }
  90%,
  100% {
    opacity: 0;
    scale: 0.9;
  }
}
.dfw-ai1 {
  animation: aiIn1 11s ease-in-out infinite both !important;
  animation-timeline: auto !important;
  animation-range: normal !important;
}
.dfw-ai2 {
  animation: aiIn2 11s ease-in-out infinite both !important;
  animation-timeline: auto !important;
  animation-range: normal !important;
}
.dfw-ai3 {
  animation: aiIn3 11s ease-in-out infinite both !important;
  animation-timeline: auto !important;
  animation-range: normal !important;
}
.dfw-ai4 {
  animation: aiIn4 11s ease-in-out infinite both !important;
  animation-timeline: auto !important;
  animation-range: normal !important;
}
.dfw-ai5 {
  animation: aiIn5 11s ease-in-out infinite both !important;
  animation-timeline: auto !important;
  animation-range: normal !important;
}
.dfw-ai6 {
  animation: aiPop6 11s ease-in-out infinite both !important;
  animation-timeline: auto !important;
  animation-range: normal !important;
}

/* stripe-style wave BG */
.dfw-wave {
  position: absolute;
  top: 8%;
  left: 30%;
  right: -12%;
  height: 95%;
  pointer-events: none;
  transform: skewY(-9deg);
  filter: blur(46px);
  opacity: 0.6;
  mix-blend-mode: screen;
  background:
    radial-gradient(
      38% 55% at 25% 55%,
      rgba(29, 86, 247, 0.95),
      rgba(29, 86, 247, 0) 70%
    ),
    radial-gradient(
      32% 50% at 60% 40%,
      rgba(61, 139, 255, 0.85),
      rgba(61, 139, 255, 0) 70%
    ),
    radial-gradient(
      28% 45% at 85% 65%,
      rgba(111, 195, 255, 0.7),
      rgba(111, 195, 255, 0) 70%
    ),
    radial-gradient(
      30% 45% at 45% 80%,
      rgba(10, 42, 158, 0.9),
      rgba(10, 42, 158, 0) 70%
    );
  background-size:
    140% 120%,
    160% 130%,
    150% 140%,
    170% 120%;
  animation: dfwWave 16s ease-in-out infinite alternate;
}
@keyframes dfwWave {
  0% {
    background-position:
      0% 40%,
      100% 60%,
      40% 0%,
      20% 100%;
  }
  50% {
    background-position:
      60% 70%,
      30% 20%,
      90% 60%,
      70% 30%;
  }
  100% {
    background-position:
      100% 30%,
      0% 80%,
      10% 90%,
      90% 60%;
  }
}

/* scroll-timeline progressive enhancement */
@supports (animation-timeline: view()) {
  .dfw-aimock {
    view-timeline-name: --aimock;
  }
  .dfw-ai1,
  .dfw-ai2,
  .dfw-ai3,
  .dfw-ai4,
  .dfw-ai5 {
    animation: dfwAiIn linear both;
    animation-timeline: --aimock;
  }
  .dfw-ai1 {
    animation-range: entry 25% entry 50%;
  }
  .dfw-ai2 {
    animation-range: entry 45% entry 70%;
  }
  .dfw-ai3 {
    animation-range: entry 60% entry 85%;
  }
  .dfw-ai4 {
    animation-range: entry 72% entry 97%;
  }
  .dfw-ai5 {
    animation-range: entry 85% cover 35%;
  }
  .dfw-ai6 {
    animation:
      dfwBob 4.8s ease-in-out -1.5s infinite alternate,
      dfwAiPop linear both;
    animation-timeline: auto, --aimock;
    animation-range:
      normal,
      entry 95% cover 42%;
  }
}
@keyframes dfwAiIn {
  from {
    opacity: 0;
    translate: 0 16px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes dfwAiPop {
  from {
    opacity: 0;
    scale: 0.9;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dfw-wave,
  .dfw-ai1,
  .dfw-ai2,
  .dfw-ai3,
  .dfw-ai4,
  .dfw-ai5,
  .dfw-ai6 {
    animation: none !important;
  }
}

/* ===================================================================
   STEP 1: CLEAN DATA GRAPHIC (v1 keyframes, 12s loop)
   =================================================================== */
@keyframes v1m0 {
  0%,
  10.0% {
    opacity: 1;
    translate: 0 0;
  }
  12.92%,
  85.0% {
    opacity: 0;
    translate: 0 -6px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes v1o0 {
  0%,
  10.83% {
    opacity: 0;
    translate: 0 6px;
  }
  14.58%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes v1f0 {
  0%,
  10.0% {
    background: rgba(34, 197, 94, 0);
  }
  11.67% {
    background: rgba(34, 197, 94, 0.14);
  }
  17.5%,
  100% {
    background: rgba(34, 197, 94, 0);
  }
}
@keyframes v1m1 {
  0%,
  18.33% {
    opacity: 1;
    translate: 0 0;
  }
  21.25%,
  85.0% {
    opacity: 0;
    translate: 0 -6px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes v1o1 {
  0%,
  19.17% {
    opacity: 0;
    translate: 0 6px;
  }
  22.92%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes v1f1 {
  0%,
  18.33% {
    background: rgba(34, 197, 94, 0);
  }
  20.0% {
    background: rgba(34, 197, 94, 0.14);
  }
  25.83%,
  100% {
    background: rgba(34, 197, 94, 0);
  }
}
@keyframes v1m2 {
  0%,
  26.67% {
    opacity: 1;
    translate: 0 0;
  }
  29.58%,
  85.0% {
    opacity: 0;
    translate: 0 -6px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes v1o2 {
  0%,
  27.5% {
    opacity: 0;
    translate: 0 6px;
  }
  31.25%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes v1f2 {
  0%,
  26.67% {
    background: rgba(34, 197, 94, 0);
  }
  28.33% {
    background: rgba(34, 197, 94, 0.14);
  }
  34.17%,
  100% {
    background: rgba(34, 197, 94, 0);
  }
}
@keyframes v1m3 {
  0%,
  35.0% {
    opacity: 1;
    translate: 0 0;
  }
  37.92%,
  85.0% {
    opacity: 0;
    translate: 0 -6px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes v1o3 {
  0%,
  35.83% {
    opacity: 0;
    translate: 0 6px;
  }
  39.58%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 6px;
  }
}
@keyframes v1f3 {
  0%,
  35.0% {
    background: rgba(34, 197, 94, 0);
  }
  36.67% {
    background: rgba(34, 197, 94, 0.14);
  }
  42.5%,
  100% {
    background: rgba(34, 197, 94, 0);
  }
}
@keyframes v1c1 {
  0%,
  10.83% {
    opacity: 0;
  }
  12.5%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes v1c2 {
  0%,
  19.17% {
    opacity: 0;
  }
  20.83%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes v1c3 {
  0%,
  27.5% {
    opacity: 0;
  }
  29.17%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes v1c4 {
  0%,
  35.83% {
    opacity: 0;
  }
  37.5%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes v1chipA {
  0%,
  41.67% {
    opacity: 1;
  }
  43.33%,
  85.0% {
    opacity: 0;
  }
  86.2%,
  100% {
    opacity: 1;
  }
}
@keyframes v1chipB {
  0%,
  42.08% {
    opacity: 0;
    scale: 0.7;
  }
  43.58% {
    opacity: 1;
    scale: 1.12;
  }
  45.42%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.2%,
  100% {
    opacity: 0;
    scale: 0.7;
  }
}
@keyframes v1lift {
  0%,
  5.0% {
    translate: 0 0;
  }
  9.17%,
  85.0% {
    translate: 0 -4px;
  }
  86.2%,
  100% {
    translate: 0 0;
  }
}

/* ===================================================================
   STEP 2: BETTER ADS GRAPHIC (v2 keyframes, 12s loop)
   =================================================================== */
@keyframes v2l0 {
  0%,
  10.83% {
    opacity: 0;
    translate: 0 -14px;
    scale: 0.9;
  }
  12.92% {
    opacity: 1;
    translate: 0 2px;
    scale: 1.04;
  }
  14.17%,
  85.0% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 -14px;
    scale: 0.9;
  }
}
@keyframes v2l1 {
  0%,
  15.0% {
    opacity: 0;
    translate: 0 -14px;
    scale: 0.9;
  }
  17.08% {
    opacity: 1;
    translate: 0 2px;
    scale: 1.04;
  }
  18.33%,
  85.0% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 -14px;
    scale: 0.9;
  }
}
@keyframes v2l2 {
  0%,
  19.17% {
    opacity: 0;
    translate: 0 -14px;
    scale: 0.9;
  }
  21.25% {
    opacity: 1;
    translate: 0 2px;
    scale: 1.04;
  }
  22.5%,
  85.0% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 -14px;
    scale: 0.9;
  }
}
@keyframes v2dim {
  0%,
  26.67% {
    opacity: 1;
    filter: grayscale(0);
  }
  30.0%,
  85.0% {
    opacity: 0.45;
    filter: grayscale(1);
  }
  86.2%,
  100% {
    opacity: 1;
    filter: grayscale(0);
  }
}
@keyframes v2stamp {
  0%,
  28.33% {
    opacity: 0;
    scale: 1.6;
  }
  30.0% {
    opacity: 1;
    scale: 0.95;
  }
  31.25%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.2%,
  100% {
    opacity: 0;
    scale: 1.6;
  }
}
@keyframes v2rA {
  0%,
  35.0% {
    opacity: 1;
    translate: 0 0;
  }
  37.08%,
  85.0% {
    opacity: 0;
    translate: 0 -8px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes v2rB {
  0%,
  35.42% {
    opacity: 0;
    translate: 0 8px;
  }
  38.33%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 8px;
  }
}
@keyframes v2rC {
  0%,
  35.0% {
    background: #f1f4fb;
    color: #4a5170;
  }
  37.5%,
  85.0% {
    background: #dcfce7;
    color: #15803d;
  }
  86.2%,
  100% {
    background: #f1f4fb;
    color: #4a5170;
  }
}
@keyframes v2lift {
  0%,
  5.0% {
    translate: 0 0;
  }
  9.17%,
  85.0% {
    translate: 0 -4px;
  }
  86.2%,
  100% {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gx-v2 * {
    animation: none !important;
  }
}

/* ===================================================================
   STEP 3: LAUNCH GRAPHIC (la_ keyframes, 8s loop)
   =================================================================== */
@keyframes la_ln0 {
  0%,
  16.88% {
    stroke-dashoffset: 1;
  }
  23.12%,
  86.0% {
    stroke-dashoffset: 0;
  }
  87.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes la_tl0 {
  0%,
  23.12% {
    opacity: 0.6;
    scale: 0.96;
  }
  25.0% {
    opacity: 1;
    scale: 1.04;
  }
  27.5%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0.6;
    scale: 0.96;
  }
}
@keyframes la_st00 {
  0%,
  23.12% {
    opacity: 1;
  }
  24.38%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_st10 {
  0%,
  23.12% {
    opacity: 0;
    scale: 0.5;
  }
  25.62% {
    opacity: 1;
    scale: 1.15;
  }
  27.5%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes la_ln4 {
  0%,
  18.0% {
    stroke-dashoffset: 1;
  }
  24.25%,
  86.0% {
    stroke-dashoffset: 0;
  }
  87.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes la_tl4 {
  0%,
  24.25% {
    opacity: 0.6;
    scale: 0.96;
  }
  26.12% {
    opacity: 1;
    scale: 1.04;
  }
  28.62%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0.6;
    scale: 0.96;
  }
}
@keyframes la_st04 {
  0%,
  24.25% {
    opacity: 1;
  }
  25.5%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_st14 {
  0%,
  24.25% {
    opacity: 0;
    scale: 0.5;
  }
  26.75% {
    opacity: 1;
    scale: 1.15;
  }
  28.62%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes la_ln1 {
  0%,
  19.12% {
    stroke-dashoffset: 1;
  }
  25.38%,
  86.0% {
    stroke-dashoffset: 0;
  }
  87.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes la_tl1 {
  0%,
  25.38% {
    opacity: 0.6;
    scale: 0.96;
  }
  27.25% {
    opacity: 1;
    scale: 1.04;
  }
  29.75%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0.6;
    scale: 0.96;
  }
}
@keyframes la_st01 {
  0%,
  25.38% {
    opacity: 1;
  }
  26.62%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_st11 {
  0%,
  25.38% {
    opacity: 0;
    scale: 0.5;
  }
  27.88% {
    opacity: 1;
    scale: 1.15;
  }
  29.75%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes la_ln5 {
  0%,
  20.25% {
    stroke-dashoffset: 1;
  }
  26.5%,
  86.0% {
    stroke-dashoffset: 0;
  }
  87.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes la_tl5 {
  0%,
  26.5% {
    opacity: 0.6;
    scale: 0.96;
  }
  28.38% {
    opacity: 1;
    scale: 1.04;
  }
  30.88%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0.6;
    scale: 0.96;
  }
}
@keyframes la_st05 {
  0%,
  26.5% {
    opacity: 1;
  }
  27.75%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_st15 {
  0%,
  26.5% {
    opacity: 0;
    scale: 0.5;
  }
  29.0% {
    opacity: 1;
    scale: 1.15;
  }
  30.88%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes la_ln2 {
  0%,
  21.38% {
    stroke-dashoffset: 1;
  }
  27.62%,
  86.0% {
    stroke-dashoffset: 0;
  }
  87.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes la_tl2 {
  0%,
  27.62% {
    opacity: 0.6;
    scale: 0.96;
  }
  29.5% {
    opacity: 1;
    scale: 1.04;
  }
  32.0%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0.6;
    scale: 0.96;
  }
}
@keyframes la_st02 {
  0%,
  27.62% {
    opacity: 1;
  }
  28.88%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_st12 {
  0%,
  27.62% {
    opacity: 0;
    scale: 0.5;
  }
  30.12% {
    opacity: 1;
    scale: 1.15;
  }
  32.0%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes la_ln6 {
  0%,
  22.5% {
    stroke-dashoffset: 1;
  }
  28.75%,
  86.0% {
    stroke-dashoffset: 0;
  }
  87.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes la_tl6 {
  0%,
  28.75% {
    opacity: 0.6;
    scale: 0.96;
  }
  30.62% {
    opacity: 1;
    scale: 1.04;
  }
  33.12%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0.6;
    scale: 0.96;
  }
}
@keyframes la_st06 {
  0%,
  28.75% {
    opacity: 1;
  }
  30.0%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_st16 {
  0%,
  28.75% {
    opacity: 0;
    scale: 0.5;
  }
  31.25% {
    opacity: 1;
    scale: 1.15;
  }
  33.12%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes la_ln3 {
  0%,
  23.62% {
    stroke-dashoffset: 1;
  }
  29.88%,
  86.0% {
    stroke-dashoffset: 0;
  }
  87.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes la_tl3 {
  0%,
  29.88% {
    opacity: 0.6;
    scale: 0.96;
  }
  31.75% {
    opacity: 1;
    scale: 1.04;
  }
  34.25%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0.6;
    scale: 0.96;
  }
}
@keyframes la_st03 {
  0%,
  29.88% {
    opacity: 1;
  }
  31.13%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_st13 {
  0%,
  29.88% {
    opacity: 0;
    scale: 0.5;
  }
  32.38% {
    opacity: 1;
    scale: 1.15;
  }
  34.25%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes la_ln7 {
  0%,
  24.75% {
    stroke-dashoffset: 1;
  }
  31.0%,
  86.0% {
    stroke-dashoffset: 0;
  }
  87.5%,
  100% {
    stroke-dashoffset: 1;
  }
}
@keyframes la_tl7 {
  0%,
  31.0% {
    opacity: 0.6;
    scale: 0.96;
  }
  32.88% {
    opacity: 1;
    scale: 1.04;
  }
  35.38%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0.6;
    scale: 0.96;
  }
}
@keyframes la_st07 {
  0%,
  31.0% {
    opacity: 1;
  }
  32.25%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_st17 {
  0%,
  31.0% {
    opacity: 0;
    scale: 0.5;
  }
  33.5% {
    opacity: 1;
    scale: 1.15;
  }
  35.38%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.5;
  }
}
@keyframes la_btn {
  0%,
  11.25% {
    scale: 1;
    background: #1d56f7;
  }
  12.75% {
    scale: 0.95;
    background: #0a2a9e;
  }
  15.0%,
  86.0% {
    scale: 1;
    background: #0a2a9e;
  }
  87.5%,
  100% {
    scale: 1;
    background: #1d56f7;
  }
}
@keyframes la_lift {
  0%,
  12.5% {
    translate: 0 0;
  }
  17.5%,
  86.0% {
    translate: 0 -4px;
  }
  87.5%,
  100% {
    translate: 0 0;
  }
}
@keyframes la_tag0 {
  0%,
  31.25% {
    opacity: 1;
  }
  33.12%,
  86.0% {
    opacity: 0;
  }
  87.5%,
  100% {
    opacity: 1;
  }
}
@keyframes la_tag1 {
  0%,
  31.25% {
    opacity: 0;
    scale: 0.6;
  }
  33.75% {
    opacity: 1;
    scale: 1.1;
  }
  35.62%,
  86.0% {
    opacity: 1;
    scale: 1;
  }
  87.5%,
  100% {
    opacity: 0;
    scale: 0.6;
  }
}

/* Container-query scaling — .la-stage is a fixed 680×400 box scaled
   down to fit .la-wrap via CSS only (no inline transform). */
.la-wrap {
  width: 100%;
  max-width: 571px;
  container-type: inline-size;
}
.la-canvas {
  display: block;
  width: 100%;
  overflow: hidden;
}
.la-stage {
  transform: scale(calc(100cqi / 680));
  transform-origin: 0 0;
}
@media (max-width: 768px) {
  .dfw-panel.la-panel {
    padding: 24px 16px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .la-stage * {
    animation: none !important;
  }
}

/* ===================================================================
   BRANDS & AGENCIES GRAPHICS (b* / a* keyframes, 12s loop)
   =================================================================== */
.ba-hatch {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(29, 86, 247, 0.13) 0 1px,
    transparent 1px 9px
  );
  -webkit-mask-image: linear-gradient(
    210deg,
    #000 0%,
    rgba(0, 0, 0, 0.4) 35%,
    transparent 60%
  );
  mask-image: linear-gradient(
    210deg,
    #000 0%,
    rgba(0, 0, 0, 0.4) 35%,
    transparent 60%
  );
}
@keyframes bA0 {
  0%,
  15.0% {
    opacity: 1;
    translate: 0 0;
  }
  17.5%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes bB0 {
  0%,
  15.42% {
    opacity: 0;
    translate: 0 4px;
  }
  18.33%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes bR0 {
  0%,
  15.0% {
    background: rgba(34, 197, 94, 0);
  }
  16.67% {
    background: rgba(34, 197, 94, 0.12);
  }
  22.5%,
  100% {
    background: rgba(34, 197, 94, 0);
  }
}
@keyframes bA1 {
  0%,
  20.83% {
    opacity: 1;
    translate: 0 0;
  }
  23.33%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes bB1 {
  0%,
  21.25% {
    opacity: 0;
    translate: 0 4px;
  }
  24.17%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes bR1 {
  0%,
  20.83% {
    background: rgba(34, 197, 94, 0);
  }
  22.5% {
    background: rgba(34, 197, 94, 0.12);
  }
  28.33%,
  100% {
    background: rgba(34, 197, 94, 0);
  }
}
@keyframes bA2 {
  0%,
  26.67% {
    opacity: 1;
    translate: 0 0;
  }
  29.17%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes bB2 {
  0%,
  27.08% {
    opacity: 0;
    translate: 0 4px;
  }
  30.0%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes bR2 {
  0%,
  26.67% {
    background: rgba(34, 197, 94, 0);
  }
  28.33% {
    background: rgba(34, 197, 94, 0.12);
  }
  34.17%,
  100% {
    background: rgba(34, 197, 94, 0);
  }
}
@keyframes bChip {
  0%,
  7.92% {
    opacity: 0;
    scale: 0.85;
    translate: 0 -6px;
  }
  9.67% {
    opacity: 1;
    scale: 1.06;
    translate: 0 0;
  }
  10.83%,
  85.0% {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    scale: 0.85;
    translate: 0 -6px;
  }
}
@keyframes bLift {
  0%,
  9.17% {
    translate: 0 0;
  }
  12.5%,
  85.0% {
    translate: 0 -4px;
  }
  86.2%,
  100% {
    translate: 0 0;
  }
}
@keyframes bN1 {
  0%,
  15.42% {
    opacity: 0;
  }
  16.67%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes bN2 {
  0%,
  21.25% {
    opacity: 0;
  }
  22.5%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes bN3 {
  0%,
  27.08% {
    opacity: 0;
  }
  28.33%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes bBar {
  0%,
  15.0% {
    width: 4%;
  }
  17.5%,
  20.83% {
    width: 25%;
  }
  23.33%,
  26.67% {
    width: 61%;
  }
  29.58%,
  85.0% {
    width: 100%;
    background: #22c55e;
  }
  86.2%,
  100% {
    width: 4%;
  }
}

/* agencies */
@keyframes aSrc {
  0%,
  9.17% {
    background: rgba(29, 86, 247, 0);
  }
  11.67%,
  23.33% {
    background: rgba(29, 86, 247, 0.08);
  }
  25.83%,
  100% {
    background: rgba(29, 86, 247, 0);
  }
}
@keyframes aDst {
  0%,
  20.83% {
    background: rgba(34, 197, 94, 0);
  }
  22.5% {
    background: rgba(34, 197, 94, 0.14);
  }
  29.17%,
  100% {
    background: rgba(34, 197, 94, 0);
  }
}
@keyframes aF0 {
  0%,
  21.25% {
    opacity: 1;
  }
  22.5%,
  85.0% {
    opacity: 0;
  }
  86.2%,
  100% {
    opacity: 1;
  }
}
@keyframes aF1 {
  0%,
  21.67% {
    opacity: 0;
    translate: 0 4px;
  }
  23.75%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes aOk {
  0%,
  22.08% {
    opacity: 0;
    scale: 0.6;
  }
  23.58% {
    opacity: 1;
    scale: 1.15;
  }
  24.58%,
  85.0% {
    opacity: 1;
    scale: 1;
  }
  86.2%,
  100% {
    opacity: 0;
    scale: 0.6;
  }
}
@keyframes aFly {
  0%,
  12.5% {
    opacity: 0;
    translate: 0 0;
    scale: 0.9;
  }
  14.58% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  16.67% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }
  20.83% {
    opacity: 1;
    translate: 0 54px;
    scale: 1;
  }
  22.5%,
  100% {
    opacity: 0;
    translate: 0 54px;
    scale: 0.95;
  }
}
@keyframes aAgent {
  0%,
  29.17% {
    opacity: 0;
    translate: 0 10px;
  }
  32.5%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 10px;
  }
}
@keyframes aLift {
  0%,
  8.33% {
    translate: 0 0;
  }
  11.67%,
  85.0% {
    translate: 0 -4px;
  }
  86.2%,
  100% {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ba-v2 * {
    animation: none !important;
  }
}

/* ===================================================================
   HOVER GRAPHICS (gx-* classes)
   =================================================================== */
.gx-hatch {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(29, 86, 247, 0.13) 0 1px,
    transparent 1px 9px
  );
  -webkit-mask-image: linear-gradient(
    210deg,
    #000 0%,
    rgba(0, 0, 0, 0.4) 35%,
    transparent 60%
  );
  mask-image: linear-gradient(
    210deg,
    #000 0%,
    rgba(0, 0, 0, 0.4) 35%,
    transparent 60%
  );
}
.gx-card {
  transition:
    translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.6s ease;
}
.dfw-tcard:hover .gx-card {
  translate: 0 -4px;
}
.gx-miss,
.gx-ok,
.gx-pend,
.gx-live {
  transition:
    opacity 0.35s ease,
    translate 0.35s ease;
}
.gx-ok,
.gx-live {
  opacity: 0;
  translate: 0 4px;
}
.dfw-tcard:hover .gx-miss,
.dfw-tcard:hover .gx-pend {
  opacity: 0;
  translate: 0 -4px;
}
.dfw-tcard:hover .gx-ok,
.dfw-tcard:hover .gx-live {
  opacity: 1;
  translate: 0 0;
}
.gx-dot {
  background: #c9cfdd;
  transition:
    background 0.35s ease,
    box-shadow 0.35s ease;
}
.dfw-tcard:hover .gx-dot {
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.7);
}
.gx-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.7s ease;
}
.dfw-tcard:hover .gx-line {
  stroke-dashoffset: 0;
}
.gx-toast {
  opacity: 0;
  scale: 0.92;
  translate: 0 6px;
  transition:
    opacity 0.4s ease,
    scale 0.4s ease,
    translate 0.4s ease;
  transition-delay: 0s;
}
.dfw-tcard:hover .gx-toast {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  transition-delay: 1.4s;
}
.gx-fill {
  background: #f5b83d;
  transition:
    width 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.7s ease;
}
.gx-scan {
  opacity: 0;
  transform: translateY(0);
  transition:
    transform 1.3s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.3s ease;
}
.dfw-tcard:hover .gx-scan {
  opacity: 1;
  transform: translateY(136px);
}
.gx-sweep {
  opacity: 0;
  translate: -120% 0;
  transition:
    translate 0.8s ease,
    opacity 0.3s ease;
}
.dfw-tcard:hover .gx-sweep {
  opacity: 1;
  translate: 200% 0;
}
.gx-ring {
  stroke-dasharray: 1;
  stroke-dashoffset: 0.38;
  transition: stroke-dashoffset 1s cubic-bezier(0.22, 0.61, 0.36, 1) 1.2s;
}
.dfw-tcard:hover .gx-ring {
  stroke-dashoffset: 0.02;
}
.gx-cursor {
  opacity: 0;
  translate: -90px 150px;
  transition:
    translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.25s ease;
}
.dfw-tcard:hover .gx-cursor {
  opacity: 1;
  translate: 0 0;
}
.gx-btn {
  transition:
    background 0.25s ease 0.65s,
    scale 0.15s ease 0.65s;
}
.dfw-tcard:hover .gx-btn {
  background: #0a2a9e;
}

/* step panel hover */
.dfw-panel:hover .gx-card {
  translate: 0 -4px;
}
.dfw-panel:hover .gx-miss,
.dfw-panel:hover .gx-pend {
  opacity: 0;
  translate: 0 -4px;
}
.dfw-panel:hover .gx-ok,
.dfw-panel:hover .gx-live {
  opacity: 1;
  translate: 0 0;
}
.dfw-panel:hover .gx-toast {
  opacity: 1;
  scale: 1;
  translate: 0 0;
  transition-delay: 1.5s;
}
.dfw-panel:hover .gx-btn {
  background: #0a2a9e;
}
.gx-bar {
  width: var(--w0);
  background: var(--c0);
  transition:
    width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
    background 0.8s ease;
}
.dfw-panel:hover .gx-bar {
  width: var(--w1);
  background: var(--c1);
}
.gx-fan {
  opacity: 0;
  translate: 0 0;
  rotate: 0deg;
  transition:
    translate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    rotate 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s ease;
}
.dfw-panel:hover .gx-fan {
  opacity: 1;
  translate: var(--fx) var(--fy);
  rotate: var(--fr);
}
.gx-flash {
  opacity: 0;
  transition: opacity 0.25s ease;
}
.dfw-panel:hover .gx-flash {
  opacity: 1;
}
.gx-barstep {
  width: 71%;
  background: #f5b83d;
  transition:
    width 2.4s steps(4, start) 0.3s,
    background 0.3s ease 2.1s;
}
.dfw-panel:hover .gx-barstep {
  width: 100%;
  background: #22c55e;
}

/* gx timing: staggered build on hover, quick reset on leave */
.gx-card,
.gx-miss,
.gx-ok,
.gx-pend,
.gx-live,
.gx-dot,
.gx-line,
.gx-fill,
.gx-bar,
.gx-fan,
.gx-sweep,
.gx-flash,
.gx-ring,
.gx-btn,
.gx-barstep,
.gx-scan,
.gx-cursor,
.gx-toast {
  transition-duration: 0.18s !important;
  transition-delay: 0s !important;
  transition-timing-function: ease !important;
}
.dfw-tcard:hover .gx-card,
.dfw-panel:hover .gx-card {
  transition-duration: 0.6s !important;
}
.dfw-tcard:hover :is(.gx-miss, .gx-pend),
.dfw-panel:hover :is(.gx-miss, .gx-pend) {
  transition-duration: 0.35s !important;
  transition-delay: var(--d, 0s) !important;
}
.dfw-tcard:hover :is(.gx-ok, .gx-live),
.dfw-panel:hover :is(.gx-ok, .gx-live) {
  transition-duration: 0.5s !important;
  transition-delay: var(--d, 0s) !important;
}
.dfw-tcard:hover .gx-dot,
.dfw-panel:hover .gx-flash {
  transition-duration: 0.4s !important;
  transition-delay: var(--d, 0s) !important;
}
.dfw-tcard:hover .gx-line {
  transition-duration: 0.7s !important;
  transition-delay: var(--d, 0s) !important;
}
.dfw-tcard:hover .gx-fill {
  transition-duration: 0.7s !important;
  transition-delay: var(--d, 0s) !important;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.dfw-panel:hover .gx-bar {
  transition-duration: 0.8s !important;
  transition-delay: var(--d, 0s) !important;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.dfw-panel:hover .gx-fan {
  transition-duration: 0.7s !important;
  transition-delay: var(--d, 0s) !important;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.dfw-tcard:hover .gx-sweep {
  transition-duration: 0.8s !important;
  transition-delay: var(--d, 0s) !important;
}
.dfw-tcard:hover .gx-ring {
  transition-duration: 1s !important;
  transition-delay: 1.2s !important;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.dfw-tcard:hover .gx-btn,
.dfw-panel:hover .gx-btn {
  transition-duration: 0.25s !important;
  transition-delay: 0.65s !important;
}
.dfw-tcard:hover .gx-scan {
  transition-duration: 1.3s !important;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}
.dfw-tcard:hover .gx-cursor {
  transition-duration: 0.7s !important;
  transition-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1) !important;
}
.dfw-tcard:hover .gx-toast,
.dfw-panel:hover .gx-toast {
  transition-duration: 0.4s !important;
  transition-delay: 1.5s !important;
}
.dfw-panel:hover .gx-barstep {
  transition:
    width 4s steps(4, start) 0.4s,
    background 0.3s ease 3.4s !important;
}

/* ===================================================================
   LOOPING GRAPHIC KEYFRAMES (k* prefix, 12s period)
   =================================================================== */
@keyframes kCard {
  0%,
  5.0% {
    translate: 0 0;
  }
  10.0%,
  85.0% {
    translate: 0 -4px;
  }
  86.2%,
  100% {
    translate: 0 0;
  }
}
@keyframes kRing {
  0%,
  15.0% {
    stroke-dashoffset: 0.38;
  }
  23.33%,
  85.0% {
    stroke-dashoffset: 0.02;
  }
  86.2%,
  100% {
    stroke-dashoffset: 0.38;
  }
}
@keyframes kBtn {
  0%,
  10.0% {
    background: #1d56f7;
    scale: 1;
  }
  10.83% {
    background: #0a2a9e;
    scale: 0.94;
  }
  12.08%,
  85.0% {
    background: #0a2a9e;
    scale: 1;
  }
  86.2%,
  100% {
    background: #1d56f7;
    scale: 1;
  }
}
@keyframes kCursor {
  0%,
  5.0% {
    opacity: 0;
    translate: -90px 150px;
  }
  6.25% {
    opacity: 1;
    translate: -90px 150px;
  }
  11.25%,
  20.0% {
    opacity: 1;
    translate: 0 0;
  }
  23.33%,
  100% {
    opacity: 0;
    translate: 0 0;
  }
}
@keyframes kToast {
  0%,
  17.5% {
    opacity: 0;
    scale: 0.92;
    translate: 0 6px;
  }
  20.83%,
  85.0% {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    scale: 0.92;
    translate: 0 6px;
  }
}
@keyframes kScan {
  0%,
  5.0% {
    opacity: 0;
    transform: translateY(0);
  }
  6.67% {
    opacity: 1;
    transform: translateY(0);
  }
  17.5%,
  85.0% {
    opacity: 1;
    transform: translateY(136px);
  }
  86.2%,
  100% {
    opacity: 0;
    transform: translateY(136px);
  }
}
@keyframes kBarStep {
  0%,
  8.33% {
    width: 71%;
    background: #f5b83d;
  }
  8.42%,
  16.67% {
    width: 78.25%;
    background: #f5b83d;
  }
  16.75%,
  25.0% {
    width: 85.5%;
    background: #f5b83d;
  }
  25.08%,
  33.33% {
    width: 92.75%;
    background: #f5b83d;
  }
  33.42%,
  85.0% {
    width: 100%;
    background: #22c55e;
  }
  86.2%,
  100% {
    width: 71%;
    background: #f5b83d;
  }
}
.gx-demo .gx-card {
  animation: kCard 12s ease-in-out infinite both;
}
.gx-demo .gx-ring {
  stroke-dasharray: 1;
  animation: kRing 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite both;
}
.gx-demo .gx-btn {
  animation: kBtn 12s ease-in-out infinite both;
}
.gx-demo .gx-cursor {
  animation: kCursor 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite both;
}
.gx-demo .gx-toast {
  animation: kToast 12s ease-in-out infinite both;
}
.gx-demo .gx-scan {
  animation: kScan 12s cubic-bezier(0.65, 0, 0.35, 1) infinite both;
}
.gx-demo .gx-barstep {
  animation: kBarStep 12s linear infinite both;
}
@keyframes gx-miss_1_0 {
  0%,
  13.33% {
    opacity: 1;
    translate: 0 0;
  }
  16.25%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-ok_1_0 {
  0%,
  13.33% {
    opacity: 0;
    translate: 0 4px;
  }
  17.5%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-sweep_0_75 {
  0%,
  11.25% {
    opacity: 0;
    translate: -120% 0;
  }
  11.55% {
    opacity: 1;
    translate: -120% 0;
  }
  17.92% {
    opacity: 1;
    translate: 200% 0;
  }
  18.22%,
  100% {
    opacity: 0;
    translate: 200% 0;
  }
}
@keyframes gx-pend_1_2 {
  0%,
  15.0% {
    opacity: 1;
    translate: 0 0;
  }
  17.92%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-live_1_2 {
  0%,
  15.0% {
    opacity: 0;
    translate: 0 4px;
  }
  19.17%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-miss_1_3 {
  0%,
  15.83% {
    opacity: 1;
    translate: 0 0;
  }
  18.75%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-ok_1_3 {
  0%,
  15.83% {
    opacity: 0;
    translate: 0 4px;
  }
  20.0%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-sweep_1_05 {
  0%,
  13.75% {
    opacity: 0;
    translate: -120% 0;
  }
  14.05% {
    opacity: 1;
    translate: -120% 0;
  }
  20.42% {
    opacity: 1;
    translate: 200% 0;
  }
  20.72%,
  100% {
    opacity: 0;
    translate: 200% 0;
  }
}
@keyframes gx-pend_1_5 {
  0%,
  17.5% {
    opacity: 1;
    translate: 0 0;
  }
  20.42%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-live_1_5 {
  0%,
  17.5% {
    opacity: 0;
    translate: 0 4px;
  }
  21.67%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-fill_0_2 {
  0%,
  6.67% {
    width: var(--w);
    background: #f5b83d;
  }
  12.5%,
  85.0% {
    width: 100%;
    background: #22c55e;
  }
  86.2%,
  100% {
    width: var(--w);
    background: #f5b83d;
  }
}
@keyframes gx-fill_0_36 {
  0%,
  8.0% {
    width: var(--w);
    background: #f5b83d;
  }
  13.83%,
  85.0% {
    width: 100%;
    background: #22c55e;
  }
  86.2%,
  100% {
    width: var(--w);
    background: #f5b83d;
  }
}
@keyframes gx-fill_0_52 {
  0%,
  9.33% {
    width: var(--w);
    background: #f5b83d;
  }
  15.17%,
  85.0% {
    width: 100%;
    background: #22c55e;
  }
  86.2%,
  100% {
    width: var(--w);
    background: #f5b83d;
  }
}
@keyframes gx-fill_0_68 {
  0%,
  10.67% {
    width: var(--w);
    background: #f5b83d;
  }
  16.5%,
  85.0% {
    width: 100%;
    background: #22c55e;
  }
  86.2%,
  100% {
    width: var(--w);
    background: #f5b83d;
  }
}
@keyframes gx-fill_0_84 {
  0%,
  12.0% {
    width: var(--w);
    background: #f5b83d;
  }
  17.83%,
  85.0% {
    width: 100%;
    background: #22c55e;
  }
  86.2%,
  100% {
    width: var(--w);
    background: #f5b83d;
  }
}
@keyframes gx-miss_4_1 {
  0%,
  39.17% {
    opacity: 1;
    translate: 0 0;
  }
  42.08%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-ok_4_1 {
  0%,
  39.17% {
    opacity: 0;
    translate: 0 4px;
  }
  43.33%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-flash_0_4 {
  0%,
  8.33% {
    opacity: 0;
  }
  11.67%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes gx-miss_0_4 {
  0%,
  8.33% {
    opacity: 1;
    translate: 0 0;
  }
  11.25%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-ok_0_4 {
  0%,
  8.33% {
    opacity: 0;
    translate: 0 4px;
  }
  12.5%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-flash_1_4 {
  0%,
  16.67% {
    opacity: 0;
  }
  20.0%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes gx-miss_1_4 {
  0%,
  16.67% {
    opacity: 1;
    translate: 0 0;
  }
  19.58%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-ok_1_4 {
  0%,
  16.67% {
    opacity: 0;
    translate: 0 4px;
  }
  20.83%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-flash_2_4 {
  0%,
  25.0% {
    opacity: 0;
  }
  28.33%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes gx-miss_2_4 {
  0%,
  25.0% {
    opacity: 1;
    translate: 0 0;
  }
  27.92%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-ok_2_4 {
  0%,
  25.0% {
    opacity: 0;
    translate: 0 4px;
  }
  29.17%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-flash_3_4 {
  0%,
  33.33% {
    opacity: 0;
  }
  36.67%,
  85.0% {
    opacity: 1;
  }
  86.2%,
  100% {
    opacity: 0;
  }
}
@keyframes gx-miss_3_4 {
  0%,
  33.33% {
    opacity: 1;
    translate: 0 0;
  }
  36.25%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-ok_3_4 {
  0%,
  33.33% {
    opacity: 0;
    translate: 0 4px;
  }
  37.5%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-miss_1_2 {
  0%,
  15.0% {
    opacity: 1;
    translate: 0 0;
  }
  17.92%,
  85.0% {
    opacity: 0;
    translate: 0 -4px;
  }
  86.2%,
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@keyframes gx-ok_1_2 {
  0%,
  15.0% {
    opacity: 0;
    translate: 0 4px;
  }
  19.17%,
  85.0% {
    opacity: 1;
    translate: 0 0;
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 4px;
  }
}
@keyframes gx-bar_0_25 {
  0%,
  7.08% {
    width: var(--w0);
    background: var(--c0);
  }
  13.75%,
  85.0% {
    width: var(--w1);
    background: var(--c1);
  }
  86.2%,
  100% {
    width: var(--w0);
    background: var(--c0);
  }
}
@keyframes gx-bar_0_4 {
  0%,
  8.33% {
    width: var(--w0);
    background: var(--c0);
  }
  15.0%,
  85.0% {
    width: var(--w1);
    background: var(--c1);
  }
  86.2%,
  100% {
    width: var(--w0);
    background: var(--c0);
  }
}
@keyframes gx-bar_0_55 {
  0%,
  9.58% {
    width: var(--w0);
    background: var(--c0);
  }
  16.25%,
  85.0% {
    width: var(--w1);
    background: var(--c1);
  }
  86.2%,
  100% {
    width: var(--w0);
    background: var(--c0);
  }
}
@keyframes gx-bar_0_7 {
  0%,
  10.83% {
    width: var(--w0);
    background: var(--c0);
  }
  17.5%,
  85.0% {
    width: var(--w1);
    background: var(--c1);
  }
  86.2%,
  100% {
    width: var(--w0);
    background: var(--c0);
  }
}
@keyframes gx-fan_0_89 {
  0%,
  12.42% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
  18.25%,
  85.0% {
    opacity: 1;
    translate: var(--fx) var(--fy);
    rotate: var(--fr);
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes gx-fan_0_71 {
  0%,
  10.92% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
  16.75%,
  85.0% {
    opacity: 1;
    translate: var(--fx) var(--fy);
    rotate: var(--fr);
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes gx-fan_0_53 {
  0%,
  9.42% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
  15.25%,
  85.0% {
    opacity: 1;
    translate: var(--fx) var(--fy);
    rotate: var(--fr);
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
}
@keyframes gx-fan_0_35 {
  0%,
  7.92% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
  13.75%,
  85.0% {
    opacity: 1;
    translate: var(--fx) var(--fy);
    rotate: var(--fr);
  }
  86.2%,
  100% {
    opacity: 0;
    translate: 0 0;
    rotate: 0deg;
  }
}

/* ---------- reduced motion: catch-all ---------- */
@media (prefers-reduced-motion: reduce) {
  .gx-card,
  .gx-miss,
  .gx-ok,
  .gx-pend,
  .gx-live,
  .gx-dot,
  .gx-line,
  .gx-toast,
  .gx-fill,
  .gx-scan,
  .gx-sweep,
  .gx-ring,
  .gx-cursor,
  .gx-btn,
  .gx-bar,
  .gx-fan,
  .gx-flash,
  .gx-barstep {
    transition: none !important;
  }
  .dfw-tcard {
    transition: none;
  }
  .dfw-tcard:hover {
    transform: none;
  }
  .dfw-reveal,
  .dfw-lift {
    transition: none;
  }
  .dfw-panel:hover .dfw-lift {
    transform: none;
  }
  .dfw-pop,
  .dfw-ribbon,
  .dfw-ribbon-cta,
  .dfw-track-scroll,
  .dfw-marquee-track {
    animation: none;
  }
  #top h1,
  #top h1 + p,
  #top h1 ~ div,
  #top img,
  .dfw-float,
  section h2,
  .dfw-tcard,
  .dfw-panel,
  .dfw-motion,
  .dfw-bar {
    animation: none !important;
  }
  a[style*='border-radius: 999px'] {
    transition: none;
  }
  .dfw-story .dfw-story-art {
    transition: none;
  }
  .gx-demo * {
    animation: none !important;
  }
}

/* ===================================================================
   RESPONSIVE — TABLET (≤ 1024px)
   =================================================================== */
@media (max-width: 1024px) {
  /* Hero graphic: shrink further */
  .ha-wrap {
    width: 440px !important;
    height: 273px !important;
  }
  .ha-wrap .ha-stage {
    transform: scale(0.44) !important;
  }

  /* Audience graphic areas */
  .ba-v2 {
    height: 280px !important;
  }
}

/* ===================================================================
   RESPONSIVE — MOBILE (≤ 768px)
   =================================================================== */
@media (max-width: 768px) {
  /* ---------- navbar ---------- */
  /* Nav links already hidden via .dfw-navlinks at 900px */

  /* ---------- hero ---------- */
  .ha-wrap {
    width: 100% !important;
    max-width: 340px !important;
    height: 211px !important;
    margin: 0 auto;
  }
  .ha-wrap .ha-stage {
    transform: scale(0.34) !important;
  }

  /* ---------- audience graphics ---------- */
  .ba-v2 {
    height: 240px !important;
  }

  /* ---------- step panels: ensure graphics don't overflow ---------- */
  .dfw-panel {
    min-height: auto !important;
    height: auto !important;
  }

  /* ---------- testimonial grid: single column ---------- */
  .dfw-tcard {
    min-width: 0 !important;
  }

  /* ---------- results bars: hide axis labels on mobile ---------- */
  .dfw-axis {
    display: none !important;
  }


}

/* ===================================================================
   RESPONSIVE — SMALL MOBILE (≤ 480px)
   =================================================================== */
@media (max-width: 480px) {
  /* Hero graphic: even smaller */
  .ha-wrap {
    max-width: 280px !important;
    height: 174px !important;
  }
  .ha-wrap .ha-stage {
    transform: scale(0.28) !important;
  }

  /* Audience graphics */
  .ba-v2 {
    height: 200px !important;
  }
}

/* Homepage navigation: live-site destinations in the homepage visual style. */
.dfw-home-nav {
  position: relative;
  z-index: 50;
  background: #010025;
  color: #fff;
  border-bottom: 1px solid #1e1d55;
  font-family: 'Instrument Sans', 'Helvetica Neue', sans-serif;
}
.dfw-home-nav-inner {
  max-width: 1240px;
  margin: 0 auto;
  min-height: 84px;
  padding: 0 clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  gap: 24px;
}
.dfw-home-nav a {
  text-decoration: none;
  color: inherit;
}
.dfw-home-nav-logo {
  flex-shrink: 0;
}
.dfw-home-nav-logo img {
  display: block;
  width: 190px;
  height: auto;
  filter: brightness(0) invert(1);
}
.dfw-home-nav-desktop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.dfw-nav-trigger {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  padding: 14px 0;
}
.dfw-home-nav a:focus-visible,
.dfw-nav-trigger:focus-visible {
  outline: 2px solid #82b5ff;
  outline-offset: 5px;
  border-radius: 6px;
}
.dfw-home-nav-desktop > a:hover,
.dfw-nav-trigger:hover {
  color: #a9c8ff;
}
.dfw-home-nav .dfw-nav-ai {
  color: #c4b5fd;
}
.dfw-nav-dropdown {
  position: relative;
}
/* Hover-triggered: hide menu by default, show on hover/focus-within */
.dfw-nav-dropdown > .dfw-nav-menu {
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.dfw-nav-dropdown:hover > .dfw-nav-menu,
.dfw-nav-dropdown:focus-within > .dfw-nav-menu {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.dfw-nav-dropdown:hover > .dfw-nav-trigger {
  color: #a9c8ff;
}
.dfw-nav-menu {
  position: absolute;
  top: 100%;
  left: -24px;
  width: max-content;
  max-width: min(640px, calc(100vw - 40px));
  border: 1px solid #e3e8f4;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 20px 50px -12px rgba(1, 0, 37, 0.18);
  white-space: normal;
  overflow: hidden;
  color: #010025;
}
.dfw-nav-columns {
  display: flex;
  gap: 32px;
  padding: 24px;
}
.dfw-nav-columns > div {
  min-width: 190px;
}
.dfw-nav-heading {
  margin: 0 0 12px;
  color: #5f6689;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dfw-nav-columns a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 -12px;
  border-radius: 8px;
  color: #3a4163;
  font-weight: 500;
  font-size: 14px;
}
.dfw-nav-columns a:hover {
  background: #f4f7ff;
  color: #010025;
}
.dfw-nav-icon {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e4ecff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dfw-nav-promo {
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  background: #f4f5fa;
  border-top: 1px solid #e3e8f4;
}
.dfw-nav-promo p {
  max-width: 290px;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #5f6689;
}
.dfw-nav-promo strong {
  color: #010025;
}
.dfw-home-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.dfw-home-nav .dfw-nav-primary,
.dfw-home-nav .dfw-nav-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.dfw-home-nav .dfw-nav-primary {
  background: #ff5f1f;
  color: #fff;
}
.dfw-home-nav .dfw-nav-secondary {
  background: #fff;
  color: #010025;
  border: 1px solid #d5dbe8;
}
.dfw-home-nav-mobile {
  display: none;
}
@media (max-width: 1100px) {
  .dfw-home-nav-desktop {
    display: none;
  }
  .dfw-home-nav-actions {
    margin-left: auto;
  }
  .dfw-home-nav-mobile {
    display: block;
  }
  .dfw-home-nav-mobile > nav {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 100%;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e3e8f4;
    border-radius: 12px;
    box-shadow: 0 20px 50px -12px rgba(1, 0, 37, 0.18);
    color: #010025;
  }
  .dfw-home-nav-mobile nav > a {
    display: block;
    padding: 14px 0;
  }
  .dfw-home-nav-mobile .dfw-nav-menu {
    position: static;
    width: auto;
    max-width: none;
    margin: 0 0 12px;
    box-shadow: none;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    border: none;
    border-radius: 0;
  }
  .dfw-home-nav-mobile .dfw-nav-trigger {
    padding: 14px 0;
    font-weight: 600;
  }
  .dfw-nav-columns {
    flex-wrap: wrap;
    gap: 20px;
  }
  .dfw-nav-promo {
    flex-wrap: wrap;
  }
}
@media (max-width: 600px) {
  .dfw-home-nav-actions {
    display: none;
  }
  .dfw-home-nav-mobile {
    margin-left: auto;
  }
  .dfw-home-nav-inner {
    min-height: 72px;
  }
  .dfw-home-nav-logo img {
    width: 180px;
  }
}

/* Audience animations restart when the whole card is hovered or focused. */
.dfw-audience-card .ba-product-status > span:last-child,
.dfw-audience-card
  :is(
    .ba-count-1,
    .ba-count-2,
    .ba-count-3,
    .ba-feeds-after,
    .ba-rules-copied,
    .ba-copying
  ) {
  opacity: 0;
}
.dfw-audience-card .ba-sync-bar {
  width: 4%;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-brand-table {
  animation: bLift 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-shopify {
  animation: bChip 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-client-table {
  animation: aLift 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-source {
  animation: aSrc 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-destination {
  animation: aDst 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-agent {
  animation: aAgent 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-feeds-before {
  animation: aF0 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-feeds-after {
  animation: aF1 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-rules-copied {
  animation: aOk 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-copying {
  animation: aFly 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-count-1 {
  animation: bN1 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-count-2 {
  animation: bN2 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-count-3 {
  animation: bN3 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-sync-bar {
  animation: bBar 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-product-0 {
  animation: bR0 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within)
  .ba-product-0
  .ba-product-status
  > span:first-child {
  animation: bA0 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within)
  .ba-product-0
  .ba-product-status
  > span:last-child {
  animation: bB0 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-product-1 {
  animation: bR1 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within)
  .ba-product-1
  .ba-product-status
  > span:first-child {
  animation: bA1 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within)
  .ba-product-1
  .ba-product-status
  > span:last-child {
  animation: bB1 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within) .ba-product-2 {
  animation: bR2 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within)
  .ba-product-2
  .ba-product-status
  > span:first-child {
  animation: bA2 12s ease-in-out infinite both;
}
.dfw-audience-card:is(:hover, :focus-within)
  .ba-product-2
  .ba-product-status
  > span:last-child {
  animation: bB2 12s ease-in-out infinite both;
}
@media (hover: none) {
  .dfw-audience-card .ba-v2 * {
    animation: none !important;
  }
  .dfw-audience-card .ba-product-status > span:first-child,
  .dfw-audience-card :is(.ba-count-1, .ba-count-2, .ba-feeds-before) {
    opacity: 0;
  }
  .dfw-audience-card .ba-product-status > span:last-child,
  .dfw-audience-card :is(.ba-count-3, .ba-feeds-after, .ba-rules-copied) {
    opacity: 1;
  }
  .dfw-audience-card .ba-sync-bar {
    width: 100% !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dfw-audience-card .ba-v2 * {
    animation: none !important;
  }
  .dfw-audience-card .ba-product-status > span:first-child,
  .dfw-audience-card :is(.ba-count-1, .ba-count-2, .ba-feeds-before) {
    opacity: 0;
  }
  .dfw-audience-card .ba-product-status > span:last-child,
  .dfw-audience-card :is(.ba-count-3, .ba-feeds-after, .ba-rules-copied) {
    opacity: 1;
  }
  .dfw-audience-card .ba-sync-bar {
    width: 100% !important;
  }
}