:root {
  --bg: #040711;
  --panel: rgba(9, 18, 38, 0.68);
  --line: rgba(72, 232, 255, 0.74);
  --text: #eef8ff;
  --muted: rgba(238, 248, 255, 0.66);
  --cyan: #43e7ff;
  --blue: #4c82ff;
  --violet: #9d6dff;
  --green: #5dffb1;
  --danger: #ffcf5d;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  overflow: hidden;
  color: var(--text);
  background: radial-gradient(circle at 50% 50%, #0b1630 0%, var(--bg) 58%, #02040a 100%);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  perspective: 1200px;
  isolation: isolate;
}

.ambient {
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 999px;
  filter: blur(70px);
  opacity: .35;
  z-index: -2;
}

.ambient-one { top: -12vw; left: -10vw; background: var(--blue); animation: floatGlow 9s ease-in-out infinite alternate; }
.ambient-two { right: -14vw; bottom: -16vw; background: var(--violet); animation: floatGlow 11s ease-in-out infinite alternate-reverse; }

.grid-floor {
  position: absolute;
  inset: auto -20% -42% -20%;
  height: 72%;
  background-image:
    linear-gradient(rgba(67,231,255,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(67,231,255,.14) 1px, transparent 1px);
  background-size: 70px 70px;
  transform: rotateX(65deg);
  transform-origin: center top;
  opacity: .32;
  mask-image: linear-gradient(to top, black, transparent 76%);
}

.brand-panel {
  position: absolute;
  left: clamp(18px, 4vw, 58px);
  top: clamp(18px, 4vw, 46px);
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 10;
}

.brand-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(67,231,255,.55);
  border-radius: 17px;
  background: linear-gradient(145deg, rgba(67,231,255,.22), rgba(157,109,255,.13));
  box-shadow: 0 0 36px rgba(67,231,255,.22), inset 0 0 24px rgba(255,255,255,.06);
  font-weight: 800;
  font-size: 26px;
}

h1 { margin: 0; letter-spacing: .16em; font-size: clamp(20px, 2vw, 30px); line-height: 1; }
.brand-panel p { margin: 7px 0 0; color: var(--muted); font-size: 14px; letter-spacing: .08em; }

.pipeline {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1560px, calc(100vw - 96px));
  height: min(600px, 62vh);
  translate: -50% -50%;
  transform-style: preserve-3d;
  transform: rotateX(7deg) rotateY(-5deg);
  transform-origin: center center;
}

.flow-line {
  position: absolute;
  left: 9%;
  right: 8%;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), var(--cyan), transparent);
  box-shadow: 0 0 22px var(--cyan);
  transform: translateZ(-80px);
}

.signal {
  position: absolute;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 16px #fff, 0 0 34px var(--cyan), 0 0 70px var(--violet);
  animation: pulseTravel 5.4s linear infinite;
  transform: translateZ(30px);
}
.signal-two { animation-delay: 1.8s; }
.signal-three { animation-delay: 3.6s; }

.node, .engine-node {
  position: absolute;
  transform-style: preserve-3d;
}

.node-label, .engine-label {
  position: absolute;
  left: 50%;
  top: -42px;
  translate: -50% 0;
  color: rgba(238,248,255,.92);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(4,7,17,.44);
  backdrop-filter: blur(10px);
}

.strategy-node { left: 2%; top: 35%; width: 240px; height: 220px; }
.strategy-node > .node-label { top: -78px; }
.deploy-node { left: 25%; top: 38%; width: 180px; height: 180px; }
.engine-node { left: 46%; top: 48%; width: clamp(360px, 28vw, 520px); height: clamp(360px, 28vw, 520px); translate: -50% -50%; }
.broker-node { left: 69%; top: 31%; width: clamp(240px, 18vw, 300px); height: 280px; }
.exchange-node { left: 93%; top: 42%; width: 150px; height: 150px; translate: -50% -50%; }

.code-card {
  position: absolute;
  width: 220px;
  min-height: 142px;
  padding: 16px;
  border: 1px solid rgba(67,231,255,.34);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(5,12,28,.88), rgba(20,37,75,.72));
  box-shadow: 0 28px 70px rgba(0,0,0,.38), 0 0 42px rgba(67,231,255,.14);
  transform: rotateY(-6deg) rotateX(4deg) translateZ(40px);
  animation: cardHover 4.5s ease-in-out infinite;
}

