@keyframes blobFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 60px) scale(1.08); }
    66% { transform: translate(50px, 30px) scale(0.95); }
  }
@keyframes blobFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(80px, -40px) scale(1.12); }
  }
@keyframes blobFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-60px, -50px) scale(0.9); }
    80% { transform: translate(40px, 70px) scale(1.05); }
  }
.wa-anim.in { opacity: 1; transform: none; }
    50% { background-position: 100% 50%; }
  }
.live-dot::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--ok); animation: ping 2s cubic-bezier(0,0,.2,1) infinite;
  }
.marquee-track { display: flex; gap: 56px; animation: marquee 32s linear infinite; width: max-content; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
    50% { cx: 14; }
  }
    50% { cx: 46; }
  }
    50% { cx: 10; }
  }
    50% { cx: 50; }
  }
.step-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: var(--accent-fg);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 14px; font-family: 'Fraunces', serif;
  }
.theme-nav-btn:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
@keyframes ping {
    0% { transform: scale(1); opacity: .8; }
    80%, 100% { transform: scale(2.4); opacity: 0; }
  }
.theme-panel {
    position: fixed; bottom: 86px; right: 24px; z-index: 100;
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 10px; min-width: 240px;
    box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--ink) 50%, transparent);
    display: none;
  }
.theme-panel.open { display: block; }
.theme-panel-header {
    padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--muted);
  }
@keyframes spin { to { transform: rotate(360deg); } }