/* =================================================
   Wyre motion graphics (hero + service cards)
   Everything inside a .mo panel is sized from --u,
   1/100 of a 5:4 stage that fits the panel.
   ================================================= */
.mo {
  position: relative;
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(80% 70% at 75% 20%, rgba(96, 165, 250, 0.28), transparent 60%),
    radial-gradient(rgba(0, 51, 102, 0.07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(160deg, #f4f8fd 0%, #dfe9f6 100%);
  color: #0f2a47;
  font-family: var(--_font-default);
}
.mo__stage {
  --u: calc(min(100cqw, 125cqh) / 100);
  position: relative;
  width: calc(var(--u) * 100);
  aspect-ratio: 5 / 4;
}
.mo__stage > * {
  position: absolute;
}
.mo svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Only animate while on screen (see how.js) */
.mo * {
  animation-play-state: paused !important;
}
.mo.is-playing * {
  animation-play-state: running !important;
}

/* Hero panel */
.mo--hero {
  border-radius: 18px;
}

/* Service card panels */
.services-stack__image:has(.mo) {
  padding: 0 2rem 2rem;
}
.services-stack__image .mo--panel {
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: var(--_radius-s);
}
@media only screen and (min-width: 768px) {
  .services-stack__image:has(.mo) {
    padding: 0;
  }
  .services-stack__image .mo--panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 48%;
    aspect-ratio: auto;
    border-radius: 0;
  }
}

/* Shared chip */
.mo-float,
.mo-switch__tag,
.mo-track__pin,
.mo-track__lead,
.mo-ai__chip {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3);
  border-radius: 99px;
  background: #fff;
  color: #003366;
  font-size: max(10px, calc(var(--u) * 3));
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 4) calc(var(--u) * -1.5) rgba(0, 30, 70, 0.45);
}