.code-top { display: flex; gap: 7px; margin-bottom: 16px; }
.code-top span { width: 9px; height: 9px; border-radius: 99px; background: var(--cyan); opacity: .9; }
pre { margin: 0; white-space: pre-wrap; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.7; color: rgba(238,248,255,.84); }

.cube { display: none; }

.portal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}
.portal-ring {
  position: absolute;
  width: 142px;
  height: 142px;
  border: 2px solid rgba(67,231,255,.62);
  clip-path: polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0 50%);
  box-shadow: 0 0 28px rgba(67,231,255,.26), inset 0 0 22px rgba(67,231,255,.16);
}
.ring-a { animation: spin 8s linear infinite; }
.ring-b { width: 104px; height: 104px; border-color: rgba(157,109,255,.64); animation: spin 6s linear infinite reverse; }
.portal-core {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--cyan) 35%, rgba(67,231,255,.08) 70%);
  box-shadow: 0 0 36px var(--cyan), 0 0 80px rgba(157,109,255,.36);
}
.scan-line {
  position: absolute;
  width: 164px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: scan 2.4s ease-in-out infinite;
}

.engine-wrap { position: absolute; inset: 0; transform-style: preserve-3d; }
.engine-core { position: absolute; inset: 17%; transform-style: preserve-3d; animation: engineFloat 5.8s ease-in-out infinite; }
.nuraflash-logo-core {
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: logoCoreFloat 5.8s ease-in-out infinite, logoCoreTurn 18s linear infinite;
  filter: drop-shadow(0 0 22px rgba(67,231,255,.6)) drop-shadow(0 0 46px rgba(157,109,255,.42));
}

.nuraflash-logo-core img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: translateZ(58px);
  animation: logoFlash 3.2s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
  /* Hide broken-image icon if asset missing */
  color: transparent;
}

.core-ring {
  position: absolute; inset: 8%; border-radius: 50%; border: 2px solid rgba(67,231,255,.48); box-shadow: 0 0 25px rgba(67,231,255,.16);
}
.core-ring-a { animation: orbit3d 9s linear infinite; }
.core-ring-b { transform: rotateX(70deg); border-color: rgba(157,109,255,.5); animation: orbit3d 7s linear infinite reverse; }
.core-ring-c { transform: rotateY(70deg); border-color: rgba(93,255,177,.42); animation: orbit3d 10s linear infinite; }

.security-shield {
  position: absolute; inset: 8%; border-radius: 50%;
  border: 2px solid rgba(93,255,177,.42);
  background: radial-gradient(circle, transparent 57%, rgba(93,255,177,.06) 58%, transparent 70%);
  box-shadow: 0 0 34px rgba(93,255,177,.28), inset 0 0 38px rgba(93,255,177,.12);
  animation: shieldPulse 2.8s ease-in-out infinite;
}

.risk-orbit {
  position: absolute; inset: 2%; border-radius: 50%; border: 1px dashed rgba(255,207,93,.42);
}
.risk-orbit span { position: absolute; top: 50%; right: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 22px var(--danger); }
.orbit-one { animation: spin 11s linear infinite; }
.orbit-two { inset: 13%; transform: rotateX(68deg); animation: spin 8s linear infinite reverse; }

.ai-orbit { position: absolute; inset: 0; animation: spin 16s linear infinite; }
.ai-orbit i {
  position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 18px var(--violet);
}
.ai-orbit i:nth-child(1) { left: 49%; top: 0; }
.ai-orbit i:nth-child(2) { right: 8%; top: 20%; }
.ai-orbit i:nth-child(3) { right: 8%; bottom: 20%; }
.ai-orbit i:nth-child(4) { left: 49%; bottom: 0; }
.ai-orbit i:nth-child(5) { left: 8%; bottom: 20%; }
.ai-orbit i:nth-child(6) { left: 8%; top: 20%; }

.market-stream { position: absolute; left: 50%; top: 50%; width: 2px; height: 46%; background: linear-gradient(transparent, rgba(255,255,255,.8), transparent); transform-origin: center top; opacity: .7; }
.stream-a { transform: rotate(35deg); animation: stream 2.2s ease-in-out infinite; }
.stream-b { transform: rotate(155deg); animation: stream 2.7s ease-in-out infinite .3s; }
.stream-c { transform: rotate(278deg); animation: stream 2.4s ease-in-out infinite .6s; }

