/* =========================================================
   FleTrack — escenas del panel en vivo (src/site/scenes.mjs)
   Una ilustración animada distinta por página. Movimiento lento y continuo;
   con "Reducir movimiento" todo queda quieto en su estado final.
   ========================================================= */

.sc-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage .live__route { animation: route-draw 2.4s var(--ease-out) .9s both; }

/* 1) Mapa */
.sc-car { offset-rotate: 0deg; animation: drive 14s linear 1.6s infinite; }

/* 2) Cámara con IA */
.sc-lane { animation: sc-lane .7s linear infinite; }
@keyframes sc-lane { to { stroke-dashoffset: -52; } }
.sc-ahead { animation: sc-ahead 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-ahead { 0%, 100% { transform: translate(600px, 318px) scale(1); } 50% { transform: translate(612px, 312px) scale(.94); } }
.sc-detect { animation: sc-detect 2s ease-in-out infinite; }
@keyframes sc-detect { 50% { opacity: .45; } }
.sc-tail { animation: sc-tail 3s steps(1) infinite; }
@keyframes sc-tail { 60% { fill: #ff8a8a; } }
.sc-tag {
  position: absolute; transform: translateX(-50%); z-index: 1; padding: 5px 10px; border-radius: 8px;
  background: #9bff03; color: #111316; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  animation: fade-up .6s var(--ease-out) 1s both;
}
.sc-hud {
  position: absolute; left: 32px; top: 28px; z-index: 1; display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, .45); color: #fff;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.sc-hud b { font-size: 15px; }
.sc-rec { display: inline-flex; align-items: center; gap: 6px; color: #ff6b6b; }
.sc-rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; animation: sc-blink 1.2s steps(1) infinite; }
@keyframes sc-blink { 50% { opacity: 0; } }

/* 3) Tanque */
.sc-fuel { animation: sc-fuel 9s var(--ease-out) 1s infinite; }
@keyframes sc-fuel {
  0%, 38% { transform: translateY(0); }
  46%, 82% { transform: translateY(96px); }
  94%, 100% { transform: translateY(0); }
}
.sc-wave { animation: sc-wave 2.6s linear infinite; }
.sc-drops { animation: sc-dropvis 9s 1s infinite; }
@keyframes sc-dropvis { 0%, 36% { opacity: 0; } 39%, 78% { opacity: 1; } 84%, 100% { opacity: 0; } }
.sc-drop { opacity: 0; animation: sc-drop 1.05s ease-in infinite; }
@keyframes sc-drop { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(70px); } }
@keyframes sc-wave { to { transform: translateX(-150px); } }

/* 4) Tablero de equipos */
.sc-board {
  position: absolute; left: 32px; top: 32px; bottom: 32px; right: calc(32px + 380px + 20px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 14px;
}
.stage--board { background: #e9edf3; }
.sc-mach {
  display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 20px; background: #fff;
  border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 14px 30px -24px rgba(17, 19, 22, .4);
  animation: fade-up .7s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + .5s);
}
.sc-mach__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.sc-mach__ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #fff3dc; }
.sc-mach__ico svg { width: 20px; height: 20px; fill: none; stroke: #8a4f00; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-mach b { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.sc-mach small { font-size: 12.5px; color: var(--ink-2); }
.sc-mach__hours { margin-top: auto; padding-top: 8px; font-size: 24px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sc-mach__bar { display: block; height: 6px; margin-top: 8px; border-radius: 99px; background: #eef0f3; overflow: hidden; }
.sc-mach__bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--ink); animation: v-width 1.4s var(--ease-out) 1s both; }
.stage__card--side { right: 32px; top: 32px; bottom: 32px; width: 380px; display: flex; flex-direction: column; justify-content: center; animation-delay: .9s; }

/* 5) Temperatura */
.sc-trace { animation: sc-trace 7s linear infinite; }
@keyframes sc-trace { to { transform: translateX(-1200px); } }
.sc-flake { position: absolute; width: 26px; height: 26px; opacity: .5; animation: sc-flake 6s ease-in-out infinite; animation-delay: calc(var(--d) * -1.3s); }
.sc-flake svg { width: 100%; height: 100%; fill: none; stroke: #6e8fd6; stroke-width: 1.6; stroke-linecap: round; }
@keyframes sc-flake { 50% { transform: translateY(14px) rotate(40deg); } }

/* 6) Seguridad de carga */
.sc-fence { animation: sc-ants 1.2s linear infinite; }
@keyframes sc-ants { to { stroke-dashoffset: -24; } }
.sc-sensor { animation: sc-sensor 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-sensor { 50% { transform: scale(1.6); opacity: .5; } }
.sc-radar {
  position: absolute; width: 420px; height: 420px; margin: -210px 0 0 -210px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, rgba(110, 143, 214, .32), rgba(110, 143, 214, 0) 70deg, transparent 360deg);
  animation: sc-spin 5s linear infinite;
}
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-seal {
  position: absolute; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(17, 19, 22, .08); box-shadow: 0 10px 24px -14px rgba(17, 19, 22, .4);
  font-size: 13px; font-weight: 600; animation: fade-up .6s var(--ease-out) 1.2s both;
}
.sc-seal svg { width: 16px; height: 16px; fill: none; stroke: #2f7d12; stroke-width: 2; }

/* 7) Línea de transporte de personal */
.stage--transit { background: linear-gradient(180deg, #fff4ec 0%, #f2f4f8 100%); }
.sc-line { position: absolute; left: 7%; right: 7%; top: 26%; height: 80px; }
.sc-line__track { position: absolute; left: 0; right: 0; top: 22px; height: 8px; border-radius: 99px; background: #e2e6ee; overflow: hidden; }
.sc-line__track i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: 0 50%; animation: sc-progress 12s linear 1s infinite; }
@keyframes sc-progress { 0% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
.sc-stop { position: absolute; left: var(--x); top: 10px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sc-stop em { width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 4px #cfd5df; animation: sc-stop 12s linear 1s infinite; animation-delay: calc(1s + var(--i) * 2.04s); }
@keyframes sc-stop { 0% { box-shadow: inset 0 0 0 4px var(--ink), 0 0 0 0 rgba(254, 119, 61, .5); } 6% { box-shadow: inset 0 0 0 10px var(--ink), 0 0 0 10px rgba(254, 119, 61, 0); } 100% { box-shadow: inset 0 0 0 10px var(--ink); } }
.sc-stop small { font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.sc-bus {
  position: absolute; top: -8px; left: 0; display: grid; place-items: center; width: 64px; height: 64px; margin-left: -32px;
  border-radius: 20px; background: #fe773d; box-shadow: 0 14px 28px -12px rgba(254, 119, 61, .7);
  animation: sc-bus 12s linear 1s infinite;
}
.sc-bus svg { width: 32px; height: 32px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sc-bus { 0% { left: 0; } 85%, 100% { left: 100%; } }

/* 8) Red de envíos */
.sc-flow { animation: sc-flow 1.6s linear infinite; }
@keyframes sc-flow { to { stroke-dashoffset: -40; } }
.sc-node { animation: sc-node 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes sc-node { 50% { transform: scale(1.8); opacity: .2; } }

/* 9) Obra */
.sc-ants { animation: sc-ants 1.2s linear infinite; }
.sc-dozer { offset-rotate: 0deg; animation: sc-dozer 9s ease-in-out infinite alternate; }
@keyframes sc-dozer { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* 10) Tiendas */
.stage--stores { background: linear-gradient(180deg, #eef4ea 0%, #f3f5f8 100%); }
.sc-street { position: absolute; left: 43%; right: 4%; top: 12%; height: 62%; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sc-store { position: relative; flex: 1; max-width: 130px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding-bottom: 54px; }
.sc-store__badge {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #cfd5df;
  animation: sc-badge .4s var(--ease-out) both; animation-delay: calc(1.6s + var(--i) * 1.7s);
}
.sc-store__badge svg { width: 20px; height: 20px; fill: none; stroke: #cfd5df; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: sc-badge-ico .4s both; animation-delay: inherit; }
@keyframes sc-badge { to { background: #3fa316; box-shadow: 0 0 0 6px rgba(63, 163, 22, .18); } }
@keyframes sc-badge-ico { to { stroke: #fff; } }
.sc-store__awn { width: 100%; height: 22px; border-radius: 10px 10px 4px 4px; background: repeating-linear-gradient(90deg, #111316 0 14px, #fff 14px 28px); }
.sc-store__body { width: 90%; height: 96px; display: flex; gap: 8px; padding: 12px; border-radius: 0 0 12px 12px; background: #fff; box-shadow: 0 14px 30px -24px rgba(17, 19, 22, .5); }
.sc-store__body i { flex: 1; border-radius: 6px; background: #dfe8f6; }
.sc-store small { position: absolute; bottom: 30px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.sc-road { position: absolute; left: -4%; right: -6%; bottom: 0; height: 22px; border-radius: 99px; background: #fff; }
.sc-truck { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 56px; height: 40px; margin: -20px 0 0 -28px; border-radius: 12px; background: var(--ink); animation: sc-truck 10s linear 1s infinite; }
.sc-truck svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sc-truck { 0% { left: 0; } 92%, 100% { left: 100%; } }

/* 11) Última milla */
.sc-pin { position: absolute; z-index: 0; width: 34px; height: 34px; margin: -34px 0 0 -17px; animation: sc-pin .5s var(--ease-out) both; animation-delay: calc(var(--i) * 140ms + .6s); }
.sc-pin svg { width: 100%; height: 100%; fill: #9aa3b2; stroke: #fff; stroke-width: 1.2; }
.sc-pin.is-done svg { fill: #3fa316; }
@keyframes sc-pin { from { opacity: 0; transform: translateY(-14px) scale(.6); } to { opacity: 1; transform: none; } }
.sc-courier-path { animation: sc-ants 1.2s linear infinite; }

/* 12) Tablero de soluciones */
.stage--modules { background: linear-gradient(135deg, #eef2f8 0%, #f6f1ec 100%); }
.sc-mods { position: absolute; inset: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); gap: 16px; }
.sc-mod {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 22px; background: #fff;
  border: 1px solid rgba(17, 19, 22, .06); box-shadow: 0 16px 34px -26px rgba(17, 19, 22, .45);
  animation: fade-up .7s var(--ease-out) both; animation-delay: calc(var(--i) * 80ms + .5s);
}
.sc-mod__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent); }
.sc-mod__ico svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-mod b { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.sc-mod__fx { position: relative; margin-top: auto; display: flex; align-items: center; gap: 10px; min-height: 40px; }
.fx-svg { width: 100%; height: 40px; overflow: visible; }
.fx-route { fill: none; stroke: #c9d6f2; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; }
.fx-dot { fill: var(--ink); offset-rotate: 0deg; animation: sc-dozer 4s ease-in-out infinite alternate; }
.fx-rec { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; background: #111316; color: #ff8a8a; font-size: 12px; font-weight: 700; }
.fx-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff4d4d; animation: sc-blink 1.2s steps(1) infinite; }
.fx-frame { flex: 1; height: 32px; border-radius: 8px; border: 2px solid #9bff03; animation: sc-detect 2s ease-in-out infinite; }
.fx-level { flex: 1; height: 12px; border-radius: 99px; background: #eef0f3; overflow: hidden; }
.fx-level i { display: block; height: 100%; width: 80%; border-radius: inherit; background: linear-gradient(90deg, #6e8fd6, #acc6ff); animation: fx-drain 6s ease-in-out infinite; }
@keyframes fx-drain { 0%, 30% { width: 80%; } 45%, 80% { width: 52%; } 95%, 100% { width: 80%; } }
.fx-num { font-style: normal; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fx-num--lg { font-size: 22px; letter-spacing: -.02em; }
.fx-wave { animation: fx-wave 3s linear infinite; }
.fx-wave path { fill: none; stroke: var(--ink); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
@keyframes fx-wave { to { transform: translateX(-50px); } }
.fx-sensor { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 99px; background: #e8f8dc; color: #2f6f12; font-size: 12.5px; font-weight: 600; }
.fx-sensor i { width: 8px; height: 8px; border-radius: 50%; background: #3fa316; animation: pulse 1.8s ease-in-out infinite; }
.fx-line { position: relative; flex: 1; height: 6px; border-radius: 99px; background: #eef0f3; }
.fx-line i { position: absolute; inset: 0; border-radius: inherit; background: #fe773d; transform-origin: 0 50%; animation: fx-bus 5s linear infinite; }
.fx-line b { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 6px; background: #fe773d; animation: fx-bus-dot 5s linear infinite; }
@keyframes fx-bus { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fx-bus-dot { from { left: 0; } to { left: 100%; } }
.fx-eq { display: flex; align-items: flex-end; gap: 6px; width: 100%; height: 40px; }
.fx-eq i { flex: 1; border-radius: 6px; background: #e6eaf2; height: 40%; animation: sc-eq 1.6s ease-in-out infinite; }
.fx-eq i:nth-child(2) { animation-delay: -.4s; } .fx-eq i:nth-child(3) { animation-delay: -.8s; } .fx-eq i:nth-child(4) { animation-delay: -1.2s; }
@keyframes sc-eq { 50% { height: 100%; background: #c9d6f2; } }
.mod-pin .sc-mod__ico { animation: v-pulse 2.4s ease-in-out infinite; }
.mod-rec .sc-mod__ico { background: #fde7e7; }
.mod-gear .sc-mod__ico svg { animation: sc-spin 6s linear infinite; }
.mod-temp .sc-mod__ico { background: #e3eefc; }
.mod-door .sc-mod__ico { background: #e8f8dc; }
.mod-bus .sc-mod__ico { background: #ffe9de; }

/* 13) Mosaico de industrias */
.sc-mosaic { position: absolute; inset: 32px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stage--mosaic { background: #f3f5f8; }
.sc-ind {
  display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 0; border-radius: 24px; background: var(--bg); overflow: hidden;
  animation: fade-up .8s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + .5s);
}
.sc-ind__ico { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 16px; background: #fff; }
.sc-ind__ico svg { width: 24px; height: 24px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sc-ind small { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.sc-ind b { font-size: clamp(30px, 3vw, 44px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sc-ind em { font-style: normal; font-size: 13.5px; color: var(--ink-2); }
.sc-spark { margin-top: auto; width: calc(100% + 48px); margin-left: -24px; height: 90px; overflow: visible; animation: v-clip 1.8s var(--ease-out) both; animation-delay: calc(var(--i) * 110ms + .9s); }
.sc-spark path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* 14) Productos en abanico */
.stage--products { background: radial-gradient(circle at 50% 120%, #dfe8f6 0%, #f3f5f8 60%); }
.sc-fan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sc-app {
  position: absolute; width: min(300px, 26vw); aspect-ratio: 4 / 5; padding: 26px 24px; border-radius: 26px; background: var(--bg);
  display: flex; flex-direction: column; gap: 22px; box-shadow: 0 40px 60px -34px rgba(17, 19, 22, .55);
  --r: calc((var(--i) - 1.5) * 9deg); --x: calc((var(--i) - 1.5) * min(250px, 21vw));
  transform: translateX(var(--x)) rotate(var(--r));
  animation: sc-fan-in 1s var(--ease-out) both, sc-float 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 120ms + .5s), calc(var(--i) * -1.4s);
}
@keyframes sc-fan-in { from { opacity: 0; transform: translateX(0) rotate(0) translateY(40px); } }
@keyframes sc-float { 50% { transform: translateX(var(--x)) rotate(var(--r)) translateY(-12px); } }
.sc-app img { width: 70%; height: auto; max-height: 48px; object-fit: contain; object-position: left center; }
.sc-app__ui { display: flex; flex-direction: column; gap: 12px; }
.sc-app__ui i { display: block; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, .22); }
.sc-app__ui i:nth-child(1) { width: 80%; } .sc-app__ui i:nth-child(2) { width: 60%; }
.sc-app__ui i:nth-child(3) { height: 70px; border-radius: 14px; background: rgba(255, 255, 255, .14); }
.sc-app__ui i:nth-child(4) { width: 45%; }
.sc-app:nth-child(3) .sc-app__ui i { background: rgba(17, 19, 22, .16); }

/* 15) Órbita */
.stage--orbit { background: radial-gradient(circle at 50% 50%, #ffffff 0%, #eef1f6 70%); }
.sc-orbit { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.sc-orbit__ring { position: absolute; left: 0; top: 0; border-radius: 50%; border: 2px dashed rgba(17, 19, 22, .14); animation: sc-spin 40s linear infinite; }
.sc-orbit__ring--1 { width: 280px; height: 280px; margin: -140px 0 0 -140px; }
.sc-orbit__ring--2 { width: 460px; height: 460px; margin: -230px 0 0 -230px; animation-duration: 60s; animation-direction: reverse; }
.sc-orbit__ring em {
  position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 18px; background: #fff;
  box-shadow: 0 12px 26px -14px rgba(17, 19, 22, .45); transform: rotate(var(--a)) translateY(calc(var(--r) * -1)) rotate(calc(var(--a) * -1));
}
.sc-orbit__ring--1 em { --r: 140px; } .sc-orbit__ring--2 em { --r: 230px; }
.sc-orbit__ring em svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; animation: sc-spin 40s linear infinite reverse; }
.sc-orbit__ring--2 em svg { animation-duration: 60s; animation-direction: normal; }
.sc-orbit__core { position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 14px rgba(172, 198, 255, .35), 0 24px 50px -20px rgba(17, 19, 22, .35); animation: v-pulse 3s ease-in-out infinite; }
.sc-orbit__core img { width: 96px; height: auto; }

/* ---------- Widgets nuevos ---------- */
.vseats__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-top: 14px; }
.vseats__grid i { aspect-ratio: 1; border-radius: 6px; background: #eef0f3; }
.vseats__grid i.is-on { background: #fe773d; }
.is-live .vseats__grid i.is-on { animation: v-seat .4s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms + 1.2s); }
@keyframes v-seat { from { background: #eef0f3; transform: scale(.6); } }
.vstack__bar { display: flex; gap: 4px; height: 14px; margin-top: 16px; }
.vstack__bar i { width: var(--w); min-width: 10px; border-radius: 99px; background: var(--c); transform-origin: 0 50%; }
.is-live .vstack__bar i { animation: v-grow-x .9s var(--ease-out) both; animation-delay: calc(var(--i) * 200ms + 1.2s); }
.vstack__legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vstack__legend li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.vstack__legend span { width: 10px; height: 10px; border-radius: 3px; }
.vstack__legend b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sc-board { right: 32px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage__card--side { display: none; }
  .sc-mods { grid-template-columns: repeat(4, minmax(0, 1fr)); inset: 24px; gap: 12px; }
  .sc-mod { padding: 16px; }
  .sc-street { left: 4%; }
}
@media (max-width: 1024px) {
  .sc-mosaic { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, 1fr); }
  .sc-spark { height: 50px; }
  .sc-orbit { transform: scale(.8); }
}
@media (max-width: 767px) {
  .sc-board { left: 14px; right: 14px; top: 14px; bottom: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, 1fr); gap: 8px; }
  .sc-mach { padding: 12px; } .sc-mach small { display: none; } .sc-mach__hours { font-size: 18px; }
  .sc-mods { inset: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, 1fr); gap: 8px; }
  .sc-mod { flex-direction: row; align-items: center; padding: 10px 12px; } .sc-mod__fx { display: none; } .sc-mod__ico { width: 36px; height: 36px; } .sc-mod b { font-size: 14px; }
  .sc-mosaic { inset: 14px; gap: 8px; } .sc-ind { padding: 16px 16px 0; } .sc-ind__ico { width: 38px; height: 38px; margin-bottom: 6px; } .sc-ind em { display: none; }
  .sc-hud { left: 14px; top: 14px; gap: 10px; font-size: 12px; }
  .sc-line { top: 14%; left: 10%; right: 10%; } .sc-stop small { display: none; }
  .sc-street { top: 6%; height: 40%; left: 3%; right: 3%; } .sc-store small { display: none; } .sc-store { padding-bottom: 34px; } .sc-store__body { height: 56px; }
  .sc-app { width: 150px; --x: calc((var(--i) - 1.5) * 70px); }
  .sc-orbit { top: 42%; transform: scale(.62); }
  .sc-seal, .sc-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .stage *, .stage *::before, .stage *::after { animation: none !important; }
  .sc-fuel { transform: translateY(96px); }
  .sc-bus { left: 60%; } .sc-truck { left: 50%; } .sc-line__track i { transform: scaleX(.6); }
}