/* ---------- Tap and connect ---------- */
.mo-tap__phone {
  left: 52%;
  top: 6%;
  width: 30%;
  height: 88%;
  overflow: hidden;
  border-radius: calc(var(--u) * 5);
  background: linear-gradient(180deg, #13263f, #0a1628);
  box-shadow: 0 0 0 calc(var(--u) * 0.9) #1e293b, 0 calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * -3) rgba(0, 20, 50, 0.7);
}
.mo-tap__phone > * {
  position: absolute;
}
.mo-tap__notch {
  top: 3%;
  left: 50%;
  width: 30%;
  height: 2.4%;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
}
.mo-tap__glow {
  left: -40%;
  top: -30%;
  width: 180%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.9) 0%, rgba(96, 165, 250, 0.25) 35%, transparent 65%);
  opacity: 0;
  animation: mo-tap-glow 5s ease-out infinite;
}
.mo-tap__ring {
  left: 28%;
  top: 8%;
  width: 44%;
  aspect-ratio: 1;
  border: calc(var(--u) * 0.5) solid rgba(191, 219, 254, 0.95);
  border-radius: 50%;
  opacity: 0;
  animation: mo-tap-ring 5s ease-out infinite;
}
.mo-tap__ring--2 { animation-delay: 0.3s; }
.mo-tap__ring--3 { animation-delay: 0.6s; }
.mo-tap__pop {
  left: 7%;
  right: 7%;
  bottom: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.8);
  padding: calc(var(--u) * 2.4) calc(var(--u) * 1.4) calc(var(--u) * 1.8);
  border-radius: calc(var(--u) * 3);
  background: #fff;
  color: #0f2a47;
  text-align: center;
  line-height: 1.15;
  box-shadow: 0 calc(var(--u) * -1.5) calc(var(--u) * 5) calc(var(--u) * -1) rgba(96, 165, 250, 0.8);
  transform: translateY(130%);
  animation: mo-tap-pop 5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.mo-tap__avatar {
  width: calc(var(--u) * 7);
  height: calc(var(--u) * 7);
  border-radius: 50%;
  background: linear-gradient(135deg, #60a5fa, #003366);
  box-shadow: 0 0 0 calc(var(--u) * 0.6) #dbeafe;
}
.mo-tap__pop b {
  font-size: max(9px, calc(var(--u) * 2.6));
  font-weight: 700;
}
.mo-tap__pop small {
  max-width: 100%;
  overflow: hidden;
  font-size: max(7px, calc(var(--u) * 1.8));
  color: #64748b;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mo-tap__btn {
  position: relative;
  width: 100%;
  height: calc(var(--u) * 5);
  min-height: 16px;
  margin-top: calc(var(--u) * 0.6);
  border-radius: 99px;
  background: #0a1628;
  color: #fff;
  font-size: max(8px, calc(var(--u) * 2));
  font-weight: 700;
  animation: mo-tap-btn 5s ease infinite;
}
.mo-tap__btn > span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 0.6);
  white-space: nowrap;
}
.mo-tap__btn svg { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); stroke-width: 3.2; }
.mo-tap__btn-a { animation: mo-tap-btn-a 5s ease infinite; }
.mo-tap__btn-b { opacity: 0; animation: mo-tap-btn-b 5s ease infinite; }
.mo-tap__card {
  left: 6%;
  top: 60%;
  width: 36%;
  aspect-ratio: 1.586;
  border-radius: calc(var(--u) * 2.6);
  background: linear-gradient(135deg, #1a6fc4 0%, #0b4f96 45%, #003366 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.45), 0 calc(var(--u) * 3) calc(var(--u) * 5) calc(var(--u) * -2) rgba(0, 20, 50, 0.8);
  z-index: 2;
  animation: mo-tap-card 5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
.mo-tap__card img {
  position: absolute;
  left: 9%;
  top: 13%;
  width: 26%;
}
.mo-tap__nfc {
  position: absolute;
  right: 8%;
  top: 11%;
  width: calc(var(--u) * 4.4);
  height: calc(var(--u) * 4.4);
  color: rgba(255, 255, 255, 0.85);
}
.mo-tap__nfc svg { width: 100%; height: 100%; }
.mo-tap__chip {
  position: absolute;
  left: 9%;
  bottom: 16%;
  width: 16%;
  height: 22%;
  border-radius: calc(var(--u) * 0.8);
  background: linear-gradient(135deg, #f4dd98, #c9a24d 50%, #f0d68c);
}
/* Hero: a slightly smaller stage, pushed left so the badges have room on the right */
.mo--hero > * {
  --u: calc(min(80cqw, 110cqh) / 100);
}
.mo--hero > .mo-float {
  position: absolute;
  opacity: 0;
  animation: mo-float-in 5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.mo-float--1 { left: 4%; top: 8%; animation-delay: 0.2s !important; }
.mo-float--2 { right: 4%; top: 30%; animation-delay: 0.9s !important; }
.mo-float--3 { right: 6%; top: 60%; animation-delay: 1.8s !important; }
@container (aspect-ratio >= 1.45) {
  .mo--hero > .mo__stage {
    justify-self: start;
    margin-left: 5cqw;
  }
}
/* Tall phone-sized hero: use the full width */
@container (aspect-ratio < 1) {
  .mo--hero > * {
    --u: calc(min(100cqw, 125cqh) / 100);
  }
}
@container (aspect-ratio < 1.45) {
  .mo-float--2,
  .mo-float--3 {
    display: none;
  }
}

@keyframes mo-tap-card {
  0% { left: 6%; top: 60%; transform: rotate(-14deg); opacity: 0; }
  8% { opacity: 1; }
  28% { left: 36%; top: 10%; transform: rotate(-6deg); }
  32% { left: 37%; top: 12%; transform: rotate(-6deg) scale(0.97); }
  36%, 82% { left: 36%; top: 10%; transform: rotate(-6deg); opacity: 1; }
  96%, 100% { left: 6%; top: 60%; transform: rotate(-14deg); opacity: 0; }
}
@keyframes mo-tap-glow {
  0%, 30% { opacity: 0; transform: scale(0.6); }
  38% { opacity: 1; transform: scale(1); }
  70% { opacity: 0.45; }
  92%, 100% { opacity: 0; }
}
@keyframes mo-tap-ring {
  0%, 31% { opacity: 0; transform: scale(0.3); }
  33% { opacity: 1; }
  55%, 100% { opacity: 0; transform: scale(2.4); }
}
@keyframes mo-tap-pop {
  0%, 38% { transform: translateY(130%); }
  48%, 88% { transform: translateY(0); }
  98%, 100% { transform: translateY(130%); }
}
@keyframes mo-tap-btn {
  0%, 62% { background: #0a1628; transform: scale(1); }
  65% { transform: scale(0.94); }
  69%, 100% { background: #22c55e; transform: scale(1); }
}
@keyframes mo-tap-btn-a { 0%, 64% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes mo-tap-btn-b { 0%, 65% { opacity: 0; transform: translateY(40%); } 71%, 100% { opacity: 1; transform: none; } }
@keyframes mo-float-in {
  0%, 30% { opacity: 0; transform: translateY(20%) scale(0.8); }
  40%, 85% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-20%); }
}

/* ---------- Your card, your style ---------- */
.mo-style__card {
  left: 15%;
  top: 10%;
  width: 70%;
  aspect-ratio: 1.586;
  transform-style: preserve-3d;
  animation: mo-swing 6s ease-in-out infinite;
}
.mo-style__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: calc(var(--u) * 3.6);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 calc(var(--u) * 4) calc(var(--u) * 7) calc(var(--u) * -3) rgba(0, 20, 50, 0.6);
  opacity: 0;
  animation: mo-face 8s ease infinite;
}
.mo-style__face img {
  position: absolute;
  left: 8%;
  top: 12%;
  width: 16%;
}
.mo-style__face b {
  position: absolute;
  left: 8%;
  bottom: 12%;
  font-size: max(11px, calc(var(--u) * 4.4));
  font-weight: 700;
}
.mo-style__face i {
  position: absolute;
  right: 7%;
  top: 11%;
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  opacity: 0.8;
}
.mo-style__face i svg { width: 100%; height: 100%; }
.mo-style__face--paper {
  background:
    radial-gradient(rgba(120, 95, 60, 0.12) 1px, transparent 1.4px) 0 0 / 7px 7px,
    linear-gradient(135deg, #fbf7ef, #efe6d6);
  color: #003366;
}
.mo-style__face--wood {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.15)),
    repeating-linear-gradient(100deg, #a4693a 0 6px, #b87c48 6px 11px, #8f5a30 11px 15px, #a86d3c 15px 22px);
  color: #fff;
}
.mo-style__face--metal {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.6) 0%, transparent 40%, rgba(255, 255, 255, 0.35) 60%, transparent 80%),
    repeating-linear-gradient(90deg, #d9dde3 0 1px, #c3c8d0 1px 2px);
  color: #0f2a47;
}
.mo-style__face--navy {
  background: linear-gradient(135deg, #1a6fc4 0%, #0b4f96 45%, #003366 100%);
  color: #fff;
}
.mo-style__face--paper { animation-delay: 0s; }
.mo-style__face--wood { animation-delay: -6s; }
.mo-style__face--metal { animation-delay: -4s; }
.mo-style__face--navy { animation-delay: -2s; }
.mo-style__pills {
  left: 0;
  right: 0;
  top: 78%;
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 1.6);
}
.mo-style__pill {
  padding: calc(var(--u) * 1.4) calc(var(--u) * 3);
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.8);
  color: #0f2a47;
  font-size: max(9px, calc(var(--u) * 2.8));
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(0, 51, 102, 0.12);
  animation: mo-pill 8s ease infinite;
}
.mo-style__pill--1 { animation-delay: 0s; }
.mo-style__pill--2 { animation-delay: -6s; }
.mo-style__pill--3 { animation-delay: -4s; }
.mo-style__pill--4 { animation-delay: -2s; }
@keyframes mo-face {
  0%, 22% { opacity: 1; transform: none; }
  26% { opacity: 0; transform: scale(0.98); }
  96% { opacity: 0; transform: scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes mo-pill {
  0%, 22% { background: #003366; color: #fff; transform: scale(1.08); }
  26%, 96% { background: rgba(255, 255, 255, 0.8); color: #0f2a47; transform: scale(1); }
  100% { background: #003366; color: #fff; transform: scale(1.08); }
}
@keyframes mo-swing {
  0%, 100% { transform: perspective(900px) rotateY(-12deg) rotateX(4deg) translateY(0); }
  50% { transform: perspective(900px) rotateY(12deg) rotateX(-2deg) translateY(-3%); }
}

/* ---------- Switch profiles ---------- */
.mo-switch__phone {
  left: 31%;
  top: 3%;
  width: 38%;
  height: 94%;
  overflow: hidden;
  border-radius: calc(var(--u) * 5);
  background: #f5f8fd;
  box-shadow: 0 0 0 calc(var(--u) * 0.9) #0a1628, 0 calc(var(--u) * 4) calc(var(--u) * 8) calc(var(--u) * -3) rgba(0, 20, 50, 0.6);
}
.mo-switch__toggle {
  position: absolute;
  top: 4%;
  left: 8%;
  right: 8%;
  height: 9%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  border-radius: 99px;
  background: #e2e8f0;
  font-size: max(8px, calc(var(--u) * 2.3));
  font-weight: 700;
  text-align: center;
  z-index: 2;
}
.mo-switch__toggle span:not(.mo-switch__knob) {
  position: relative;
  z-index: 1;
}
.mo-switch__knob {
  position: absolute;
  left: 3%;
  top: 10%;
  width: 47%;
  height: 80%;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 20, 50, 0.25);
  animation: mo-knob 6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.mo-switch__view {
  position: absolute;
  inset: 0;
  animation: mo-view-a 6s ease infinite;
}
.mo-switch__view--work {
  animation-name: mo-view-b;
}
.mo-switch__view > * {
  position: absolute;
}
.mo-switch__cover {
  left: 0;
  right: 0;
  top: 0;
  height: 32%;
  background: linear-gradient(135deg, #f472b6, #fb923c);
}
.mo-switch__cover--work {
  background: linear-gradient(135deg, #1a6fc4, #003366);
}
.mo-switch__avatar,
.mo-switch__logo {
  left: 32%;
  top: 22%;
  width: 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fde2c8 0 22%, transparent 23%),
    radial-gradient(circle at 50% 100%, #7c2d12 0 42%, transparent 43%),
    linear-gradient(135deg, #fed7aa, #fdba74);
  box-shadow: 0 0 0 calc(var(--u) * 0.8) #f5f8fd;
}
.mo-switch__logo {
  display: grid;
  place-items: center;
  border-radius: 28%;
  background: linear-gradient(135deg, #0b4f96, #003366);
}
.mo-switch__logo img { width: 58%; }
.mo-switch__bar {
  left: 20%;
  top: 52%;
  width: 60%;
  height: 3.4%;
  border-radius: 99px;
  background: #0f2a47;
}
.mo-switch__bar--short {
  left: 30%;
  top: 58%;
  width: 40%;
  height: 2.6%;
  background: #94a3b8;
}
.mo-switch__icons {
  left: 14%;
  right: 14%;
  top: 67%;
  display: flex;
  justify-content: space-between;
}
.mo-switch__icons i {
  width: calc(var(--u) * 6);
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 1.6);
}
.mo-switch__tag--1 { left: 0%; top: 30%; animation: mo-tag-a 6s ease infinite; }
.mo-switch__tag--2 { left: 72%; top: 58%; animation: mo-tag-b 6s ease infinite; }
@keyframes mo-knob {
  0%, 42% { transform: translateX(0); }
  50%, 92% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes mo-view-a {
  0%, 44% { opacity: 1; transform: none; }
  50%, 94% { opacity: 0; transform: translateX(-8%); }
  100% { opacity: 1; transform: none; }
}
@keyframes mo-view-b {
  0%, 44% { opacity: 0; transform: translateX(8%); }
  50%, 94% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(8%); }
}
@keyframes mo-tag-a {
  0%, 4% { opacity: 0; transform: scale(0.7); }
  10%, 42% { opacity: 1; transform: none; }
  48%, 100% { opacity: 0; transform: scale(0.7); }
}
@keyframes mo-tag-b {
  0%, 52% { opacity: 0; transform: scale(0.7); }
  58%, 92% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: scale(0.7); }
}

/* ---------- Track performance ---------- */
.mo-track__panel {
  left: 5%;
  top: 7%;
  width: 70%;
  height: 86%;
  border-radius: calc(var(--u) * 4);
  background: #fff;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) calc(var(--u) * -3) rgba(0, 30, 70, 0.45);
}
.mo-track__panel > * {
  position: absolute;
}
.mo-track__label {
  left: 8%;
  top: 8%;
  font-size: max(9px, calc(var(--u) * 2.7));
  font-weight: 600;
  color: #64748b;
}
.mo-track__num {
  left: 8%;
  top: 16%;
  height: calc(var(--u) * 10);
  font-size: max(22px, calc(var(--u) * 9));
  font-weight: 800;
  line-height: 1;
  color: #0f2a47;
}
.mo-track__num span {
  position: absolute;
  left: 0;
  top: 0;
}
.mo-track__n1 { animation: mo-num-a 6s ease infinite; }
.mo-track__n2 { opacity: 0; animation: mo-num-b 6s ease infinite; }
.mo-track__up {
  left: 50%;
  top: 20%;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 2);
  border-radius: 99px;
  background: #dcfce7;
  color: #15803d;
  font-size: max(9px, calc(var(--u) * 2.5));
  font-weight: 700;
  animation: mo-pop-in 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
}
.mo-track__bars {
  left: 8%;
  right: 8%;
  bottom: 16%;
  height: 42%;
  display: flex;
  align-items: flex-end;
  gap: 5%;
}
.mo-track__bars i {
  flex: 1;
  height: var(--h);
  border-radius: calc(var(--u) * 1) calc(var(--u) * 1) calc(var(--u) * 0.4) calc(var(--u) * 0.4);
  background: linear-gradient(180deg, #60a5fa, #003366);
  transform-origin: bottom;
  animation: mo-bar 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  animation-delay: var(--d);
}
.mo-track__days {
  left: 8%;
  right: 8%;
  bottom: 6%;
  display: flex;
  gap: 5%;
  font-size: max(8px, calc(var(--u) * 2.2));
  font-weight: 600;
  color: #94a3b8;
}
.mo-track__days span {
  flex: 1;
  text-align: center;
}
.mo-track__pin {
  left: 58%;
  top: 14%;
  animation: mo-pop-in 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  animation-delay: 0.4s;
}
.mo-track__pin svg {
  width: calc(var(--u) * 3.4);
  height: calc(var(--u) * 3.4);
  color: #ef4444;
}
.mo-track__lead {
  left: 60%;
  top: 70%;
  animation: mo-pop-in 6s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  animation-delay: 1s;
}
.mo-track__dot {
  width: calc(var(--u) * 1.8);
  height: calc(var(--u) * 1.8);
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 calc(var(--u) * 0.8) rgba(34, 197, 94, 0.25);
}
@keyframes mo-bar {
  0% { transform: scaleY(0); }
  18%, 88% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes mo-num-a { 0%, 50% { opacity: 1; transform: none; } 56%, 94% { opacity: 0; transform: translateY(-30%); } 100% { opacity: 1; transform: none; } }
@keyframes mo-num-b { 0%, 50% { opacity: 0; transform: translateY(30%); } 56%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes mo-pop-in {
  0%, 30% { opacity: 0; transform: scale(0.6); }
  38%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(0.8); }
}

/* ---------- AI insights ---------- */
.mo-ai__head {
  left: 8%;
  top: 8%;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2);
  font-size: max(11px, calc(var(--u) * 3.6));
  color: #0f2a47;
}
.mo-ai__head b { font-weight: 700; }
.mo-ai__spark {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 8);
  height: calc(var(--u) * 8);
  border-radius: 50%;
  background: linear-gradient(135deg, #8b5cf6, #3b82f6);
  color: #fff;
  box-shadow: 0 0 0 calc(var(--u) * 1) rgba(139, 92, 246, 0.2);
  animation: mo-spark 3s ease-in-out infinite;
}
.mo-ai__spark svg { width: 55%; height: 55%; }
.mo-ai__bubble {
  left: 8%;
  top: 24%;
  width: 84%;
  min-height: 34%;
  padding: calc(var(--u) * 3.6) calc(var(--u) * 4);
  border-radius: calc(var(--u) * 1.2) calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 4);
  background: #fff;
  box-shadow: 0 calc(var(--u) * 3) calc(var(--u) * 8) calc(var(--u) * -3) rgba(0, 30, 70, 0.4);
}
.mo-ai__typing {
  position: absolute;
  left: calc(var(--u) * 4);
  top: calc(var(--u) * 4.5);
  display: flex;
  gap: calc(var(--u) * 1);
  animation: mo-typing-box 7s ease infinite;
}
.mo-ai__typing i {
  width: calc(var(--u) * 1.8);
  height: calc(var(--u) * 1.8);
  border-radius: 50%;
  background: #94a3b8;
  animation: mo-dot 1s ease-in-out infinite;
}
.mo-ai__typing i:nth-child(2) { animation-delay: 0.15s; }
.mo-ai__typing i:nth-child(3) { animation-delay: 0.3s; }
.mo-ai__text {
  margin: 0;
  font-size: max(11px, calc(var(--u) * 3.3));
  line-height: 1.45;
  color: #1e293b;
  animation: mo-text 7s ease infinite;
}
.mo-ai__text b {
  color: #003366;
  font-weight: 700;
}
.mo-ai__chip--1 {
  left: 8%;
  top: 72%;
  background: #fff1e6;
  color: #c2410c;
  animation: mo-chip 7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  animation-delay: 0s;
}
.mo-ai__chip--2 {
  left: 48%;
  top: 72%;
  background: #003366;
  color: #fff;
  animation: mo-chip 7s cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  animation-delay: 0.35s;
}
@keyframes mo-spark {
  0%, 100% { transform: scale(1) rotate(0); }
  50% { transform: scale(1.08) rotate(12deg); }
}
@keyframes mo-dot {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(-40%); opacity: 1; }
}
@keyframes mo-typing-box {
  0%, 24% { opacity: 1; }
  28%, 96% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes mo-text {
  0%, 26% { opacity: 0; transform: translateY(6%); filter: blur(3px); }
  34%, 92% { opacity: 1; transform: none; filter: none; }
  98%, 100% { opacity: 0; }
}
@keyframes mo-chip {
  0%, 44% { opacity: 0; transform: scale(0.6); }
  52%, 90% { opacity: 1; transform: none; }
  97%, 100% { opacity: 0; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .mo *,
  .mo.is-playing * {
    animation: none !important;
  }
  .mo-tap__pop { transform: none; }
  .mo-tap__card { left: 36%; top: 10%; transform: rotate(-6deg); }
  .mo-style__face--navy,
  .mo-switch__view--personal,
  .mo-ai__text,
  .mo-float,
  .mo-switch__tag--1 { opacity: 1; }
  .mo-ai__typing { display: none; }
}