/* ==========================================================================
   Homepage hero animation: "website -> Google -> visitor -> AI -> CRM -> follow-up"
   Markup: the inline <svg class="hf"> in /index.html.
   GENERATED by src/hero-flow/generate.py (npm run build:hero) - edit the
   template/timeline there, not this file.

   Every animated element has class "a" plus its own hf-* class. All animations
   share one 12s duration and loop together, so they stay in sync. Each
   keyframe is annotated with its time in seconds.

   With prefers-reduced-motion (or before the CSS loads), no animation runs and
   the base styles below show a static "end state" frame: pipeline updated and
   follow-up sent.
   ========================================================================== */

.hf { display: block; width: 100%; height: auto; overflow: visible; }
.hf text { font-family: "Inter", system-ui, sans-serif; }
.hf .a { transform-box: fill-box; transform-origin: 50% 50%; }

/* Scale from an edge instead of the centre */
.hf .grow-x { transform-origin: 0 50%; }
.hf .grow-y { transform-origin: 50% 100%; }
.hf .from-l { transform-origin: 0 50%; }

/* ---- Static frame (reduced motion / no animation) ---------------------
   Animated elements (.a) are hidden unless they also carry .s ("static"). */
.hf .a { opacity: 0; }
.hf .a.s { opacity: 1; }
.hf .hf-crm-shift { transform: translateY(46px); }
.hf .hf-rail-dot { transform: translateX(400px); }
.hf .node-c { fill: #c5f547; }
.hf .node-i { color: #0b1215; }

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hf .a {
    animation-duration: 12s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.45, 0, 0.2, 1);
    animation-fill-mode: both;
  }
  .hf .pulse { animation: hf-pulse 2s ease-in-out infinite; }
  /* Paused while the hero is off-screen (toggled in main.js) */
  .hf.is-paused .a, .hf.is-paused .pulse { animation-play-state: paused; }

  .hf .hf-cap1 { animation-name: hf-cap1; }
  .hf .hf-cap2 { animation-name: hf-cap2; }
  .hf .hf-cap3 { animation-name: hf-cap3; }
  .hf .hf-cap4 { animation-name: hf-cap4; }
  .hf .hf-cap5 { animation-name: hf-cap5; }
  .hf .hf-cap6 { animation-name: hf-cap6; }
  .hf .hf-rail-prog { animation-name: hf-rail-prog; }
  .hf .hf-rail-dot { animation-name: hf-rail-dot; }
  .hf .hf-n1 { animation-name: hf-n1; }
  .hf .hf-ni1 { animation-name: hf-ni1; }
  .hf .hf-n2 { animation-name: hf-n2; }
  .hf .hf-ni2 { animation-name: hf-ni2; }
  .hf .hf-n3 { animation-name: hf-n3; }
  .hf .hf-ni3 { animation-name: hf-ni3; }
  .hf .hf-n4 { animation-name: hf-n4; }
  .hf .hf-ni4 { animation-name: hf-ni4; }
  .hf .hf-n5 { animation-name: hf-n5; }
  .hf .hf-ni5 { animation-name: hf-ni5; }
  .hf .hf-n6 { animation-name: hf-n6; }
  .hf .hf-ni6 { animation-name: hf-ni6; }
  .hf .hf-site { animation-name: hf-site; }
  .hf .hf-s-nav { animation-name: hf-s-nav; }
  .hf .hf-s-head { animation-name: hf-s-head; }
  .hf .hf-s-img { animation-name: hf-s-img; }
  .hf .hf-s-para { animation-name: hf-s-para; }
  .hf .hf-s-cta { animation-name: hf-s-cta; }
  .hf .hf-s-c1 { animation-name: hf-s-c1; }
  .hf .hf-s-c2 { animation-name: hf-s-c2; }
  .hf .hf-s-c3 { animation-name: hf-s-c3; }
  .hf .hf-serp { animation-name: hf-serp; }
  .hf .hf-r-you { animation-name: hf-r-you; }
  .hf .hf-r3 { animation-name: hf-r3; }
  .hf .hf-r4 { animation-name: hf-r4; }
  .hf .hf-r1 { animation-name: hf-r1; }
  .hf .hf-r2 { animation-name: hf-r2; }
  .hf .hf-spark { animation-name: hf-spark; }
  .hf .hf-spark-end { animation-name: hf-spark-end; }
  .hf .hf-chip { animation-name: hf-chip; }
  .hf .hf-bar1 { animation-name: hf-bar1; }
  .hf .hf-bar2 { animation-name: hf-bar2; }
  .hf .hf-bar3 { animation-name: hf-bar3; }
  .hf .hf-bar4 { animation-name: hf-bar4; }
  .hf .hf-bar5 { animation-name: hf-bar5; }
  .hf .hf-visitor { animation-name: hf-visitor; }
  .hf .hf-rip1 { animation-name: hf-rip1; }
  .hf .hf-rip2 { animation-name: hf-rip2; }
  .hf .hf-rip3 { animation-name: hf-rip3; }
  .hf .hf-dim { animation-name: hf-dim; }
  .hf .hf-form { animation-name: hf-form; }
  .hf .hf-type1 { animation-name: hf-type1; }
  .hf .hf-type2 { animation-name: hf-type2; }
  .hf .hf-type3 { animation-name: hf-type3; }
  .hf .hf-send { animation-name: hf-send; }
  .hf .hf-ai { animation-name: hf-ai; }
  .hf .hf-lead-in { animation-name: hf-lead-in; }
  .hf .hf-dot1 { animation-name: hf-dot1; }
  .hf .hf-st1 { animation-name: hf-st1; }
  .hf .hf-st2 { animation-name: hf-st2; }
  .hf .hf-st3 { animation-name: hf-st3; }
  .hf .hf-ring { animation-name: hf-ring; }
  .hf .hf-ck1 { animation-name: hf-ck1; }
  .hf .hf-ck2 { animation-name: hf-ck2; }
  .hf .hf-ck3 { animation-name: hf-ck3; }
  .hf .hf-core { animation-name: hf-core; }
  .hf .hf-dot2 { animation-name: hf-dot2; }
  .hf .hf-lead-out { animation-name: hf-lead-out; }
  .hf .hf-crm { animation-name: hf-crm; }
  .hf .hf-crm-new { animation-name: hf-crm-new; }
  .hf .hf-crm-shift { animation-name: hf-crm-shift; }
  .hf .hf-crm-tick { animation-name: hf-crm-tick; }
  .hf .hf-mail { animation-name: hf-mail; }
  .hf .hf-tb1 { animation-name: hf-tb1; }
  .hf .hf-tb2 { animation-name: hf-tb2; }
  .hf .hf-tb3 { animation-name: hf-tb3; }
  .hf .hf-tb4 { animation-name: hf-tb4; }
  .hf .hf-mail-send { animation-name: hf-mail-send; }
  .hf .hf-trail { animation-name: hf-trail; }
  .hf .hf-env { animation-name: hf-env; }
  .hf .hf-toast { animation-name: hf-toast; }
}

