/* ============================================================
   FLASH — header + primeira dobra
   Vive fora de #allomni-root: o React nunca reescreve esta arvore.
   Usa os tokens ja existentes do projeto (--bg-*, --font-*).
   ============================================================ */

:root {
  --fh-blue: #1F6FFF;          /* --surface-brand */
  --fh-blue-text: #4D8FFF;     /* --text-brand    */
  --fh-blue-deep: #0B50DB;
  --fh-cyan: #4FD8FF;
  --fh-ink: #EEF3FA;
  --fh-body: #C2CCDA;
  --fh-muted: #8592A3;
  --fh-line: rgba(255, 255, 255, .09);
  --fh-head-h: 81px;
}

/* header e hero originais saem de cena; o React segue livre para
   renderizar os seus sem interferir no layout */
#allomni-root > header,
#allomni-root > .mobile-menu,
#allomni-root > .mobile-menu-backdrop,
#allomni-root #hero { display: none !important; }

/* ============================ HEADER ============================ */

.fh-header {
  position: fixed; inset: 0 0 auto; z-index: 120;
  padding: 18px 0;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease;
}
.fh-header.is-stuck {
  background: rgba(10, 10, 10, .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--fh-line);
}
.fh-header__in {
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px);
  display: flex; align-items: center; gap: 32px;
}
.fh-logo { display: flex; align-items: center; flex: 0 0 auto; }
/* especificidade proposital: o CSS do site tem "body.allomni-template img"
   (0,1,2), que alcanca ate o que esta fora de #allomni-root e venceria
   um simples ".fh-logo img" (0,1,1) */
/* Altura pedida: 42px no topo. A largura sai sozinha da tela 1024x220
   (4.65:1), dando os 195px combinados -- por isso width: auto, e nao um
   valor fixo que poderia desproporcionar se a arte trocar de novo. */
.fh-header .fh-logo img { height: 42px; width: auto; display: block; max-width: none; }
/* Sem variante mobile de proposito. Havia uma (".fh-logo img" dentro do
   media query), mas 0-1-1 nunca venceu o 0-2-1 da regra acima -- estava
   inerte desde que o arquivo foi escrito. Como 195px cabem na barra de
   375px sem estouro, o tamanho e um so nas tres familias de pagina. */

/* Rodape: 58px, os 270px de largura saem da mesma proporcao.
   O componente vinha com "max-height: 52px" e "max-width" em varias
   camadas; zerar os dois maximos e a unica forma de a altura mandar.
   O #allomni-root da a especificidade (1-2-0) para vencer as regras do
   bundle (0-2-0). */
#allomni-root .logo--footer .logo__img,
#allomni-root .footer__brand .logo__img {
  height: 58px; width: auto;
  max-height: none; max-width: 100%;
  object-fit: contain;              /* se o container apertar, sobra borda em vez de distorcer */
}

.fh-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fh-nav a {
  position: relative; padding: 9px 14px; border-radius: 8px;
  font: 500 14px/1 var(--font-body, Montserrat, system-ui, sans-serif);
  color: var(--fh-body); text-decoration: none;
  transition: color .2s ease, background-color .2s ease;
}
.fh-nav a:hover { color: var(--fh-ink); background: rgba(255, 255, 255, .05); }
.fh-nav a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px;
  background: var(--fh-blue); transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.fh-nav a:hover::after { transform: scaleX(1); }

/* contato: destacado, porem mais discreto que o CTA da hero */
.fh-contact {
  flex: 0 0 auto; margin-left: 8px;
  padding: 10px 20px; border-radius: 10px;
  border: 1px solid rgba(31, 111, 255, .55);
  background: rgba(31, 111, 255, .10);
  font: 600 13.5px/1 var(--font-body, Montserrat, system-ui, sans-serif);
  color: #DCE8FF; text-decoration: none; white-space: nowrap;
  transition: background-color .22s ease, border-color .22s ease, transform .22s ease;
}
.fh-contact:hover {
  background: rgba(31, 111, 255, .2); border-color: rgba(31, 111, 255, .8);
  transform: translateY(-1px);
}