.lock { position: absolute; color: var(--green); font-size: 22px; text-shadow: 0 0 16px var(--green); opacity: .8; }
.lock-a { left: 12%; top: 26%; animation: floatSmall 4s ease-in-out infinite; }
.lock-b { right: 10%; top: 31%; animation: floatSmall 3.3s ease-in-out infinite reverse; }
.lock-c { left: 28%; bottom: 10%; animation: floatSmall 4.3s ease-in-out infinite; }

.broker-network { position: absolute; inset: 0; }
.broker-network svg { position: absolute; inset: 8px 0 0 0; width: 100%; height: 100%; overflow: visible; }
.broker-network path { fill: none; stroke: rgba(67,231,255,.36); stroke-width: 2; stroke-dasharray: 6 10; animation: dash 3s linear infinite; }
.broker-hub {
  position: absolute; left: 28px; top: 120px; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--cyan), transparent 72%);
  box-shadow: 0 0 34px var(--cyan);
}
.broker {
  position: absolute; width: 84px; height: 44px; display: grid; place-items: center;
  border-radius: 14px; border: 1px solid rgba(67,231,255,.36);
  background: linear-gradient(145deg, rgba(8,17,38,.86), rgba(18,34,72,.56));
  box-shadow: 0 0 24px rgba(67,231,255,.12);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.broker-a { right: 0; top: 26px; }
.broker-b { right: 0; top: 116px; }
.broker-c { right: 0; bottom: 24px; }
.broker-d { right: 42px; bottom: 84px; }


.exchange-core {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(157,109,255,.38);
  background: radial-gradient(circle, rgba(157,109,255,.18), rgba(67,231,255,.05) 62%, transparent 70%);
  box-shadow: 0 0 36px rgba(157,109,255,.24), inset 0 0 28px rgba(67,231,255,.08);
}
.exchange-ring {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px solid rgba(67,231,255,.38);
  box-shadow: 0 0 24px rgba(67,231,255,.16);
}
.exchange-ring-a { animation: spin 9s linear infinite; }
.exchange-ring-b { inset: 26%; border-color: rgba(157,109,255,.58); animation: spin 7s linear infinite reverse; }
.exchange-icon {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(238,248,255,.76);
  box-shadow: 0 0 26px var(--violet), 0 0 42px var(--cyan), inset 0 0 18px rgba(67,231,255,.16);
}
.exchange-icon::before,
.exchange-icon::after,
.exchange-icon span {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  border: 1px solid rgba(238,248,255,.72);
  border-radius: 999px;
}
.exchange-icon::before { width: 72px; height: 2px; border-left: 0; border-right: 0; }
.exchange-icon::after { width: 2px; height: 72px; border-top: 0; border-bottom: 0; }
.exchange-icon span { width: 18px; height: 18px; background: radial-gradient(circle, #fff, var(--violet), transparent 76%); box-shadow: 0 0 28px var(--violet); }
.broker-node::after {
  content: '';
  position: absolute;
  right: -25%;
  top: 49%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), rgba(67,231,255,.8), transparent);
  box-shadow: 0 0 18px var(--cyan);
}

.micro-labels {
  position: absolute;
  left: 50%; bottom: 82px; translate: -50% 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  width: min(92vw, 860px); z-index: 10;
}
.micro-labels span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  border: 1px solid rgba(67,231,255,.18);
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(4,7,17,.48), rgba(14,28,58,.36));
  color: rgba(238,248,255,.78);
  backdrop-filter: blur(12px);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 0 24px rgba(67,231,255,.06);
  animation: capabilityGlow 5.4s ease-in-out infinite;
}
.micro-labels span:nth-child(2) { animation-delay: 1.35s; }
.micro-labels span:nth-child(3) { animation-delay: 2.7s; }
.micro-labels span:nth-child(4) { animation-delay: 4.05s; }
.micro-labels b {
  color: var(--cyan);
  font-size: 15px;
  font-weight: 700;
  text-shadow: 0 0 16px var(--cyan);
}

