/* =====================================================================
   FLOW motion kit · patterns in the style of Magic UI / 21st.dev, written
   from scratch (no libraries, no third-party requests, no inline script).
   Loaded by the home, demo and studio pages (ES/EN) after styles.flow.css.
   Everything is prefixed `m-` (primitives) or `ai-` / `tour-` (sections).
   Rules: transform/opacity only for motion; nothing hides content without
   JS; prefers-reduced-motion = still and readable; [data-motion].is-paused
   freezes every animation inside (WCAG 2.2.2 pause control).
   ===================================================================== */

@property --m-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --m-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --m-glow: rgba(0, 100, 255, 0.14);
}
[data-theme="dark"] {
  --m-glow: rgba(84, 230, 236, 0.12);
}

/* ---------- Animated gradient text ---------- */
.m-gradient-text {
  background-image: linear-gradient(90deg, #0052d6, #0064ff 22%, #0a74b8 44%, #5b3fd6 66%, #0064ff 84%, #0052d6);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: m-gradient 9s linear infinite;
}
[data-theme="dark"] .m-gradient-text {
  background-image: linear-gradient(90deg, #8ab8ff, #54e6ec 22%, #a9b8ff 44%, #7fe8f0 66%, #8ab8ff 84%, #8ab8ff);
}

/* ---------- Shimmer button: a spark runs round the edge, a sheen sweeps across ---------- */
.btn.m-shimmer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(135deg, #0a6cff, #0052d6);
  box-shadow: 0 10px 28px rgba(0, 82, 214, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn.m-shimmer:hover {
  background: linear-gradient(135deg, #0064ff, #0047b8);
  box-shadow: 0 14px 34px rgba(0, 82, 214, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn.m-shimmer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--m-angle), transparent 0 72%, rgba(255, 255, 255, 0.95) 84%, rgba(127, 232, 240, 0.9) 90%, transparent 97%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: m-spin 3.2s linear infinite;
  pointer-events: none;
}
.btn.m-shimmer::after {
  animation: m-sheen 4.2s var(--m-ease) 1.2s infinite;
}
.btn-light.m-shimmer {
  background: #fff;
  color: #0b1f4d;
  box-shadow: 0 12px 30px rgba(0, 20, 80, 0.3);
}
.btn-light.m-shimmer:hover {
  background: #f2f7ff;
}
.btn-light.m-shimmer::before {
  background: conic-gradient(from var(--m-angle), transparent 0 70%, #0064ff 84%, #00c2d4 90%, transparent 97%);
}
.btn-light.m-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(0, 100, 255, 0.12) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}

/* ---------- Border beam: a comet of light travels round a card's border ---------- */
.m-beam {
  position: relative;
}
.m-beam::after {
  content: "";
  position: absolute;
  inset: var(--m-beam-inset, -2px);
  padding: var(--m-beam-width, 2px);
  border-radius: inherit;
  background: conic-gradient(from var(--m-angle), transparent 0 62%, var(--cyan) 78%, #0064ff 88%, #8b5cf6 94%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: m-spin var(--m-beam-speed, 6s) linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* ---------- Spotlight: a soft light follows the pointer (wow.js sets --mx/--my) ---------- */
.m-spot {
  position: relative;
  isolation: isolate;
}
.m-spot::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), var(--m-glow), transparent 45%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.m-spot:hover::before,
.m-spot:focus-within::before {
  opacity: 1;
}

/* ---------- 3D tilt on hover (wow.js sets --rx/--ry; fine pointers only) ---------- */
.m-tilt {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px));
  transition: transform 0.45s var(--m-ease), box-shadow 0.45s var(--m-ease);
  will-change: transform;
}
.m-tilt.is-tilting {
  --lift: -4px;
  transition: transform 0.12s linear, box-shadow 0.45s var(--m-ease);
}

/* ---------- Patterns: dots and grid fading out with a radial mask ---------- */
.m-dots,
.m-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}
.m-dots {
  background-image: radial-gradient(rgba(11, 31, 77, 0.16) 1px, transparent 1.4px);
  background-size: 22px 22px;
}
.m-grid {
  background-image: linear-gradient(rgba(11, 31, 77, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 31, 77, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
}
[data-theme="dark"] .m-dots {
  background-image: radial-gradient(rgba(170, 205, 255, 0.16) 1px, transparent 1.4px);
}
[data-theme="dark"] .m-grid,
.m-grid.is-light {
  background-image: linear-gradient(rgba(170, 205, 255, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(170, 205, 255, 0.07) 1px, transparent 1px);
}

/* ---------- Aurora: slow blurred colour fields (hero backdrop) ---------- */
.m-aurora {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.m-aurora i {
  position: absolute;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  animation: m-drift 22s ease-in-out infinite alternate;
}
.m-aurora i:nth-child(1) {
  top: -22vmax;
  right: -10vmax;
  background: radial-gradient(closest-side, rgba(0, 217, 233, 0.55), transparent);
}
.m-aurora i:nth-child(2) {
  top: 10%;
  left: 30%;
  background: radial-gradient(closest-side, rgba(0, 100, 255, 0.4), transparent);
  animation-duration: 28s;
  animation-delay: -8s;
}
.m-aurora i:nth-child(3) {
  bottom: -30vmax;
  left: -12vmax;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.28), transparent);
  animation-duration: 32s;
  animation-delay: -14s;
}
[data-theme="dark"] .m-aurora i {
  opacity: 0.4;
}

/* ---------- Particles and meteors (wow.js adds the <i> elements; decorative) ---------- */
.m-particles,
.m-meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.m-particles i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s, 4px);
  height: var(--s, 4px);
  border-radius: 50%;
  background: var(--c, #0064ff);
  opacity: 0;
  animation: m-float var(--t, 9s) ease-in-out var(--d, 0s) infinite;
}
.m-meteors i {
  position: absolute;
  top: var(--y, -5%);
  left: var(--x);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
  transform: rotate(215deg);
  opacity: 0;
  animation: m-meteor var(--t, 6s) linear var(--d, 0s) infinite;
}
.m-meteors i::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 90px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, #fff, transparent);
}

/* ---------- Marquee (wow.js clones the list once, hidden from assistive tech) ---------- */
.m-marquee {
  --m-gap: 14px;
  --m-speed: 38s;
  position: relative;
  display: flex;
  overflow: hidden;
  gap: var(--m-gap);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.m-marquee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--m-gap);
}
.m-marquee.is-running .m-marquee-list {
  flex: none;
  flex-wrap: nowrap;
  animation: m-marquee var(--m-speed) linear infinite;
}
.m-marquee.is-reverse .m-marquee-list {
  animation-direction: reverse;
}
.m-marquee:hover .m-marquee-list,
.m-marquee:focus-within .m-marquee-list {
  animation-play-state: paused;
}
html:not(.js) .m-marquee,
.m-marquee:not(.is-running) {
  justify-content: center;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Logo chip used by the marquees and the model lists */
.m-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
}
.m-logo svg {
  width: 22px;
  height: 22px;
  flex: none;
}
.m-logo .m-mono {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--soft);
  color: var(--muted);
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.m-logo .m-mono.is-wide {
  width: auto;
  padding: 0 8px;
  border-radius: 999px;
}

/* ---------- Animated beam between nodes (horizontal, or vertical with .is-v) ---------- */
.m-line {
  position: relative;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  overflow: hidden;
}
.m-line::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--cyan), #0064ff, transparent);
  transform: translateX(-100%);
  animation: m-beam-x var(--m-line-speed, 2.6s) var(--m-ease) var(--m-line-delay, 0s) infinite;
}
.m-line.is-v {
  width: 2px;
  height: auto;
}
.m-line.is-v::after {
  inset: 0 0 auto 0;
  width: auto;
  height: 38%;
  background: linear-gradient(180deg, transparent, var(--cyan), #0064ff, transparent);
  transform: translateY(-100%);
  animation-name: m-beam-y;
}

/* ---------- Orbiting circles ---------- */
.m-orbit {
  --r1: 108px;
  --r2: 178px;
  position: relative;
  width: calc(var(--r2) * 2 + 64px);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.m-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(160, 200, 255, 0.22);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.m-orbit-ring.is-1 {
  width: calc(var(--r1) * 2);
  height: calc(var(--r1) * 2);
}
.m-orbit-ring.is-2 {
  width: calc(var(--r2) * 2);
  height: calc(var(--r2) * 2);
  border-style: dashed;
}
.m-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
  animation: m-orbit var(--t, 40s) linear infinite;
}
.m-orbit-item.is-reverse {
  animation-direction: reverse;
}

/* ---------- FLOW isotipo with an animated halo ---------- */
.m-flowmark {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--fm, 96px);
  height: var(--fm, 96px);
  border-radius: 30%;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 100, 255, 0.35), inset 0 0 0 1px rgba(11, 31, 77, 0.06);
}
.m-flowmark svg {
  width: 62%;
  height: 62%;
}
.m-flowmark::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: conic-gradient(from var(--m-angle), rgba(0, 217, 233, 0.5), rgba(0, 100, 255, 0.1), rgba(139, 92, 246, 0.45), rgba(0, 217, 233, 0.5));
  filter: blur(18px);
  z-index: -1;
  animation: m-spin 7s linear infinite;
}