.fh-burger {
  display: none; margin-left: auto; width: 42px; height: 42px;
  border: 1px solid var(--fh-line); border-radius: 10px;
  background: rgba(255, 255, 255, .03); cursor: pointer;
  align-items: center; justify-content: center;
}
.fh-burger span {
  display: block; width: 17px; height: 1.5px; background: var(--fh-ink);
  position: relative; transition: background-color .2s ease;
}
.fh-burger span::before, .fh-burger span::after {
  content: ""; position: absolute; left: 0; width: 17px; height: 1.5px;
  background: var(--fh-ink); transition: transform .28s ease;
}
.fh-burger span::before { top: -6px; }
.fh-burger span::after { top: 6px; }
.fh-burger[aria-expanded="true"] span { background: transparent; }
.fh-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.fh-burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* gaveta mobile */
.fh-drawer {
  position: fixed; inset: 0; z-index: 119;
  background: rgba(6, 8, 12, .97);
  padding: calc(var(--fh-head-h) + 24px) clamp(20px, 6vw, 40px) 40px;
  display: flex; flex-direction: column; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
}
.fh-drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.fh-drawer a {
  padding: 16px 4px; border-bottom: 1px solid var(--fh-line);
  font: 600 19px/1.2 var(--font-display, Montserrat, system-ui, sans-serif);
  color: var(--fh-ink); text-decoration: none;
}
.fh-drawer .fh-drawer__cta {
  margin-top: 22px; border: 0; border-radius: 12px; text-align: center;
  padding: 16px; background: var(--fh-blue); color: #fff; font-size: 15px;
}

/* ============================= HERO ============================= */

.fh-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--bg-0, #0A0A0A);
  padding: calc(var(--fh-head-h) + 74px) 0 96px;
  min-height: 940px; display: flex; align-items: center;
  --field: 1;
}
/* glow central sutil: foco e profundidade, sem virar efeito */
.fh-hero__glow {
  position: absolute; left: 50%; top: 52%; width: min(1100px, 120vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(31, 111, 255, .17) 0%, rgba(31, 111, 255, .07) 32%,
    rgba(31, 111, 255, .02) 52%, transparent 68%);
  pointer-events: none; z-index: 0;
}
.fh-hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 78px 78px;
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 46%, #000 35%, transparent 78%);
  mask-image: radial-gradient(ellipse 78% 62% at 50% 46%, #000 35%, transparent 78%);
}

/* --------------------------- ORBITAS --------------------------- */
/* trilhas e chips vivem no MESMO campo e escalam juntos, senao os
   icones descolariam das linhas nos breakpoints menores */
