/* Signal in motion — an isolated enhancement for the daylight preview. */
.motion-landing .hero { overflow: clip; background: #f5f6f8; }
.motion-landing .hero-grid { padding-block: 48px 56px; }
.motion-landing .scroll-progress {
  position: fixed; z-index: 100; inset: 0 0 auto; height: 3px;
  background: #dcc600; transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}
.motion-landing .signal-scene { position: relative; height: 550px; isolation: isolate; perspective: 1200px; }
.motion-landing .signal-scene::before {
  content: ""; position: absolute; inset: 0 -20px;
  background-image: radial-gradient(#c9cdd3 .8px, transparent .8px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 65% 48%, #000 8%, transparent 70%);
  pointer-events: none;
}
.motion-landing .signal-orbits { position: absolute; inset: -48px -32px; width: calc(100% + 64px); height: calc(100% + 96px); overflow: visible; pointer-events: none; }
.motion-landing .orbit-track { stroke: #c8af12; stroke-width: 1; opacity: .82; }
.motion-landing .orbit-track-secondary { stroke: #c5cbd3; stroke-width: 1.3; opacity: .6; }
.motion-landing .orbit-trail { stroke: #dcc400; stroke-width: 2.4; stroke-dasharray: 6 94; stroke-linecap: round; }
.motion-landing .signal-particle { fill: #fee715; stroke: #c8b523; stroke-width: .7; }
.motion-landing .signal-particle-small { fill: #abb2bd; stroke: none; }
.motion-landing .handoff-track { stroke: #c6b230; stroke-width: 1.5; stroke-dasharray: 3 7; opacity: .5; }
.motion-landing .handoff-signal { stroke: #c6ad00; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.motion-landing .handoff-dot { fill: #fee715; stroke: #b49e16; opacity: 0; }
.motion-landing .terminal-float { position: absolute; z-index: 1; top: 28px; left: 4%; width: 86%; transform: rotate(-3deg); }
.motion-landing .demo-window.glass-panel {
  min-height: 350px; height: auto; border-radius: 22px; background: #fff;
  box-shadow: 0 28px 50px -24px rgba(39, 49, 64, .28), 0 2px 6px rgba(39, 49, 64, .04);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.motion-landing .terminal { padding: 20px 24px 28px; }
.motion-landing .terminal-context { padding-bottom: 10px; }
.motion-landing .terminal-prompt { margin-top: 16px; font-size: 12px; }
.motion-landing .terminal-log { font-size: 12px; }
.motion-landing .terminal-detail { max-width: 40%; }
.motion-landing .decision-float { position: absolute; z-index: 3; top: 284px; right: 0; width: min(390px, 67%); transform: rotate(3deg); }
.motion-landing .decision-panel.glass-panel {
  position: relative; top: auto; right: auto; width: 100%; margin: 0;
  background: #fff; border-radius: 18px; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 24px 45px -21px rgba(39, 49, 64, .32), inset 0 1px 0 #fff;
}
.motion-landing .decision-bar { height: 36px; padding-inline: 8px; }
.motion-landing .decision-options { gap: 6px; padding: 8px; grid-template-rows: repeat(4, minmax(46px, auto)); }
.motion-landing .decision-option { min-height: 46px; padding: 9px; }
.motion-landing .decision-option > span { font-size: 11px; }
.motion-landing .decision-option small { font-size: 7px; }
.motion-landing .shortcut-float { position: absolute; z-index: 2; left: 7%; top: 408px; width: 118px; transform: rotate(-12deg); pointer-events: none; }
.motion-landing .shortcut-key {
  position: relative; z-index: 1; height: 108px; padding: 14px 18px;
  border: 1px solid #fff; border-radius: 21px; background: linear-gradient(145deg, #fff, #e8ebef);
  box-shadow: -3px 9px 0 #d8dce1, -5px 13px 0 #c7cdd4, 0 26px 26px -12px rgba(48, 57, 70, .28), inset 0 2px 0 #fff;
  color: #58616e; transform-origin: center bottom;
}
.motion-landing .shortcut-label { font-family: var(--mono); font-size: 12px; }
.motion-landing .shortcut-combo { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; font-size: 27px; }
.motion-landing .shortcut-combo b { font-size: 48px; line-height: 1; color: #9b8500; font-weight: 600; }
.motion-landing .shortcut-shadow { position: absolute; top: 96%; left: 9%; width: 88%; height: 10px; border-radius: 50%; background: #c5ccd4; filter: blur(9px); opacity: .5; }
.motion-landing .product-demo figcaption { justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 20px; min-height: 36px; font-size: 9px; }
.motion-landing .demo-caption-text { display: flex; align-items: center; gap: 10px; }
.motion-landing .demo-controls { display: inline-flex; align-items: center; gap: 6px; }
.motion-landing .motion-control {
  display: inline-flex; justify-content: center; align-items: center; gap: 6px; min-width: 36px; min-height: 36px;
  padding: 6px; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #505761; cursor: pointer; font-family: var(--sans); font-size: 11px;
  letter-spacing: 0; text-transform: none; transition: color .2s, background-color .2s;
}
.motion-landing .motion-control:hover { background: #e6e9ed; color: #202328; }
.motion-landing .motion-control svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.motion-landing .motion-control:disabled { cursor: default; opacity: .55; }
.motion-landing .motion-control[hidden], .motion-landing .play-glyph { display: none; }
.motion-landing .motion-toggle[aria-pressed="true"] .pause-glyph { display: none; }
.motion-landing .motion-toggle[aria-pressed="true"] .play-glyph { display: initial; }
.motion-landing .button-yellow { position: relative; overflow: hidden; transition: background-color .2s, box-shadow .2s; }
.motion-landing .button-yellow::after {
  content: ""; position: absolute; inset: -60% -40%; pointer-events: none;
  background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,.5) 49%, transparent 58%);
  transform: translateX(-85%);
}
html[data-motion="enhanced"] .motion-landing .button-yellow:hover::after { animation: button-sheen .7s ease-out; }
@keyframes button-sheen { to { transform: translateX(85%); } }
.motion-landing .editorial-row { position: relative; }
.motion-landing .editorial-row::before { content: ""; position: absolute; inset: 18px auto 18px 0; width: 3px; border-radius: 4px; background: #cbb300; transform: scaleY(var(--row-progress, 1)); transform-origin: top; }
.motion-landing .steps-list .step-signal { position: relative; inset: auto; width: 100%; height: 68px; margin-bottom: 20px; }
.motion-landing .steps-list .step-signal::before { display: none; }
.motion-landing .step-signal svg { width: min(200px, 100%); height: 68px; overflow: visible; }
.motion-landing .step-frame { fill: #fff; stroke: #ccd2d9; stroke-width: 1; }
.motion-landing .step-detail { stroke: #77818d; stroke-width: 1.5; stroke-linecap: round; }
.motion-landing .step-key-active { fill: #fee715; stroke: #d4be27; }
.motion-landing .step-key-numbers { fill: #404953; font: 16px var(--mono); text-anchor: middle; }
.motion-landing .step-route { stroke: #a29222; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.motion-landing .step-moving-dot { fill: #ccb400; }
html:not([data-motion="enhanced"]) .motion-landing .status-pulse { animation: none; }
@media (max-width: 1100px) and (min-width: 901px) {
  .motion-landing .hero-grid { grid-template-columns: 1fr 1.1fr; gap: 24px; }
  .motion-landing .signal-scene { height: 555px; }
  .motion-landing .terminal-float { left: 0; width: 96%; }
  .motion-landing .decision-float { top: 295px; width: 85%; }
  .motion-landing .shortcut-float { width: 90px; left: 1%; top: 423px; }
  .motion-landing .shortcut-key { height: 86px; padding: 10px 12px; }
  .motion-landing .shortcut-combo b { font-size: 36px; }
  .motion-landing .terminal { padding-inline: 17px; }
}
@media (max-width: 900px) {
  .motion-landing .hero-grid { padding-block: 40px 48px; }
  .motion-landing .signal-scene { height: 560px; }
  .motion-landing .product-demo { max-width: 640px; }
}
@media (max-width: 760px) {
  .motion-landing .hero-grid { padding-block: 28px 34px; gap: 28px; }
  .motion-landing .signal-scene { height: auto; min-height: 600px; padding-top: 18px; }
  .motion-landing .terminal-float { position: relative; top: auto; left: auto; width: 100%; transform: rotate(-1.5deg); }
  .motion-landing .demo-window.glass-panel { min-height: 355px; border-radius: 16px; }
  .motion-landing .terminal { padding: 18px 16px 48px; }
  .motion-landing .terminal-detail { max-width: 100%; }
  .motion-landing .terminal-prompt, .motion-landing .terminal-log { font-size: 11px; }
  .motion-landing .decision-float { position: relative; top: auto; right: auto; width: 92%; min-height: 266px; margin: -24px 0 0 auto; transform: none; }
  .motion-landing .decision-panel.glass-panel { border-radius: 14px; }
  .motion-landing .decision-options { grid-template-rows: repeat(4, minmax(48px, auto)); }
  .motion-landing .decision-option { min-height: 48px; padding: 8px; }
  .motion-landing .decision-option > span { font-size: 11px; }
  .motion-landing .decision-bar { font-size: 9px; }
  .motion-landing .decision-bar-keys { font-size: 8px; }
  .motion-landing .shortcut-float { display: none; }
  .motion-landing .signal-orbits { opacity: .5; }
  .motion-landing .product-demo figcaption { justify-content: center; gap: 6px; margin-top: 12px; text-align: center; }
  .motion-landing .demo-caption-text { font-size: 9px; line-height: 1.6; }
  .motion-landing .caption-rule { width: 20px; }
  .motion-landing .demo-controls { justify-content: center; width: 100%; }
  .motion-landing .motion-control { min-height: 44px; min-width: 44px; }
  .motion-landing .steps-list .step-signal { margin-block: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-landing *, .motion-landing *::before, .motion-landing *::after { animation: none !important; transition: none !important; }
  .motion-landing .terminal-float, .motion-landing .decision-float { transform: none; }
}