/* ---------- Number ticker ---------- */
.m-ticker {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Blur fade on scroll (app.flow.js adds .js-motion/.in-view to .reveal) ---------- */
.js-motion .reveal.m-blur,
.js-motion [data-stagger].m-blur > * {
  filter: blur(8px);
  transition: opacity 0.8s var(--m-ease), transform 0.8s var(--m-ease), filter 0.8s var(--m-ease);
  transition-delay: var(--d, 0ms);
}
.js-motion .reveal.m-blur.in-view,
.js-motion [data-stagger].m-blur > .in-view {
  filter: none;
}

/* ---------- Pause control for continuous motion ---------- */
.m-pause {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}
.m-pause .icon {
  width: 18px;
  height: 18px;
}
.m-pause .icon-play,
.is-paused .m-pause .icon-pause,
.m-pause[aria-pressed="true"] .icon-pause {
  display: none;
}
.is-paused .m-pause .icon-play,
.m-pause[aria-pressed="true"] .icon-play {
  display: inline-block;
}
html:not(.js) .m-pause {
  display: none;
}
.is-paused *,
.is-paused *::before,
.is-paused *::after,
.is-offscreen *,
.is-offscreen *::before,
.is-offscreen *::after {
  animation-play-state: paused !important;
}

/* =====================================================================
   FLOW AI Studio × Higgsfield (home, studio page)
   ===================================================================== */
.ai-section {
  position: relative;
  overflow: clip;
  color: #edf5ff;
  background:
    radial-gradient(60% 50% at 80% 10%, rgba(0, 217, 233, 0.18), transparent 70%),
    radial-gradient(60% 60% at 10% 90%, rgba(91, 63, 214, 0.28), transparent 70%),
    linear-gradient(170deg, #071736, #050e22 55%, #081a3d);
}
.ai-section .m-grid {
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 70% 45%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 70% 45%, #000 10%, transparent 75%);
}
.ai-section :focus-visible {
  outline-color: #8ab8ff;
}
.ai-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  align-items: center;
}
.ai-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(160, 200, 255, 0.24);
  background: rgba(255, 255, 255, 0.05);
  font-size: 14px;
  font-weight: 800;
  color: #cfe0ff;
}
.ai-kicker .m-flowmark {
  --fm: 28px;
  border-radius: 50%;
  box-shadow: none;
}
.ai-kicker .m-flowmark::before {
  display: none;
}
.ai-title {
  margin-top: 22px;
  font-size: clamp(34px, 4.4vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  max-width: 14ch;
}
.ai-title .m-gradient-text {
  background-image: linear-gradient(90deg, #8ab8ff, #54e6ec 25%, #c4b5ff 50%, #7fe8f0 75%, #8ab8ff);
}
.ai-lede {
  margin-top: 16px;
  font-size: 19px;
  color: #c2d2e8;
  max-width: 34ch;
}
.ai-pipe {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto minmax(28px, 1fr) auto minmax(28px, 1fr) auto;
  align-items: center;
  gap: 10px;
  max-width: 470px;
}
.ai-pipe-node {
  display: grid;
  justify-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #c2d2e8;
  text-align: center;
}
.ai-pipe-node .m-flowmark {
  --fm: 56px;
}
.ai-pipe-node .m-flowmark::before {
  inset: -10px;
  filter: blur(12px);
}
.ai-pipe-hf,
.ai-pipe-models {
  display: inline-grid;
  place-items: center;
  min-width: 56px;
  height: 56px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid rgba(160, 200, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.ai-pipe-models {
  display: inline-flex;
  gap: 6px;
  padding: 0 12px;
}
.ai-pipe-models svg {
  width: 20px;
  height: 20px;
  color: #dbe7ff;
}
.ai-pipe .m-line {
  background: rgba(160, 200, 255, 0.3);
  margin-bottom: 26px;
}
.ai-note {
  margin-top: 26px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: #b9cae2;
  max-width: 46ch;
}
.ai-note .icon {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 2px;
  color: #7fe8f0;
}
.ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.ai-actions .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.ai-actions .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Orbit of providers around the FLOW isotipo */
.ai-orbit-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.ai-orbit .m-flowmark {
  --fm: 104px;
  z-index: 2;
}
.ai-orbit-logo {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #0d2247;
  border: 1px solid rgba(160, 200, 255, 0.3);
  color: #e6efff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.ai-orbit-logo svg {
  width: 26px;
  height: 26px;
}
.ai-orbit-chip {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  background: #0d2247;
  border: 1px solid rgba(160, 200, 255, 0.3);
  color: #e6efff;
  font-family: var(--head);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.ai-orbit-hf {
  position: absolute;
  left: 50%;
  bottom: 6px;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(160, 200, 255, 0.28);
  font-size: 13px;
  font-weight: 800;
  color: #dbe7ff;
  white-space: nowrap;
}
.ai-orbit-hf::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3ddc97;
  box-shadow: 0 0 0 4px rgba(61, 220, 151, 0.18);
}

/* Model marquees */
.ai-models {
  position: relative;
  margin-top: 64px;
  display: grid;
  gap: 14px;
}
.ai-models-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9fb4d3;
}
.ai-section .m-logo {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(160, 200, 255, 0.2);
  color: #edf5ff;
}
.ai-section .m-logo .m-mono {
  background: rgba(255, 255, 255, 0.1);
  color: #dbe7ff;
}
.ai-section .m-logo small {
  font-size: 12px;
  font-weight: 700;
  color: #9fb4d3;
}
.ai-section .m-pause {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(160, 200, 255, 0.28);
  color: #edf5ff;
}

.ai-models-foot {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}
.ai-orbit-dot {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #54e6ec;
  box-shadow: 0 0 0 5px rgba(84, 230, 236, 0.15), 0 0 18px rgba(84, 230, 236, 0.8);
}

.ai-models-label .icon {
  width: 18px;
  height: 18px;
  color: #7fe8f0;
}
.ai-models-label + .m-marquee {
  margin-bottom: 14px;
}
.studio-mark {
  --fm: 72px;
  margin: 8px 0 26px;
}

/* Studio page: full catalog grid */
.ai-catalog {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
  margin-top: 48px;
}
.ai-cat {
  padding: 24px;
  border-radius: 28px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.ai-cat h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
}
.ai-cat h3 .icon {
  width: 22px;
  height: 22px;
  color: var(--link);
}
.ai-cat-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ai-cat-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 4px 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--soft);
}
.ai-cat-list .m-mono,
.ai-cat-list .ai-cat-logo {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  font-family: var(--head);
  font-size: 12px;
  font-weight: 700;
}
.ai-cat-logo svg {
  width: 20px;
  height: 20px;
}
.ai-cat-list strong {
  font-size: 16px;
  line-height: 1.3;
}
.ai-cat-list span.ai-cat-meta {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.35;
}
.ai-soon {
  margin-top: 24px;
  padding: 20px 24px;
  border-radius: 22px;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 15px;
}
.ai-soon strong {
  color: var(--text);
}

/* =====================================================================
   Demo page · guided tour (tabs with autoplay + real screenshots)
   ===================================================================== */
.tour {
  position: relative;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}
.tour > * {
  min-width: 0;
}
.tour-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.tour-tab {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 2px 14px;
  padding: 14px 16px;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  text-align: left;
  transition: background 0.25s, border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.tour-tab:hover {
  background: var(--soft);
  color: var(--text);
}
.tour-tab[aria-selected="true"] {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
  box-shadow: var(--shadow);
}
.tour-tab-n {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--link);
}
.tour-tab-n .icon {
  width: 22px;
  height: 22px;
}
.tour-tab[aria-selected="true"] .tour-tab-n {
  background: linear-gradient(135deg, #0064ff, #00a8d6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 100, 255, 0.3);
}
.tour-tab strong {
  font-family: var(--head);
  font-size: 17px;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.tour-tab small {
  font-size: 14px;
  line-height: 1.35;
}
.tour-tab-bar {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #0064ff, var(--cyan));
  transform: scaleX(0);
  transform-origin: left;
}
.tour.is-playing .tour-tab[aria-selected="true"] .tour-tab-bar {
  animation: m-bar var(--tour-dur, 6s) linear both;
}
.tour-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding-left: 16px;
  font-size: 14px;
  color: var(--muted);
}
.tour-toggle .icon {
  width: 18px;
  height: 18px;
}
.tour-toggle .icon-play,
.tour-toggle[data-paused] .icon-pause {
  display: none;
}
.tour-toggle[data-paused] .icon-play {
  display: inline-block;
}
html:not(.js) .tour-toggle {
  display: none;
}
.tour-stage {
  position: relative;
}
.tour-panel {
  position: relative;
}
.tour-panel:not([hidden]) {
  animation: m-in 0.55s var(--m-ease) both;
}
.tour-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(11, 31, 77, 0.05), 0 40px 90px rgba(20, 64, 122, 0.16);
}
.tour-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.tour-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d5deea;
}
[data-theme="dark"] .tour-bar i {
  background: #33485f;
}
.tour-bar span {
  margin-left: 10px;
}
.tour-shot {
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.tour-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--pos, 0 0);
  transform-origin: var(--origin, 30% 20%);
}
.tour.is-playing .tour-panel:not([hidden]) .tour-shot img {
  animation: m-kenburns var(--tour-dur, 6s) ease-out both;
}
.tour-callout {
  position: absolute;
  left: var(--cx, 60%);
  top: var(--cy, 30%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(11, 31, 77, 0.2);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}
.tour-callout .icon {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--link);
}
.tour-panel:not([hidden]) .tour-callout {
  animation: m-pop 0.6s var(--m-ease) 0.5s both;
}
.tour-caption {
  margin-top: 16px;
  font-size: 14px;
  color: var(--muted);
}
html:not(.js) .tour-tabs,
html:not(.js) .tour-controls {
  display: none;
}
html:not(.js) .tour {
  grid-template-columns: 1fr;
}
html:not(.js) .tour-panel[hidden] {
  display: block !important;
  margin-top: 28px;
}