.fh-orbit-field {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 1;
  transform: scale(var(--field, 1)); transform-origin: 0 0;
  pointer-events: none;
}
.fh-orbits {
  position: absolute; left: -750px; top: -505px;
  width: 1500px; height: 1010px; overflow: visible;
}
/* trilhas: profundidade por opacidade, as de dentro mais presentes */
.fh-orbits .track { fill: none; stroke: #FFFFFF; stroke-width: 1; }
.fh-orbits .track--1 { opacity: .13; }
.fh-orbits .track--2 { opacity: .10; }
.fh-orbits .track--3 { opacity: .07; }
.fh-orbits .track--4 { opacity: .045; }

/* Streak: luz azul percorrendo a propria trilha.
   Um gradiente nao acompanha a curva de uma elipse, entao o efeito de
   cometa vem de duas passadas sobrepostas -- cabeca curta e brilhante,
   cauda longa e fraca, atrasada uma fracao da volta. */
.fh-orbits .streak {
  fill: none; stroke-linecap: round;
  animation: fh-streak var(--d, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: stroke-dashoffset;
}
.fh-orbits .streak--rev { animation-direction: reverse; }
.fh-orbits .streak--head {
  stroke: #4A8CFF; stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(40, 120, 255, .7))
          drop-shadow(0 0 12px rgba(40, 120, 255, .3));
}
.fh-orbits .streak--mid { stroke: #1D6FFF; stroke-width: 1.5; opacity: .5; }
.fh-orbits .streak--tail { stroke: #0066FF; stroke-width: 1.1; opacity: .22; }
@keyframes fh-streak {
  from { stroke-dashoffset: var(--len); }
  to   { stroke-dashoffset: 0; }
}

/* ---------------------- ICONES EM ORBITA ----------------------- */
/* rotate + translate + contra-rotacao = orbita com o icone sempre na
   vertical. O par scaleY/contra-scaleY achata em elipse sem distorcer
   o logo. Tudo em transform: sem reflow. */
/* toda a cadeia gira em torno do mesmo ponto: o centro da hero.
   por isso cada elo e absolute em 0 0 com transform-origin 0 0. */
.fh-orbit {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; z-index: 2;
  transform: scaleY(var(--flat, .66));
}
/* o angulo de repouso fica no braco, separado da rotacao continua.
   assim, com prefers-reduced-motion, os icones continuam distribuidos
   pela orbita em vez de empilharem todos em 0 grau. */
/* --dur e o sentido ficam NO BRACO, nao na orbita: assim cada plataforma
   tem a sua propria velocidade e o conjunto parece um ecossistema, nao
   um carrossel girando em bloco. */
.fh-orbit__arm {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  transform: rotate(var(--a, 0deg));
}
.fh-orbit__spin {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  animation: fh-spin var(--dur, 120s) linear infinite;
  will-change: transform;
}
.fh-arm--rev .fh-orbit__spin { animation-direction: reverse; }
@keyframes fh-spin { to { transform: rotate(360deg); } }

.fh-chip-wrap {
  position: absolute; left: 0; top: 0;
  transform: translateX(var(--r, 400px));
}
/* contra-rotacao: o logo nunca deita, por mais que a orbita gire */
.fh-chip-spin {
  position: absolute; left: 0; top: 0; transform-origin: 0 0;
  animation: fh-spin var(--dur, 120s) linear infinite reverse;
}
.fh-arm--rev .fh-chip-spin { animation-direction: normal; }

.fh-chip {
  position: absolute; left: 0; top: 0;
  /* centrado por margem, para o transform ficar livre para as compensacoes */
  margin: calc(var(--size, 54px) / -2) 0 0 calc(var(--size, 54px) / -2);
  display: grid; place-items: center;
  width: var(--size, 54px); height: var(--size, 54px);
  border-radius: 50%; background: #12161D;
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .05);
  /* desfaz o angulo de repouso e o achatamento da elipse:
     a orbita e oval, o icone segue redondo e em pe.
     --sc varia por icone (.9 / 1 / 1.05) e cria profundidade. */
  transform: rotate(calc(-1 * var(--a, 0deg)))
             scaleY(calc(1 / var(--flat, .66))) scale(var(--sc, 1));
  animation: fh-float var(--fdur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
/* o logo ocupa ~26px num container de 54px, como pedido */
.fh-chip svg, .fh-chip img {
  width: 48%; height: 48%; display: block; object-fit: contain;
}
.fh-header .fh-chip img, .fh-chip img { max-width: none; }
@keyframes fh-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}

/* --------------------------- CONTEUDO -------------------------- */
.fh-hero__in {
  position: relative; z-index: 5;
  max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px);
  width: 100%; text-align: center;
}
.fh-proof {
  display: inline-flex; align-items: center; gap: 9px; flex-wrap: wrap;
  justify-content: center; margin: 0 0 26px;
  font: 500 13px/1.4 var(--font-body, Montserrat, system-ui, sans-serif);
  color: var(--fh-muted);
}
.fh-proof__stars { display: inline-flex; gap: 2px; color: #FFB020; }
.fh-proof__stars svg { width: 14px; height: 14px; }
.fh-proof b { color: var(--fh-body); font-weight: 600; }
.fh-proof i { font-style: normal; color: #3A424E; }

.fh-before {
  margin: 0 0 10px;
  font: 500 clamp(14px, 1.5vw, 16px)/1.5 var(--font-body, Montserrat, system-ui, sans-serif);
  color: var(--fh-muted);
}
.fh-hero h1 {
  margin: 0 auto 22px; max-width: 15ch;
  font: 800 clamp(38px, 6.4vw, 76px)/1.06 var(--font-display, Montserrat, system-ui, sans-serif);
  letter-spacing: -.03em; color: var(--fh-ink);
}
.fh-hero h1 .hl { color: var(--fh-blue-text); }
.fh-sub {
  margin: 0 auto 14px; max-width: 62ch;
  font: 400 clamp(15px, 1.7vw, 18px)/1.62 var(--font-body, Montserrat, system-ui, sans-serif);
  color: var(--fh-body);
}
.fh-kick {
  margin: 0 0 34px;
  font: 600 12px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fh-muted);
}

.fh-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.fh-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px; border-radius: 12px; text-decoration: none;
  font: 700 14.5px/1 var(--font-body, Montserrat, system-ui, sans-serif);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.fh-btn__arrow { transition: transform .22s ease; }
.fh-btn:hover .fh-btn__arrow { transform: translateX(3px); }
.fh-btn--primary {
  background: linear-gradient(90deg, var(--fh-blue-deep) 0%, var(--fh-blue) 100%);
  color: #fff;
  box-shadow: 0 12px 34px -10px rgba(31, 111, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.fh-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -10px rgba(31, 111, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.fh-btn--ghost {
  background: rgba(255, 255, 255, .04); color: var(--fh-ink);
  border-color: rgba(255, 255, 255, .14);
}
.fh-btn--ghost:hover { background: rgba(255, 255, 255, .08); transform: translateY(-2px); }

.fh-btn:focus-visible, .fh-contact:focus-visible, .fh-nav a:focus-visible,
.fh-burger:focus-visible, .fh-drawer a:focus-visible {
  outline: 2px solid var(--fh-cyan); outline-offset: 3px;
}

/* ------------------- NOTIFICACOES DE VENDA --------------------- */
.fh-feed {
  position: relative; z-index: 6;
  width: min(408px, 100%); margin: 54px auto 0;
}
.fh-note {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center;
  gap: 13px; padding: 13px 15px; text-align: left;
  background: linear-gradient(180deg, rgba(23, 30, 41, .96), rgba(17, 22, 31, .96));
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 14px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .9);
  animation: fh-note-in .7s cubic-bezier(.22, 1, .36, 1) backwards,
             fh-note-float var(--fdur, 7.5s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + .7s);
}
.fh-note:nth-child(2) { --fdur: 8.3s; }
.fh-note:nth-child(3) { --fdur: 9.1s; }
/* leve sobreposicao: pilha de notificacoes, nao lista */
.fh-note + .fh-note { width: 94%; margin: -20px auto 0; position: relative; z-index: -1; }
.fh-note + .fh-note + .fh-note { width: 88%; z-index: -2; }
@keyframes fh-note-in {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
/* depois da entrada, uma flutuacao continua quase imperceptivel */
@keyframes fh-note-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -4px; }
}

/* --- variante com os PNGs transparentes de notificacao ------------
   usada automaticamente quando os arquivos estao em assets/notify/.
   As imagens entram inteiras: nada e recriado em HTML.               */
/* PNGs oficiais, usados inteiros: nada aqui recria o conteudo deles.
   Larguras decrescentes dao a perspectiva de pilha; a margem negativa
   e percentual da LARGURA (e assim que % de margem resolve), por isso
   -5% de 500px = 25px de sobreposicao. */
.fh-feed--shots { width: min(500px, 100%); display: block; }
.fh-shot {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 18px 34px rgba(0, 0, 0, .5));
  animation: fh-note-in .8s cubic-bezier(.22, 1, .36, 1) backwards,
             fh-note-float var(--fdur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s), calc(var(--delay, 0s) + .8s);
}
.fh-shot + .fh-shot { margin-top: -5%; }
.fh-shot:nth-child(2) { width: 94%; margin-left: auto; margin-right: auto; }
.fh-shot:nth-child(3) { width: 88%; margin-left: auto; margin-right: auto; }
.fh-note__ico {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: #0B0E14; border: 1px solid rgba(255, 255, 255, .08);
}
.fh-note__ico svg { width: 21px; height: 21px; }
.fh-note__ch {
  font: 700 9.5px/1 var(--font-mono, "JetBrains Mono", monospace);
  letter-spacing: .13em; text-transform: uppercase; color: var(--fh-muted);
}
.fh-note__ttl {
  margin-top: 4px;
  font: 600 13.5px/1.2 var(--font-body, Montserrat, system-ui, sans-serif);
  color: var(--fh-ink);
}
.fh-note__right { text-align: right; }
.fh-note__val {
  font: 700 14px/1 var(--font-display, Montserrat, system-ui, sans-serif);
  color: var(--fh-ink);
}
.fh-note__time {
  margin-top: 5px; display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  font: 500 10.5px/1 var(--font-mono, "JetBrains Mono", monospace); color: var(--fh-muted);
}
.fh-note__dot {
  width: 6px; height: 6px; border-radius: 50%; background: #12D18E;
  animation: fh-blink 2.6s ease-in-out infinite; animation-delay: var(--delay, 0s);
}
@keyframes fh-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(18, 209, 142, .5); }
  50%      { opacity: .55; box-shadow: 0 0 0 4px rgba(18, 209, 142, 0); }
}

/* ---------------- FAIXA DE INTEGRACOES (SO MOBILE) ---------------- */
/* Fica FORA das orbitas de proposito: num viewport estreito o texto e
   centralizado e toma quase toda a largura, entao um chip em orbita
   sempre cairia atras da subheadline. Aqui os canais aparecem numa
   fileira centralizada, sem titulo e sem competir com nada. */
.fh-strip { display: none; }
.fh-strip__chip {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: #12161D; border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .05);
  flex: 0 0 auto;
}
.fh-strip__chip svg, .fh-strip__chip img {
  width: 50%; height: 50%; display: block; object-fit: contain; max-width: none;
}

/* =========================== RESPONSIVO ========================= */
@media (max-width: 1399px) { .fh-hero { --field: .76; } }
@media (max-width: 1099px) { .fh-hero { --field: .74; } }
@media (max-width: 899px)  { .fh-hero { --field: .58; } }
@media (max-width: 1024px) {
  .fh-nav, .fh-contact { display: none; }
  .fh-burger { display: flex; }
  .fh-hero { min-height: 0; padding: calc(var(--fh-head-h) + 56px) 0 76px; }
}
@media (max-width: 720px) {
  /* mobile ganha composicao propria: menos icones, orbita menor,
     amplitude reduzida. Nao e a versao desktop espremida. */
  .fh-hero { padding: calc(var(--fh-head-h) + 40px) 0 60px; --field: .50; }
  .fh-orbit-field { opacity: .72; }
  .fh-hero h1 { max-width: 100%; }
  .fh-cta { flex-direction: column; align-items: stretch; }
  .fh-btn { justify-content: center; width: 100%; }
  .fh-feed { margin-top: 40px; width: 100%; }
  .fh-note { grid-template-columns: 34px 1fr auto; padding: 11px 13px; }
  .fh-note + .fh-note { width: 100%; margin: 10px 0 0; z-index: auto; }
  .fh-note + .fh-note + .fh-note { width: 100%; z-index: auto; }
}
/* orbitas externas saem no mobile: sobra o nucleo do ecossistema */
/* No tablet a coluna de texto ocupa quase toda a largura, entao a orbita
   INTERNA passaria por tras da subheadline. Quem fica e a media, que tem
   alcance maior e contorna o texto. Abaixo de 620px inverte: sobra so a
   interna, com as duas plataformas prioritarias. */
@media (max-width: 1099px) { .fh-orbit--far { display: none; } }
@media (max-width: 899px)  { .fh-orbit:not([class*="--"]) { display: none; } }
/* abaixo de 620px sobra so a orbita interna, com as prioritarias */
/* Abaixo de 620px os chips saem e ficam so as trilhas com os pulsos azuis.
   Nao e preferencia: num viewport de 375px o texto e centralizado e ocupa
   quase toda a largura, entao nao sobra flanco para um chip de 44px em
   angulo nenhum -- ele sempre cairia atras da subheadline. As trilhas e os
   streaks seguem legiveis por tras do texto porque sao linhas finas.
   O ecossistema, no mobile, quem comunica sao as 3 notificacoes. */
@media (max-width: 620px) {
  .fh-orbit { display: none; }
  .fh-hero { --field: .46; }
  .fh-orbit-field { opacity: .6; }
  /* os canais saem das orbitas e viram fileira, abaixo das notificacoes */
  .fh-strip {
    display: flex; justify-content: center; align-items: center;
    gap: 14px; flex-wrap: nowrap; margin: 30px auto 0;
  }
}
@media (max-width: 380px) { .fh-strip { gap: 10px; } .fh-strip__chip { width: 34px; height: 34px; } }
@media (max-width: 400px) { .fh-hero { --field: .26; } }

/* ===================== PREFERENCIA DE MOVIMENTO ================= */
@media (prefers-reduced-motion: reduce) {
  /* quem gira e o __spin; o __arm so guarda o angulo de repouso, por
     isso os icones continuam distribuidos pela orbita mesmo parados */
  .fh-orbit__spin, .fh-chip-spin, .fh-chip,
  .fh-orbits .streak, .fh-note, .fh-note__dot, .fh-shot {
    animation: none !important;
  }
  /* streaks param, mas ficam pousados sobre a trilha em vez de sumir */
  .fh-orbits .streak { stroke-dashoffset: 0; }
  .fh-orbits .streak--tail { opacity: .12; }
  .fh-orbits .streak--mid  { opacity: .28; }
  .fh-orbits .streak--head { opacity: .6; }
  .fh-shot { opacity: 1; transform: none; }
  .fh-note { opacity: 1; transform: none; }
  .fh-btn, .fh-contact, .fh-nav a::after, .fh-drawer, .fh-header { transition: none; }
}