footer {
  position: absolute; left: clamp(18px, 4vw, 58px); right: clamp(18px, 4vw, 58px); bottom: 26px;
  display: flex; justify-content: space-between; gap: 16px; color: rgba(238,248,255,.56); font-size: 13px; z-index: 10;
}
footer a { color: rgba(238,248,255,.78); text-decoration: none; }
footer a:hover { color: var(--cyan); }

@keyframes pulseTravel { from { left: 8%; opacity: 0; } 8%, 92% { opacity: 1; } to { left: 94%; opacity: 0; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes dash { to { stroke-dashoffset: -64; } }
@keyframes cardHover { 50% { transform: rotateY(-4deg) rotateX(6deg) translateY(-13px) translateZ(55px); } }
@keyframes cubePulse { 50% { scale: 1.15; box-shadow: 0 0 42px rgba(93,255,177,.75); } }
@keyframes scan { 0%,100% { transform: translateY(-70px) rotate(90deg); opacity: .2; } 50% { transform: translateY(70px) rotate(90deg); opacity: 1; } }
@keyframes engineFloat { 50% { transform: translateY(-13px) rotateZ(4deg); } }
@keyframes logoCoreFloat { 50% { translate: 0 -8px; } }
@keyframes logoCoreTurn { to { rotate: y 360deg; } }
@keyframes starFlash { 50% { scale: 1.14; filter: brightness(1.35); } }
@keyframes orbit3d { to { rotate: 360deg; } }
@keyframes shieldPulse { 50% { scale: 1.04; box-shadow: 0 0 54px rgba(93,255,177,.42), inset 0 0 58px rgba(93,255,177,.18); } }
@keyframes stream { 50% { opacity: 1; height: 58%; } }
@keyframes floatSmall { 50% { transform: translateY(-14px); opacity: 1; } }
@keyframes floatGlow { 50% { transform: translate3d(5vw, 2vh, 0) scale(1.08); } }
@keyframes capabilityGlow { 0%, 38%, 100% { border-color: rgba(67,231,255,.18); box-shadow: 0 0 24px rgba(67,231,255,.06); color: rgba(238,248,255,.72); } 12%, 24% { border-color: rgba(67,231,255,.48); box-shadow: 0 0 26px rgba(67,231,255,.18), inset 0 0 18px rgba(67,231,255,.07); color: rgba(238,248,255,.96); } }

@media (max-width: 1200px) {
  .pipeline {
    width: min(1180px, calc(100vw - 44px));
    height: 560px;
  }
  .engine-node { width: 400px; height: 400px; }
  .strategy-node { left: 0; }
  .deploy-node { left: 24%; }
  .broker-node { left: 68%; width: 260px; }
  .exchange-node { left: 93%; width: 130px; height: 130px; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE LAYOUT  (≤ 900px)
   Vertical stack: Create → Deploy → Engine → Hub → Brokers (split) → Exchange
   Desktop is 100% untouched above this line.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  body { overflow: auto; }

  .scene {
    min-height: 1600px;
    overflow: hidden;
  }

  /* Pipeline: centered vertical column */
  .pipeline {
    left: 50%;
    top: 130px;
    width: min(420px, calc(100vw - 32px));
    height: 1300px;
    translate: -50% 0;
    transform: none !important;
  }

  /* Vertical center beam — JS overlay draws it, keep CSS one hidden */
  .flow-line {
    left: 50%; right: auto;
    top: 80px; bottom: 80px;
    width: 3px; height: auto;
    background: linear-gradient(180deg, transparent, var(--cyan), var(--violet), var(--cyan), transparent);
  }

  /* CSS signals hidden — JS overlay handles them */
  .signal { left: calc(50% - 8px) !important; animation: pulseTravelVertical 5.4s linear infinite; }

  /* All nodes centered horizontally */
  .strategy-node,
  .deploy-node,
  .engine-node,
  .broker-node,
  .exchange-node {
    left: 50%;
    right: auto;
    translate: -50% 0;
  }

  /* Node vertical positions */
  .strategy-node  { top: 10px;  width: 240px; height: 190px; }

  /* Reset card 3D transform on mobile — prevents float-up overlap with label */
  .strategy-node {
    transform-style: flat;
  }
  .code-card {
    transform: rotateY(8deg) rotateX(2deg);
    animation: none;
  }

  /* Hide cube — causes black artifact above card */
  .cube { display: none; }
  .deploy-node    { top: 220px; width: 160px; height: 160px; }
  .engine-node    { top: 400px; width: min(340px, 88vw); height: min(340px, 88vw); }

  /* Broker node — hub at top center, brokers split left/right */
  .broker-node {
    top: 790px;
    width: min(360px, 94vw);
    height: 260px;
  }
  .broker-node::after  { display: none; }
  .broker-node::before { display: none; }

  /* Hub: center top of broker-node */
  .broker-hub {
    left: 50%;
    top: 14px;
    translate: -50% 0;
    z-index: 5;
  }

  /* Broker boxes: 2 left, 2 right */
  .broker {
    width: 96px;
    height: 42px;
    right: auto;
  }

  /* Left column */
  .broker-a { left: 4px;  top: 72px; }
  .broker-c { left: 4px;  top: 160px; }

  /* Right column */
  .broker-b { right: 4px; left: auto; top: 72px; }
  .broker-d { right: 4px; left: auto; top: 160px; }

  /* Connector stubs hidden — JS overlay draws dotted paths */
  .broker::before { display: none; }
  .broker::after  { display: none; }

  /* Hide old routing SVGs */
  .desktop-exchange-links { display: none; }
  .mobile-exchange-links  { display: none; }
  .broker-network svg     { display: none; }

  /* Exchange */
  .exchange-node {
    top: 1110px;
    width: 140px;
    height: 140px;
  }

  /* Labels / footer */
  .strategy-node > .node-label { top: -52px; }

  /* micro-labels: fixed bottom, 2x2 grid */
  .micro-labels {
    position: fixed;
    left: 50%;
    bottom: 14px;
    top: auto;
    right: auto;
    translate: -50% 0;
    width: min(96vw, 420px);
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;
    z-index: 30;
  }
  .micro-labels span {
    font-size: 10px;
    padding: 7px 12px;
    flex: 0 1 calc(50% - 8px);
    justify-content: center;
  }

  footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(to bottom, transparent, rgba(4,7,17,.88) 28%);
    backdrop-filter: blur(8px);
    z-index: 25;
  }

  /* Push micro-labels up so footer doesn't cover them */
  .micro-labels {
    bottom: 64px;
  }
}

/* ── Small phones (≤ 560px) ─────────────────────────────────── */
@media (max-width: 560px) {
  .brand-mark  { width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(145deg, rgba(67,231,255,.22), rgba(157,109,255,.13)); }
  h1           { font-size: 18px; }
  .brand-panel p { font-size: 12px; }

  .scene    { min-height: 1560px; }
  .pipeline { top: 120px; width: calc(100vw - 24px); height: 1280px; }

  .engine-node  { width: 300px; height: 300px; }
  .broker-node  { top: 760px; width: min(340px, 94vw); }

  .broker       { width: 86px; }
  .broker-a, .broker-c { left: 2px; }

  .exchange-node { top: 1080px; }

  footer {
    font-size: 11px;
    padding: 8px 12px;
  }
  .micro-labels span {
    font-size: 9px;
    padding: 6px 8px;
  }

  .micro-labels span { font-size: 10px; padding: 8px 10px; }
}

@keyframes pulseTravelVertical {
  from { top: 80px;   opacity: 0; }
  8%, 92% { opacity: 1; }
  to   { top: 1200px; opacity: 0; }
}

/* ── Desktop routing rules (min-width: 901px) — UNCHANGED ──── */
@media (min-width: 901px) {
  .desktop-exchange-links { display: none !important; }

  .broker-node {
    top: calc(50% - 139px);
  }

  .broker-hub {
    left: 28px;
    top: 120px;
    z-index: 5;
  }

  .broker-network .broker-routing-svg {
    position: absolute;
    left: 0;
    top: 8px;
    width: 215%;
    height: 100%;
    overflow: visible;
    z-index: 1;
    pointer-events: none;
  }

  .broker-network .broker-route-local {
    fill: none;
    stroke: rgba(67, 231, 255, .52);
    stroke-width: 2;
    stroke-dasharray: 7 11;
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px rgba(67, 231, 255, .45));
    animation: dash 3.2s linear infinite;
  }

  .broker-network .broker-pulse-local {
    fill: #fff;
    filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px rgba(67, 231, 255, .9));
  }

  .broker-hub,
  .broker {
    z-index: 5;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}