/* Demo page: final CTA band and FAQ */
.demo-cta {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: 72px 48px;
  border-radius: 36px;
  text-align: center;
  color: #fff;
  background:
    radial-gradient(50% 60% at 80% 20%, rgba(0, 217, 233, 0.4), transparent 70%),
    radial-gradient(60% 70% at 15% 85%, rgba(0, 60, 200, 0.55), transparent 70%),
    linear-gradient(140deg, #0052d6, #003a9e);
}
.demo-cta h2 {
  position: relative;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.05em;
  max-width: 16ch;
  margin-inline: auto;
}
.demo-cta p {
  position: relative;
  margin: 16px auto 0;
  max-width: 44ch;
  color: #e3edff;
  font-size: 18px;
}
.demo-cta .actions {
  position: relative;
  justify-content: center;
}
.demo-cta .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.demo-cta .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
}
.demo-cta .demo-cta-pause {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}
.demo-cta .m-grid {
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 50%, #000 10%, transparent 75%);
}

/* ---------- Keyframes ---------- */
@keyframes m-spin {
  to {
    --m-angle: 360deg;
  }
}
@keyframes m-gradient {
  to {
    background-position: 220% center;
  }
}
@keyframes m-sheen {
  0%,
  55% {
    transform: translateX(-120%);
  }
  85%,
  100% {
    transform: translateX(120%);
  }
}
@keyframes m-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-6vmax, 4vmax, 0) scale(1.12);
  }
}
@keyframes m-float {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.6);
  }
  30%,
  70% {
    opacity: var(--o, 0.55);
  }
  50% {
    transform: translate3d(var(--dx, 8px), -26px, 0) scale(1);
  }
}
@keyframes m-meteor {
  0% {
    opacity: 0;
    transform: rotate(215deg) translateX(0);
  }
  6% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(215deg) translateX(-900px);
  }
}
@keyframes m-marquee {
  to {
    transform: translateX(calc(-100% - var(--m-gap)));
  }
}
@keyframes m-beam-x {
  to {
    transform: translateX(270%);
  }
}
@keyframes m-beam-y {
  to {
    transform: translateY(270%);
  }
}
@keyframes m-orbit {
  to {
    transform: rotate(calc(var(--a) + 360deg)) translateY(calc(var(--r) * -1)) rotate(calc((var(--a) + 360deg) * -1));
  }
}
@keyframes m-bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@keyframes m-in {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes m-pop {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes m-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .m-orbit {
    --r1: 92px;
    --r2: 150px;
  }
}
@media (max-width: 960px) {
  .ai-grid {
    grid-template-columns: 1fr;
  }
  .ai-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .ai-actions {
    justify-content: center;
  }
  .ai-note {
    text-align: left;
  }
  .ai-catalog {
    grid-template-columns: 1fr;
  }
  .tour {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .tour-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 2px 10px;
    scrollbar-width: none;
  }
  .tour-tabs::-webkit-scrollbar {
    display: none;
  }
  .tour-tabs li {
    flex: none;
    scroll-snap-align: start;
  }
  .tour-tab {
    width: auto;
    grid-template-columns: 36px auto;
    padding: 10px 14px 12px 10px;
  }
  .tour-tab small {
    display: none;
  }
  .tour-tab-n {
    grid-row: auto;
    width: 36px;
    height: 36px;
    border-radius: 12px;
  }
  .tour-tab strong {
    font-size: 15px;
    white-space: nowrap;
  }
  .tour-controls {
    order: 3;
    padding-left: 0;
  }
}
@media (max-width: 640px) {
  .m-orbit {
    --r1: 76px;
    --r2: 124px;
  }
  .ai-orbit .m-flowmark {
    --fm: 80px;
  }
  .ai-orbit-logo {
    width: 44px;
    height: 44px;
  }
  .ai-orbit-logo svg {
    width: 22px;
    height: 22px;
  }
  .ai-orbit-chip {
    font-size: 12px;
    padding: 5px 10px;
  }
  .ai-pipe {
    gap: 6px;
  }
  .ai-pipe-node {
    font-size: 12px;
  }
  .ai-pipe-hf {
    font-size: 14px;
    padding: 0 10px;
  }
  .ai-pipe-models svg:nth-child(3) {
    display: none;
  }
  .ai-models {
    margin-top: 44px;
  }
  .m-logo {
    font-size: 14px;
  }
  .tour-shot {
    aspect-ratio: 4 / 3;
  }
  .tour-callout {
    left: 12px !important;
    top: auto !important;
    bottom: 12px;
    max-width: calc(100% - 24px);
    font-size: 13px;
  }
  .demo-cta {
    padding: 56px 20px;
    border-radius: 28px;
  }
}

/* ---------- Motion preferences: still and readable ---------- */
@media (prefers-reduced-motion: reduce) {
  .m-gradient-text,
  .btn.m-shimmer::before,
  .btn.m-shimmer::after,
  .m-beam::after,
  .m-aurora i,
  .m-line::after,
  .m-orbit-item,
  .m-flowmark::before,
  .tour-panel:not([hidden]),
  .tour-panel:not([hidden]) .tour-callout,
  .tour.is-playing .tour-panel:not([hidden]) .tour-shot img {
    animation: none !important;
  }
  .m-line::after {
    display: none;
  }
  .m-particles,
  .m-meteors {
    display: none;
  }
  .m-tilt,
  .m-tilt.is-tilting {
    transform: none;
    transition: none;
  }
  .m-beam::after {
    background: linear-gradient(135deg, var(--cyan), #0064ff 50%, #8b5cf6);
    opacity: 0.8;
  }
}

/* =====================================================================
   Wave 8 · patterns recreated from 21st.dev previews (no code copied):
   cursor-following glow (uiable/hero-17), tubelight navbar (ayushmxxn),
   rolling numbers for the pricing toggle (efferd/pricing-4).
   ===================================================================== */

/* ---------- Cursor glow: a soft light follows the pointer across the region ----------
   wow.js sets --gx/--gy (smoothed) and toggles .is-glowing; fine pointers only. Without a
   pointer the glow rests at a fixed spot, so the region never looks empty. */
.m-glow-follow {
  position: relative;
  isolation: isolate;
}
.m-glow-follow > .container {
  position: relative;
}
.m-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(620px circle at var(--gx, 72%) var(--gy, 30%), var(--m-glow-c, rgba(0, 100, 255, 0.2)), rgba(0, 217, 233, 0.06) 45%, transparent 68%);
  opacity: 0.75;
  transition: opacity 0.6s var(--m-ease);
}
.m-glow-follow.is-glowing .m-glow {
  opacity: 1;
}
[data-theme="dark"] .m-glow {
  --m-glow-c: rgba(84, 230, 236, 0.18);
}
.h-hero-fx .m-glow {
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}

/* ---------- Tubelight navbar: a pill slides under the active link, a lit tube on top ----------
   The <span class="m-tube"> lives inside .nav-links; wow.js positions it under the current page
   and moves it to the hovered/focused link, then back. Desktop only (the menu is a sheet below). */
.m-tube {
  display: none;
}
@media (min-width: 1101px) {
  /* Static geometry (no class added by JS), so the links never move after first paint. */
  .nav-links:has(.m-tube) {
    position: relative;
  }
  .js .nav-links:has(.m-tube) a[aria-current="page"]::after {
    display: none;
  }
  .nav-links:has(.m-tube) a:not(.btn) {
    position: relative;
    z-index: 1;
    padding: 0 12px;
    margin: 0 -12px;
    border-radius: 999px;
  }
  /* Transform only: a 100 px base scaled to the link (--ts) and slid into place (--tx). */
  .m-tube {
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100px;
    height: 38px;
    translate: 0 -50%;
    transform: translateX(var(--tx, 0px)) scaleX(var(--ts, 0.8));
    transform-origin: left center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 9%, transparent);
    opacity: 0;
    transition: transform 0.32s var(--m-ease), opacity 0.25s;
    pointer-events: none;
    will-change: transform;
  }
  .nav-links.is-lit .m-tube {
    opacity: 1;
  }
  .m-tube::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 50%;
    width: 58%;
    height: 2px;
    translate: -50% 0;
    border-radius: 2px;
    background: var(--blue);
    box-shadow: 0 0 10px 2px color-mix(in srgb, var(--blue) 55%, transparent), 0 0 24px 6px color-mix(in srgb, var(--cyan) 30%, transparent);
  }
  .m-tube::after {
    content: "";
    position: absolute;
    top: -2px;
    left: 50%;
    width: 44%;
    height: 14px;
    translate: -50% 0;
    border-radius: 0 0 40px 40px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 28%, transparent), transparent);
    filter: blur(2px);
  }
  [data-theme="dark"] .m-tube {
    background: rgba(138, 184, 255, 0.12);
  }
  [data-theme="dark"] .m-tube::before {
    background: var(--link);
  }
}

/* ---------- Rolling number: the price counts to its new value when the period changes ---------- */
[data-price] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: filter 0.25s var(--m-ease), opacity 0.25s var(--m-ease);
}
[data-price].is-rolling {
  filter: blur(1.5px);
  opacity: 0.85;
}
/* Featured plan on the pricing page: the beam runs round the highlighted card */
.price-card.featured.m-beam {
  --m-beam-inset: -2px;
  --m-beam-width: 2px;
  --m-beam-speed: 7s;
}
.price-card.featured .recommended {
  z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
  .m-glow,
  .m-tube {
    transition: none;
  }
  [data-price] {
    transition: none;
  }
}