@keyframes hf-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes hf-cap1 {
        0% { opacity: 0; transform: translateY(6px); } /* 0s */
    0.417% { opacity: 0; transform: translateY(6px); } /* 0.05s */
      2.5% { opacity: 1; transform: translateY(0px); } /* 0.3s */
    18.75% { opacity: 1; transform: translateY(0px); } /* 2.25s */
   20.417% { opacity: 0; transform: translateY(-6px); } /* 2.45s */
      100% { opacity: 0; transform: translateY(-6px); } /* 12s */
}
@keyframes hf-cap2 {
        0% { opacity: 0; transform: translateY(6px); } /* 0s */
   19.583% { opacity: 0; transform: translateY(6px); } /* 2.35s */
   21.667% { opacity: 1; transform: translateY(0px); } /* 2.6s */
   37.083% { opacity: 1; transform: translateY(0px); } /* 4.45s */
    38.75% { opacity: 0; transform: translateY(-6px); } /* 4.65s */
      100% { opacity: 0; transform: translateY(-6px); } /* 12s */
}
@keyframes hf-cap3 {
        0% { opacity: 0; transform: translateY(6px); } /* 0s */
   37.917% { opacity: 0; transform: translateY(6px); } /* 4.55s */
       40% { opacity: 1; transform: translateY(0px); } /* 4.8s */
   53.333% { opacity: 1; transform: translateY(0px); } /* 6.4s */
       55% { opacity: 0; transform: translateY(-6px); } /* 6.6s */
      100% { opacity: 0; transform: translateY(-6px); } /* 12s */
}
@keyframes hf-cap4 {
        0% { opacity: 0; transform: translateY(6px); } /* 0s */
   54.583% { opacity: 0; transform: translateY(6px); } /* 6.55s */
   56.667% { opacity: 1; transform: translateY(0px); } /* 6.8s */
   70.417% { opacity: 1; transform: translateY(0px); } /* 8.45s */
   72.083% { opacity: 0; transform: translateY(-6px); } /* 8.65s */
      100% { opacity: 0; transform: translateY(-6px); } /* 12s */
}
@keyframes hf-cap5 {
        0% { opacity: 0; transform: translateY(6px); } /* 0s */
   71.667% { opacity: 0; transform: translateY(6px); } /* 8.6s */
    73.75% { opacity: 1; transform: translateY(0px); } /* 8.85s */
   81.667% { opacity: 1; transform: translateY(0px); } /* 9.8s */
   83.333% { opacity: 0; transform: translateY(-6px); } /* 10s */
      100% { opacity: 0; transform: translateY(-6px); } /* 12s */
}
@keyframes hf-cap6 {
        0% { opacity: 0; transform: translateY(6px); } /* 0s */
   82.917% { opacity: 0; transform: translateY(6px); } /* 9.95s */
       85% { opacity: 1; transform: translateY(0px); } /* 10.2s */
     97.5% { opacity: 1; transform: translateY(0px); } /* 11.7s */
   99.167% { opacity: 0; transform: translateY(-6px); } /* 11.9s */
      100% { opacity: 0; transform: translateY(-6px); } /* 12s */
}
@keyframes hf-rail-prog {
        0% { opacity: 1; transform: scaleX(0); } /* 0s */
   19.583% { opacity: 1; transform: scaleX(0); } /* 2.35s */
     22.5% { opacity: 1; transform: scaleX(0.2); } /* 2.7s */
   37.917% { opacity: 1; transform: scaleX(0.2); } /* 4.55s */
   40.833% { opacity: 1; transform: scaleX(0.4); } /* 4.9s */
   54.583% { opacity: 1; transform: scaleX(0.4); } /* 6.55s */
     57.5% { opacity: 1; transform: scaleX(0.6); } /* 6.9s */
   71.667% { opacity: 1; transform: scaleX(0.6); } /* 8.6s */
   74.583% { opacity: 1; transform: scaleX(0.8); } /* 8.95s */
   82.917% { opacity: 1; transform: scaleX(0.8); } /* 9.95s */
   85.833% { opacity: 1; transform: scaleX(1); } /* 10.3s */
     97.5% { opacity: 1; transform: scaleX(1); } /* 11.7s */
   99.583% { opacity: 0; transform: scaleX(1); } /* 11.95s */
      100% { opacity: 0; transform: scaleX(0); } /* 12s */
}
@keyframes hf-rail-dot {
        0% { opacity: 1; transform: translateX(0px); } /* 0s */
   19.583% { opacity: 1; transform: translateX(0px); } /* 2.35s */
     22.5% { opacity: 1; transform: translateX(80px); } /* 2.7s */
   37.917% { opacity: 1; transform: translateX(80px); } /* 4.55s */
   40.833% { opacity: 1; transform: translateX(160px); } /* 4.9s */
   54.583% { opacity: 1; transform: translateX(160px); } /* 6.55s */
     57.5% { opacity: 1; transform: translateX(240px); } /* 6.9s */
   71.667% { opacity: 1; transform: translateX(240px); } /* 8.6s */
   74.583% { opacity: 1; transform: translateX(320px); } /* 8.95s */
   82.917% { opacity: 1; transform: translateX(320px); } /* 9.95s */
   85.833% { opacity: 1; transform: translateX(400px); } /* 10.3s */
     97.5% { opacity: 1; transform: translateX(400px); } /* 11.7s */
   99.583% { opacity: 0; transform: translateX(400px); } /* 11.95s */
      100% { opacity: 0; transform: translateX(0px); } /* 12s */
}
@keyframes hf-n1 {
        0% { fill: #1d292d; } /* 0s */
    0.833% { fill: #1d292d; } /* 0.1s */
      2.5% { fill: #c5f547; } /* 0.3s */
     97.5% { fill: #c5f547; } /* 11.7s */
   99.583% { fill: #1d292d; } /* 11.95s */
      100% { fill: #1d292d; } /* 12s */
}
@keyframes hf-ni1 {
        0% { color: rgba(255,255,255,0.6); } /* 0s */
    0.833% { color: rgba(255,255,255,0.6); } /* 0.1s */
      2.5% { color: #0b1215; } /* 0.3s */
     97.5% { color: #0b1215; } /* 11.7s */
   99.583% { color: rgba(255,255,255,0.6); } /* 11.95s */
      100% { color: rgba(255,255,255,0.6); } /* 12s */
}
@keyframes hf-n2 {
        0% { fill: #1d292d; } /* 0s */
   19.583% { fill: #1d292d; } /* 2.35s */
    21.25% { fill: #c5f547; } /* 2.55s */
     97.5% { fill: #c5f547; } /* 11.7s */
   99.583% { fill: #1d292d; } /* 11.95s */
      100% { fill: #1d292d; } /* 12s */
}
@keyframes hf-ni2 {
        0% { color: rgba(255,255,255,0.6); } /* 0s */
   19.583% { color: rgba(255,255,255,0.6); } /* 2.35s */
    21.25% { color: #0b1215; } /* 2.55s */
     97.5% { color: #0b1215; } /* 11.7s */
   99.583% { color: rgba(255,255,255,0.6); } /* 11.95s */
      100% { color: rgba(255,255,255,0.6); } /* 12s */
}
@keyframes hf-n3 {
        0% { fill: #1d292d; } /* 0s */
   37.917% { fill: #1d292d; } /* 4.55s */
   39.583% { fill: #c5f547; } /* 4.75s */
     97.5% { fill: #c5f547; } /* 11.7s */
   99.583% { fill: #1d292d; } /* 11.95s */
      100% { fill: #1d292d; } /* 12s */
}
@keyframes hf-ni3 {
        0% { color: rgba(255,255,255,0.6); } /* 0s */
   37.917% { color: rgba(255,255,255,0.6); } /* 4.55s */
   39.583% { color: #0b1215; } /* 4.75s */
     97.5% { color: #0b1215; } /* 11.7s */
   99.583% { color: rgba(255,255,255,0.6); } /* 11.95s */
      100% { color: rgba(255,255,255,0.6); } /* 12s */
}
@keyframes hf-n4 {
        0% { fill: #1d292d; } /* 0s */
   54.583% { fill: #1d292d; } /* 6.55s */
    56.25% { fill: #c5f547; } /* 6.75s */
     97.5% { fill: #c5f547; } /* 11.7s */
   99.583% { fill: #1d292d; } /* 11.95s */
      100% { fill: #1d292d; } /* 12s */
}
@keyframes hf-ni4 {
        0% { color: rgba(255,255,255,0.6); } /* 0s */
   54.583% { color: rgba(255,255,255,0.6); } /* 6.55s */
    56.25% { color: #0b1215; } /* 6.75s */
     97.5% { color: #0b1215; } /* 11.7s */
   99.583% { color: rgba(255,255,255,0.6); } /* 11.95s */
      100% { color: rgba(255,255,255,0.6); } /* 12s */
}
@keyframes hf-n5 {
        0% { fill: #1d292d; } /* 0s */
   71.667% { fill: #1d292d; } /* 8.6s */
   73.333% { fill: #c5f547; } /* 8.8s */
     97.5% { fill: #c5f547; } /* 11.7s */
   99.583% { fill: #1d292d; } /* 11.95s */
      100% { fill: #1d292d; } /* 12s */
}
@keyframes hf-ni5 {
        0% { color: rgba(255,255,255,0.6); } /* 0s */
   71.667% { color: rgba(255,255,255,0.6); } /* 8.6s */
   73.333% { color: #0b1215; } /* 8.8s */
     97.5% { color: #0b1215; } /* 11.7s */
   99.583% { color: rgba(255,255,255,0.6); } /* 11.95s */
      100% { color: rgba(255,255,255,0.6); } /* 12s */
}
@keyframes hf-n6 {
        0% { fill: #1d292d; } /* 0s */
   82.917% { fill: #1d292d; } /* 9.95s */
   84.583% { fill: #c5f547; } /* 10.15s */
     97.5% { fill: #c5f547; } /* 11.7s */
   99.583% { fill: #1d292d; } /* 11.95s */
      100% { fill: #1d292d; } /* 12s */
}
@keyframes hf-ni6 {
        0% { color: rgba(255,255,255,0.6); } /* 0s */
   82.917% { color: rgba(255,255,255,0.6); } /* 9.95s */
   84.583% { color: #0b1215; } /* 10.15s */
     97.5% { color: #0b1215; } /* 11.7s */
   99.583% { color: rgba(255,255,255,0.6); } /* 11.95s */
      100% { color: rgba(255,255,255,0.6); } /* 12s */
}
@keyframes hf-site {
        0% { opacity: 0; transform: translateX(0px) scale(0.97); } /* 0s */
    0.417% { opacity: 0; transform: translateX(0px) scale(0.97); } /* 0.05s */
    3.333% { opacity: 1; transform: translateX(0px) scale(1); } /* 0.4s */
   18.333% { opacity: 1; transform: translateX(0px) scale(1); } /* 2.2s */
   20.833% { opacity: 0; transform: translateX(-24px) scale(1); } /* 2.5s */
   37.917% { opacity: 0; transform: translateX(24px) scale(1); } /* 4.55s */
   40.417% { opacity: 1; transform: translateX(0px) scale(1); } /* 4.85s */
    53.75% { opacity: 1; transform: translateX(0px) scale(1); } /* 6.45s */
    56.25% { opacity: 0; transform: translateX(-24px) scale(1); } /* 6.75s */
      100% { opacity: 0; transform: translateX(-24px) scale(1); } /* 12s */
}
@keyframes hf-s-nav {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
    2.917% { opacity: 0; transform: translateY(8px); } /* 0.35s */
    5.833% { opacity: 1; transform: translateY(0px); } /* 0.7s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(8px); } /* 12s */
}
@keyframes hf-s-head {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
    4.167% { opacity: 0; transform: translateY(8px); } /* 0.5s */
    7.083% { opacity: 1; transform: translateY(0px); } /* 0.85s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(8px); } /* 12s */
}
@keyframes hf-s-img {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
        5% { opacity: 0; transform: translateY(8px); } /* 0.6s */
    7.917% { opacity: 1; transform: translateY(0px); } /* 0.95s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(8px); } /* 12s */
}
@keyframes hf-s-para {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
    5.417% { opacity: 0; transform: translateY(8px); } /* 0.65s */
    8.333% { opacity: 1; transform: translateY(0px); } /* 1s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(8px); } /* 12s */
}
@keyframes hf-s-cta {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
    6.667% { opacity: 0; transform: translateY(8px); } /* 0.8s */
    9.583% { opacity: 1; transform: translateY(0px); } /* 1.15s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(8px); } /* 12s */
}
@keyframes hf-s-c1 {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
    7.917% { opacity: 0; transform: translateY(8px); } /* 0.95s */
   10.833% { opacity: 1; transform: translateY(0px); } /* 1.3s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(8px); } /* 12s */
}
@keyframes hf-s-c2 {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
     8.75% { opacity: 0; transform: translateY(8px); } /* 1.05s */
   11.667% { opacity: 1; transform: translateY(0px); } /* 1.4s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(8px); } /* 12s */
}
@keyframes hf-s-c3 {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
    9.583% { opacity: 0; transform: translateY(8px); } /* 1.15s */
     12.5% { opacity: 1; transform: translateY(0px); } /* 1.5s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(8px); } /* 12s */
}
@keyframes hf-serp {
        0% { opacity: 0; transform: translateX(24px); } /* 0s */
   19.583% { opacity: 0; transform: translateX(24px); } /* 2.35s */
   22.083% { opacity: 1; transform: translateX(0px); } /* 2.65s */
   37.083% { opacity: 1; transform: translateX(0px); } /* 4.45s */
   39.583% { opacity: 0; transform: translateX(-24px); } /* 4.75s */
      100% { opacity: 0; transform: translateX(-24px); } /* 12s */
}
@keyframes hf-r-you {
        0% { transform: translateY(0px); } /* 0s */
   24.583% { transform: translateY(0px); } /* 2.95s */
   27.917% { transform: translateY(-76px); } /* 3.35s */
   29.583% { transform: translateY(-76px); } /* 3.55s */
   32.917% { transform: translateY(-152px); } /* 3.95s */
      100% { transform: translateY(-152px); } /* 12s */
}
@keyframes hf-r3 {
        0% { transform: translateY(0px); } /* 0s */
   24.583% { transform: translateY(0px); } /* 2.95s */
   27.917% { transform: translateY(38px); } /* 3.35s */
      100% { transform: translateY(38px); } /* 12s */
}
@keyframes hf-r4 {
        0% { transform: translateY(0px); } /* 0s */
   24.583% { transform: translateY(0px); } /* 2.95s */
   27.917% { transform: translateY(38px); } /* 3.35s */
      100% { transform: translateY(38px); } /* 12s */
}
@keyframes hf-r1 {
        0% { transform: translateY(0px); } /* 0s */
   29.583% { transform: translateY(0px); } /* 3.55s */
   32.917% { transform: translateY(38px); } /* 3.95s */
      100% { transform: translateY(38px); } /* 12s */
}
@keyframes hf-r2 {
        0% { transform: translateY(0px); } /* 0s */
   29.583% { transform: translateY(0px); } /* 3.55s */
   32.917% { transform: translateY(38px); } /* 3.95s */
      100% { transform: translateY(38px); } /* 12s */
}
@keyframes hf-spark {
        0% { stroke-dashoffset: 100; } /* 0s */
     22.5% { stroke-dashoffset: 100; } /* 2.7s */
     32.5% { stroke-dashoffset: 0; } /* 3.9s */
      100% { stroke-dashoffset: 0; } /* 12s */
}
@keyframes hf-spark-end {
        0% { opacity: 0; transform: scale(0.4); } /* 0s */
   32.083% { opacity: 0; transform: scale(0.4); } /* 3.85s */
    33.75% { opacity: 1; transform: scale(1); } /* 4.05s */
   99.917% { opacity: 1; transform: scale(1); } /* 11.99s */
      100% { opacity: 0; transform: scale(0.4); } /* 12s */
}
@keyframes hf-chip {
        0% { opacity: 0; transform: translateY(4px); } /* 0s */
     32.5% { opacity: 0; transform: translateY(4px); } /* 3.9s */
   34.583% { opacity: 1; transform: translateY(0px); } /* 4.15s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(4px); } /* 12s */
}
@keyframes hf-bar1 {
        0% { transform: scaleY(0.2); } /* 0s */
   23.333% { transform: scaleY(0.2); } /* 2.8s */
   27.083% { transform: scaleY(1); } /* 3.25s */
   99.917% { transform: scaleY(1); } /* 11.99s */
      100% { transform: scaleY(0.2); } /* 12s */
}
@keyframes hf-bar2 {
        0% { transform: scaleY(0.2); } /* 0s */
     24.5% { transform: scaleY(0.2); } /* 2.94s */
    28.25% { transform: scaleY(1); } /* 3.39s */
   99.917% { transform: scaleY(1); } /* 11.99s */
      100% { transform: scaleY(0.2); } /* 12s */
}
@keyframes hf-bar3 {
        0% { transform: scaleY(0.2); } /* 0s */
   25.667% { transform: scaleY(0.2); } /* 3.08s */
   29.417% { transform: scaleY(1); } /* 3.53s */
   99.917% { transform: scaleY(1); } /* 11.99s */
      100% { transform: scaleY(0.2); } /* 12s */
}
@keyframes hf-bar4 {
        0% { transform: scaleY(0.2); } /* 0s */
   26.833% { transform: scaleY(0.2); } /* 3.22s */
   30.583% { transform: scaleY(1); } /* 3.67s */
   99.917% { transform: scaleY(1); } /* 11.99s */
      100% { transform: scaleY(0.2); } /* 12s */
}
@keyframes hf-bar5 {
        0% { transform: scaleY(0.2); } /* 0s */
       28% { transform: scaleY(0.2); } /* 3.36s */
    31.75% { transform: scaleY(1); } /* 3.81s */
   99.917% { transform: scaleY(1); } /* 11.99s */
      100% { transform: scaleY(0.2); } /* 12s */
}
@keyframes hf-visitor {
        0% { opacity: 0; transform: translate(250px,318px) scale(1); } /* 0s */
   32.083% { opacity: 0; transform: translate(250px,318px) scale(1); } /* 3.85s */
    33.75% { opacity: 1; transform: translate(205px,230px) scale(1); } /* 4.05s */
   35.417% { opacity: 1; transform: translate(140px,136px) scale(1); } /* 4.25s */
   35.833% { opacity: 1; transform: translate(140px,136px) scale(0.85); } /* 4.3s */
   36.667% { opacity: 1; transform: translate(140px,136px) scale(1); } /* 4.4s */
   38.333% { opacity: 1; transform: translate(140px,136px) scale(1); } /* 4.6s */
   42.917% { opacity: 1; transform: translate(118px,207px) scale(1); } /* 5.15s */
   43.333% { opacity: 1; transform: translate(118px,207px) scale(0.85); } /* 5.2s */
   44.167% { opacity: 1; transform: translate(118px,207px) scale(1); } /* 5.3s */
    46.25% { opacity: 1; transform: translate(118px,207px) scale(1); } /* 5.55s */
   48.333% { opacity: 1; transform: translate(300px,186px) scale(1); } /* 5.8s */
   50.417% { opacity: 1; transform: translate(240px,265px) scale(1); } /* 6.05s */
   50.833% { opacity: 1; transform: translate(240px,265px) scale(0.85); } /* 6.1s */
   51.667% { opacity: 1; transform: translate(240px,265px) scale(1); } /* 6.2s */
   52.917% { opacity: 1; transform: translate(240px,265px) scale(1); } /* 6.35s */
   54.583% { opacity: 0; transform: translate(250px,285px) scale(1); } /* 6.55s */
      100% { opacity: 0; transform: translate(250px,285px) scale(1); } /* 12s */
}
@keyframes hf-rip1 {
        0% { opacity: 0; transform: scale(0.3); } /* 0s */
     35.5% { opacity: 0; transform: scale(0.3); } /* 4.26s */
   35.667% { opacity: 0.9; transform: scale(0.3); } /* 4.28s */
   38.417% { opacity: 0; transform: scale(1.8); } /* 4.61s */
      100% { opacity: 0; transform: scale(1.8); } /* 12s */
}
@keyframes hf-rip2 {
        0% { opacity: 0; transform: scale(0.3); } /* 0s */
   43.417% { opacity: 0; transform: scale(0.3); } /* 5.21s */
   43.583% { opacity: 0.9; transform: scale(0.3); } /* 5.23s */
   46.333% { opacity: 0; transform: scale(1.8); } /* 5.56s */
      100% { opacity: 0; transform: scale(1.8); } /* 12s */
}
@keyframes hf-rip3 {
        0% { opacity: 0; transform: scale(0.3); } /* 0s */
   50.917% { opacity: 0; transform: scale(0.3); } /* 6.11s */
   51.083% { opacity: 0.9; transform: scale(0.3); } /* 6.13s */
   53.833% { opacity: 0; transform: scale(1.8); } /* 6.46s */
      100% { opacity: 0; transform: scale(1.8); } /* 12s */
}
@keyframes hf-dim {
        0% { opacity: 0; } /* 0s */
   44.167% { opacity: 0; } /* 5.3s */
   45.833% { opacity: 1; } /* 5.5s */
    53.75% { opacity: 1; } /* 6.45s */
   55.833% { opacity: 0; } /* 6.7s */
      100% { opacity: 0; } /* 12s */
}
@keyframes hf-form {
        0% { opacity: 0; transform: translate(0px,0px) scale(0.92); } /* 0s */
   44.167% { opacity: 0; transform: translate(0px,0px) scale(0.92); } /* 5.3s */
    46.25% { opacity: 1; transform: translate(0px,0px) scale(1); } /* 5.55s */
   52.917% { opacity: 1; transform: translate(0px,0px) scale(1); } /* 6.35s */
   55.833% { opacity: 0; transform: translate(-139px,-24px) scale(0.7); } /* 6.7s */
      100% { opacity: 0; transform: translate(-139px,-24px) scale(0.7); } /* 12s */
}
@keyframes hf-type1 {
        0% { transform: scaleX(0); } /* 0s */
   46.667% { transform: scaleX(0); } /* 5.6s */
   49.167% { transform: scaleX(1); } /* 5.9s */
   99.917% { transform: scaleX(1); } /* 11.99s */
      100% { transform: scaleX(0); } /* 12s */
}
@keyframes hf-type2 {
        0% { transform: scaleX(0); } /* 0s */
    48.75% { transform: scaleX(0); } /* 5.85s */
   50.417% { transform: scaleX(1); } /* 6.05s */
   99.917% { transform: scaleX(1); } /* 11.99s */
      100% { transform: scaleX(0); } /* 12s */
}
@keyframes hf-type3 {
        0% { transform: scaleX(0); } /* 0s */
   49.833% { transform: scaleX(0); } /* 5.98s */
   51.083% { transform: scaleX(1); } /* 6.13s */
   99.917% { transform: scaleX(1); } /* 11.99s */
      100% { transform: scaleX(0); } /* 12s */
}
@keyframes hf-send {
        0% { transform: scale(1); } /* 0s */
   50.833% { transform: scale(1); } /* 6.1s */
   51.333% { transform: scale(0.95); } /* 6.16s */
   52.167% { transform: scale(1); } /* 6.26s */
      100% { transform: scale(1); } /* 12s */
}
@keyframes hf-ai {
        0% { opacity: 0; transform: translateX(24px); } /* 0s */
   54.583% { opacity: 0; transform: translateX(24px); } /* 6.55s */
   57.083% { opacity: 1; transform: translateX(0px); } /* 6.85s */
    71.25% { opacity: 1; transform: translateX(0px); } /* 8.55s */
    73.75% { opacity: 0; transform: translateX(-24px); } /* 8.85s */
      100% { opacity: 0; transform: translateX(-24px); } /* 12s */
}
@keyframes hf-lead-in {
        0% { opacity: 0; transform: translateX(0px) scale(0.9); } /* 0s */
   54.167% { opacity: 0; transform: translateX(0px) scale(0.9); } /* 6.5s */
    56.25% { opacity: 1; transform: translateX(0px) scale(1); } /* 6.75s */
    71.25% { opacity: 1; transform: translateX(0px) scale(1); } /* 8.55s */
    73.75% { opacity: 0; transform: translateX(-24px) scale(1); } /* 8.85s */
      100% { opacity: 0; transform: translateX(-24px) scale(1); } /* 12s */
}
@keyframes hf-dot1 {
        0% { opacity: 0; transform: translateX(0px); } /* 0s */
   57.083% { opacity: 0; transform: translateX(0px); } /* 6.85s */
     57.5% { opacity: 1; transform: translateX(0px); } /* 6.9s */
   59.167% { opacity: 1; transform: translateX(40px); } /* 7.1s */
   59.583% { opacity: 0; transform: translateX(40px); } /* 7.15s */
      100% { opacity: 0; transform: translateX(40px); } /* 12s */
}
@keyframes hf-st1 {
        0% { opacity: 0; } /* 0s */
   55.833% { opacity: 0; } /* 6.7s */
   57.083% { opacity: 1; } /* 6.85s */
    58.75% { opacity: 1; } /* 7.05s */
   59.583% { opacity: 0; } /* 7.15s */
      100% { opacity: 0; } /* 12s */
}
@keyframes hf-st2 {
        0% { opacity: 0; } /* 0s */
   59.167% { opacity: 0; } /* 7.1s */
       60% { opacity: 1; } /* 7.2s */
       65% { opacity: 1; } /* 7.8s */
   65.833% { opacity: 0; } /* 7.9s */
      100% { opacity: 0; } /* 12s */
}
@keyframes hf-st3 {
        0% { opacity: 0; transform: scale(0.9); } /* 0s */
   65.417% { opacity: 0; transform: scale(0.9); } /* 7.85s */
   66.667% { opacity: 1; transform: scale(1); } /* 8s */
   99.917% { opacity: 1; transform: scale(1); } /* 11.99s */
      100% { opacity: 0; transform: scale(0.9); } /* 12s */
}
@keyframes hf-ring {
        0% { opacity: 0; stroke-dashoffset: 0; } /* 0s */
   59.167% { opacity: 0; stroke-dashoffset: 0; } /* 7.1s */
       60% { opacity: 1; stroke-dashoffset: -20; } /* 7.2s */
       65% { opacity: 1; stroke-dashoffset: -286; } /* 7.8s */
   65.833% { opacity: 0; stroke-dashoffset: -300; } /* 7.9s */
      100% { opacity: 0; stroke-dashoffset: -300; } /* 12s */
}
@keyframes hf-ck1 {
        0% { opacity: 0; transform: scale(0.5); } /* 0s */
   60.417% { opacity: 0; transform: scale(0.5); } /* 7.25s */
   61.667% { opacity: 1; transform: scale(1); } /* 7.4s */
   99.917% { opacity: 1; transform: scale(1); } /* 11.99s */
      100% { opacity: 0; transform: scale(0.5); } /* 12s */
}
@keyframes hf-ck2 {
        0% { opacity: 0; transform: scale(0.5); } /* 0s */
   62.083% { opacity: 0; transform: scale(0.5); } /* 7.45s */
   63.333% { opacity: 1; transform: scale(1); } /* 7.6s */
   99.917% { opacity: 1; transform: scale(1); } /* 11.99s */
      100% { opacity: 0; transform: scale(0.5); } /* 12s */
}
@keyframes hf-ck3 {
        0% { opacity: 0; transform: scale(0.5); } /* 0s */
    63.75% { opacity: 0; transform: scale(0.5); } /* 7.65s */
       65% { opacity: 1; transform: scale(1); } /* 7.8s */
   99.917% { opacity: 1; transform: scale(1); } /* 11.99s */
      100% { opacity: 0; transform: scale(0.5); } /* 12s */
}
@keyframes hf-core {
        0% { opacity: 0; transform: scale(0.5); } /* 0s */
   65.417% { opacity: 0; transform: scale(0.5); } /* 7.85s */
   66.667% { opacity: 1; transform: scale(1); } /* 8s */
   99.917% { opacity: 1; transform: scale(1); } /* 11.99s */
      100% { opacity: 0; transform: scale(0.5); } /* 12s */
}
@keyframes hf-dot2 {
        0% { opacity: 0; transform: translateX(0px); } /* 0s */
    66.25% { opacity: 0; transform: translateX(0px); } /* 7.95s */
   66.667% { opacity: 1; transform: translateX(0px); } /* 8s */
   68.333% { opacity: 1; transform: translateX(40px); } /* 8.2s */
    68.75% { opacity: 0; transform: translateX(40px); } /* 8.25s */
      100% { opacity: 0; transform: translateX(40px); } /* 12s */
}
@keyframes hf-lead-out {
        0% { opacity: 0; transform: translate(-10px,0px) scale(1); } /* 0s */
   67.917% { opacity: 0; transform: translate(-10px,0px) scale(1); } /* 8.15s */
   69.583% { opacity: 1; transform: translate(0px,0px) scale(1); } /* 8.35s */
   71.667% { opacity: 1; transform: translate(0px,0px) scale(1); } /* 8.6s */
   74.583% { opacity: 0; transform: translate(-139px,-30px) scale(0.86); } /* 8.95s */
      100% { opacity: 0; transform: translate(-139px,-30px) scale(0.86); } /* 12s */
}
@keyframes hf-crm {
        0% { opacity: 0; transform: translateX(24px); } /* 0s */
   71.667% { opacity: 0; transform: translateX(24px); } /* 8.6s */
   74.167% { opacity: 1; transform: translateX(0px); } /* 8.9s */
   82.917% { opacity: 1; transform: translateX(0px); } /* 9.95s */
   85.417% { opacity: 0.3; transform: translateX(0px); } /* 10.25s */
     97.5% { opacity: 0.3; transform: translateX(0px); } /* 11.7s */
   99.583% { opacity: 0; transform: translateX(0px); } /* 11.95s */
      100% { opacity: 0; transform: translateX(24px); } /* 12s */
}
@keyframes hf-crm-new {
        0% { opacity: 0; transform: translateY(-24px); } /* 0s */
    73.75% { opacity: 0; transform: translateY(-24px); } /* 8.85s */
    76.25% { opacity: 1; transform: translateY(0px); } /* 9.15s */
   99.917% { opacity: 1; transform: translateY(0px); } /* 11.99s */
      100% { opacity: 0; transform: translateY(-24px); } /* 12s */
}
@keyframes hf-crm-shift {
        0% { transform: translateY(0px); } /* 0s */
    73.75% { transform: translateY(0px); } /* 8.85s */
    76.25% { transform: translateY(46px); } /* 9.15s */
   99.917% { transform: translateY(46px); } /* 11.99s */
      100% { transform: translateY(0px); } /* 12s */
}
@keyframes hf-crm-tick {
        0% { opacity: 0; transform: scale(0.4); } /* 0s */
   77.083% { opacity: 0; transform: scale(0.4); } /* 9.25s */
   78.333% { opacity: 1; transform: scale(1.15); } /* 9.4s */
   79.167% { opacity: 1; transform: scale(1); } /* 9.5s */
   99.917% { opacity: 1; transform: scale(1); } /* 11.99s */
      100% { opacity: 0; transform: scale(0.4); } /* 12s */
}
@keyframes hf-mail {
        0% { opacity: 0; transform: translate(0px,16px) scale(1); } /* 0s */
   82.917% { opacity: 0; transform: translate(0px,16px) scale(1); } /* 9.95s */
   85.417% { opacity: 1; transform: translate(0px,0px) scale(1); } /* 10.25s */
    91.25% { opacity: 1; transform: translate(0px,0px) scale(1); } /* 10.95s */
   94.167% { opacity: 0; transform: translate(120px,-30px) scale(0.35); } /* 11.3s */
      100% { opacity: 0; transform: translate(120px,-30px) scale(0.35); } /* 12s */
}
@keyframes hf-tb1 {
        0% { transform: scaleX(0); } /* 0s */
   85.417% { transform: scaleX(0); } /* 10.25s */
   86.917% { transform: scaleX(1); } /* 10.43s */
   99.917% { transform: scaleX(1); } /* 11.99s */
      100% { transform: scaleX(0); } /* 12s */
}
@keyframes hf-tb2 {
        0% { transform: scaleX(0); } /* 0s */
   86.667% { transform: scaleX(0); } /* 10.4s */
   88.167% { transform: scaleX(1); } /* 10.58s */
   99.917% { transform: scaleX(1); } /* 11.99s */
      100% { transform: scaleX(0); } /* 12s */
}
@keyframes hf-tb3 {
        0% { transform: scaleX(0); } /* 0s */
   87.917% { transform: scaleX(0); } /* 10.55s */
   89.417% { transform: scaleX(1); } /* 10.73s */
   99.917% { transform: scaleX(1); } /* 11.99s */
      100% { transform: scaleX(0); } /* 12s */
}
@keyframes hf-tb4 {
        0% { transform: scaleX(0); } /* 0s */
   89.167% { transform: scaleX(0); } /* 10.7s */
   90.667% { transform: scaleX(1); } /* 10.88s */
   99.917% { transform: scaleX(1); } /* 11.99s */
      100% { transform: scaleX(0); } /* 12s */
}
@keyframes hf-mail-send {
        0% { transform: scale(1); } /* 0s */
   90.417% { transform: scale(1); } /* 10.85s */
   90.917% { transform: scale(0.94); } /* 10.91s */
    91.75% { transform: scale(1); } /* 11.01s */
      100% { transform: scale(1); } /* 12s */
}
@keyframes hf-trail {
        0% { opacity: 0; } /* 0s */
    91.25% { opacity: 0; } /* 10.95s */
   92.083% { opacity: 0.7; } /* 11.05s */
       95% { opacity: 0.7; } /* 11.4s */
   96.667% { opacity: 0; } /* 11.6s */
      100% { opacity: 0; } /* 12s */
}
@keyframes hf-env {
        0% { opacity: 0; transform: translate(372px,242px) scale(0.6); } /* 0s */
    91.25% { opacity: 0; transform: translate(372px,242px) scale(0.6); } /* 10.95s */
   92.083% { opacity: 1; transform: translate(384px,238px) scale(1); } /* 11.05s */
       95% { opacity: 1; transform: translate(446px,196px) scale(1); } /* 11.4s */
    96.25% { opacity: 0; transform: translate(460px,188px) scale(0.8); } /* 11.55s */
      100% { opacity: 0; transform: translate(460px,188px) scale(0.8); } /* 12s */
}
@keyframes hf-toast {
        0% { opacity: 0; transform: translateY(8px); } /* 0s */
   92.917% { opacity: 0; transform: translateY(8px); } /* 11.15s */
       95% { opacity: 1; transform: translateY(0px); } /* 11.4s */
   97.917% { opacity: 1; transform: translateY(0px); } /* 11.75s */
   99.583% { opacity: 0; transform: translateY(0px); } /* 11.95s */
      100% { opacity: 0; transform: translateY(0px); } /* 12s */
}