.feature-page--motion {
  --feature-accent: #635bff;
  --feature-accent-2: #16a394;
  --feature-accent-soft: rgba(99, 91, 255, .12);
  --feature-wash: rgba(22, 163, 148, .09);
}

.motion-shell { padding-top: 24px; }
.motion-hero { padding: 58px 0 88px; }
.motion-hero-copy { max-width: 920px; }
.motion-hero h1 { max-width: 970px; margin: 0; color: var(--theme-text-strong); font: 900 clamp(54px, 7.7vw, 104px)/.91 "Manrope", sans-serif; letter-spacing: -.072em; }
.motion-hero h1 em { display: inline; color: var(--feature-accent); font-style: normal; }
.motion-hero .feature-hero-lead { max-width: 780px; }
.motion-hero .feature-trust-row li::before { content: "✓"; width: auto; height: auto; color: var(--feature-accent); background: none; box-shadow: none; font-size: 11px; font-weight: 900; }

.motion-hero-demo,
.motion-storyboard-card,
.motion-continuity-card,
.motion-editor-card,
.motion-chat-card {
  color: #f6f7ef;
  border: 1px solid #2b302f;
  background: #101312;
  box-shadow: 0 30px 75px rgba(16, 19, 18, .2);
}

.motion-hero-demo { overflow: hidden; margin-top: 58px; border-radius: 28px; }
.motion-demo-bar,
.motion-card-bar { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 20px; border-bottom: 1px solid #292e2c; font: 800 10px "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.motion-demo-bar > span { display: flex; align-items: center; gap: 8px; color: #939b96; }
.motion-demo-bar > span i { width: 7px; height: 7px; border-radius: 50%; background: #a9f970; box-shadow: 0 0 0 4px rgba(169, 249, 112, .1); }
.motion-demo-bar > strong { color: #a9f970; font-size: 9px; }
.motion-brief { display: grid; grid-template-columns: 74px minmax(0,1fr); align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #292e2c; background: #151917; }
.motion-brief > span { color: #7b847e; font: 900 9px "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.motion-brief p { margin: 0; color: #c4cac6; font-size: 12px; line-height: 1.5; }
.motion-brief strong { color: #f6f7ef; }

.motion-canvas { --scene-progress: 0; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 7.55; min-height: 500px; background: #121817; }
.motion-canvas::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 18% 24%, rgba(111, 255, 199, .12), transparent 31%), radial-gradient(circle at 82% 76%, rgba(99, 91, 255, .17), transparent 34%), linear-gradient(145deg, #111514, #17201e); }
.motion-canvas-grid { position: absolute; inset: 0; opacity: .24; background-image: linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 92%); }
.motion-scene { position: absolute; inset: 0; display: grid; align-content: center; padding: clamp(35px, 6vw, 82px); opacity: 0; visibility: hidden; transform: scale(.96); transition: opacity 420ms ease, transform 650ms cubic-bezier(.2,.75,.2,1), visibility 0s linear 650ms; }
.motion-canvas[data-scene="0"] .motion-scene--opening,
.motion-canvas[data-scene="1"] .motion-scene--map,
.motion-canvas[data-scene="2"] .motion-scene--routes,
.motion-canvas[data-scene="3"] .motion-scene--scale,
.motion-canvas[data-scene="4"] .motion-scene--ending { opacity: 1; visibility: visible; transform: scale(1); transition-delay: 0s; }

.motion-scene--opening > span,
.motion-scene--ending > span { color: #a9f970; font: 800 11px "Manrope", sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.motion-scene--opening h2,
.motion-scene--ending h2 { max-width: 880px; margin: 18px 0 0; color: #f4f5ed; font: 900 clamp(50px, 8vw, 110px)/.86 "Manrope", sans-serif; letter-spacing: -.075em; text-transform: uppercase; }
.motion-scene--opening h2 em,
.motion-scene--ending h2 em { color: #a9f970; font-style: normal; }
.motion-scene--opening > i,
.motion-scene--ending > i { display: block; width: 0; height: 7px; margin-top: 27px; border-radius: 99px; background: #a9f970; transition: width 1.1s cubic-bezier(.2,.8,.2,1) 200ms; }
.motion-canvas[data-scene="0"] .motion-scene--opening > i,
.motion-canvas[data-scene="4"] .motion-scene--ending > i { width: min(63%, 680px); }

.motion-scene--map { grid-template-columns: .52fr 1.48fr; align-items: center; }
.motion-map-copy { position: relative; z-index: 2; display: grid; }
.motion-map-copy > span { color: #8f9993; font: 800 11px "Manrope", sans-serif; letter-spacing: .14em; text-transform: uppercase; }
.motion-map-copy > strong { color: #a9f970; font: 900 clamp(100px, 15vw, 190px)/.8 "Manrope", sans-serif; letter-spacing: -.09em; }
.motion-map-copy > small { margin-left: 8px; color: #f6f7ef; font: 800 20px "Manrope", sans-serif; text-transform: uppercase; }
.motion-map { width: 100%; overflow: visible; }
.motion-map .route { fill: none; stroke: #7771ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 720; stroke-dashoffset: 720; transition: stroke-dashoffset 1.4s cubic-bezier(.3,.8,.2,1); }
.motion-map .route-b { stroke: rgba(169,249,112,.66); transition-delay: 150ms; }
.motion-map .route-c { stroke: rgba(255,255,255,.35); transition-delay: 260ms; }
.motion-map .city { fill: #101312; stroke: #a9f970; stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.2); transition: opacity 220ms ease, transform 480ms cubic-bezier(.2,1.5,.3,1); }
.motion-canvas[data-scene="1"] .motion-map .route { stroke-dashoffset: 0; }
.motion-canvas[data-scene="1"] .motion-map .city { opacity: 1; transform: scale(1); }
.motion-canvas[data-scene="1"] .motion-map .city-b { transition-delay: 240ms; }
.motion-canvas[data-scene="1"] .motion-map .city-c { transition-delay: 470ms; }

.motion-scene--routes { justify-items: center; text-align: center; }
.motion-scene--routes > span { color: #929b96; font: 800 11px "Manrope", sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.motion-scene--routes > div { display: flex; align-items: center; gap: clamp(22px,5vw,70px); margin-top: 6px; }
.motion-scene--routes strong { color: #f6f7ef; font: 900 clamp(120px, 19vw, 245px)/.86 "Manrope", sans-serif; letter-spacing: -.1em; }
.motion-scene--routes strong:last-child { color: #a9f970; }
.motion-scene--routes i { color: #7771ff; font: 500 54px "Manrope", sans-serif; font-style: normal; }
.motion-scene--routes > small { color: #d2d7d3; font: 800 18px "Manrope", sans-serif; letter-spacing: .1em; text-transform: uppercase; }

.motion-scene--scale { grid-template-columns: .68fr 1.32fr; align-items: center; gap: 45px; }
.motion-scene--scale > div { display: grid; }
.motion-scene--scale span { color: #929b96; font: 800 11px "Manrope", sans-serif; letter-spacing: .15em; text-transform: uppercase; }
.motion-scene--scale strong { color: #a9f970; font: 900 clamp(90px, 14vw, 180px)/.83 "Manrope", sans-serif; letter-spacing: -.1em; }
.motion-scene--scale strong i { font-style: normal; }
.motion-scene--scale small { margin-left: 7px; color: #f6f7ef; font: 800 19px "Manrope", sans-serif; text-transform: uppercase; }
.motion-scene--scale svg { width: 100%; overflow: visible; }
.motion-scene--scale .chart-base { fill: none; stroke: rgba(255,255,255,.17); stroke-width: 2; }
.motion-scene--scale .chart-line { fill: none; stroke: #7771ff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 680; stroke-dashoffset: 680; transition: stroke-dashoffset 1.35s cubic-bezier(.3,.8,.2,1); }
.motion-scene--scale circle { fill: #101312; stroke: #a9f970; stroke-width: 4; opacity: 0; transition: opacity 250ms ease 700ms; }
.motion-canvas[data-scene="3"] .chart-line { stroke-dashoffset: 0; }
.motion-canvas[data-scene="3"] .motion-scene--scale circle { opacity: 1; }

.motion-playback { min-height: 68px; display: grid; grid-template-columns: 38px minmax(0,1fr) 92px; align-items: center; gap: 16px; padding: 0 20px; border-top: 1px solid #292e2c; }
.motion-playback > button { width: 34px; height: 34px; border: 1px solid #3b413e; border-radius: 50%; color: #f6f7ef; background: #1c211f; cursor: pointer; }
.motion-scene-track { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.motion-scene-track button { display: grid; gap: 5px; padding: 0; border: 0; color: #707974; background: none; font: 700 7px "Manrope", sans-serif; text-align: left; cursor: pointer; }
.motion-scene-track button i { height: 4px; overflow: hidden; border-radius: 99px; background: #303634; }
.motion-scene-track button i::after { content: ""; display: block; width: 0; height: 100%; background: #a9f970; }
.motion-scene-track button[aria-selected="true"] { color: #dfe4e0; }
.motion-scene-track button[aria-selected="true"] i::after { width: calc(var(--scene-progress, 0) * 100%); }
.motion-playback time { color: #878f8a; font: 700 9px "Manrope", sans-serif; text-align: right; }

.motion-proof { display: grid; grid-template-columns: 1.05fr .8fr 1.15fr; align-items: center; gap: 36px; margin-top: 30px; padding: 50px; border: 1px solid var(--theme-border); border-radius: 28px; background: color-mix(in srgb, var(--theme-surface-solid) 88%, transparent); }
.motion-proof h2 { max-width: 470px; margin: 0; color: var(--theme-text-strong); font: 900 clamp(30px,3.4vw,48px)/1.03 "Manrope",sans-serif; letter-spacing: -.045em; }
.motion-proof-result { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 18px; border: 1px solid var(--theme-border); border-radius: 15px; }
.motion-proof-result span { color: var(--theme-text-soft); font: 800 9px "Manrope",sans-serif; text-transform: uppercase; }
.motion-proof-result strong { color: var(--theme-text-strong); font: 900 20px "Manrope",sans-serif; }
.motion-proof-result i { grid-row: 1 / 3; grid-column: 2; color: var(--feature-accent); font-style: normal; }
.motion-proof dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 0; }
.motion-proof dl div { border-left: 1px solid var(--theme-border); padding-left: 15px; }
.motion-proof dt { color: var(--feature-accent); font: 900 34px "Manrope",sans-serif; }
.motion-proof dd { margin: 3px 0 0; color: var(--theme-text-muted); font-size: 10px; line-height: 1.4; }

.motion-process { margin-top: 118px; }
.motion-process .feature-section-heading { max-width: 760px; }
.motion-process-screen { display: grid; grid-template-columns: minmax(260px,.68fr) minmax(0,1.32fr); align-items: center; gap: 52px; min-height: 620px; margin-top: 34px; padding: 52px; border: 1px solid var(--theme-border); border-radius: 30px; background: color-mix(in srgb,var(--theme-surface-solid) 88%,transparent); }
.motion-process-screen--story,
.motion-process-screen--continuity { min-height: 150svh; align-items: start; }
.motion-process-screen--story > *,
.motion-process-screen--continuity > * { position: sticky; top: 108px; }
.motion-process-copy > span { color: var(--feature-accent); font: 900 11px "Manrope",sans-serif; letter-spacing: .1em; }
.motion-process-copy h3 { margin: 18px 0 0; color: var(--theme-text-strong); font: 900 clamp(30px,3.5vw,47px)/1.04 "Manrope",sans-serif; letter-spacing: -.045em; }
.motion-process-copy > p { margin: 18px 0 0; color: var(--theme-text-muted); font-size: 15px; line-height: 1.72; }
.motion-process-copy > small { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; color: var(--theme-text-soft); font: 800 9px "Manrope",sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.motion-process-copy > small i { width: 7px; height: 7px; border-radius: 50%; background: var(--feature-accent); box-shadow: 0 0 0 4px var(--feature-accent-soft); }
.motion-card-bar { min-height: 50px; color: #858e89; }
.motion-card-bar strong { color: #edf0ed; }

.motion-storyboard-card,
.motion-continuity-card,
.motion-editor-card { overflow: hidden; border-radius: 21px; }
.motion-brief-analysis { padding: 26px; }
.motion-brief-analysis p { margin: 0; color: #8e9691; font: 700 17px/1.8 "Manrope",sans-serif; }
.motion-brief-analysis mark { padding: 2px 4px; border-radius: 4px; color: inherit; background: transparent; transition: color 180ms ease, background 180ms ease; }
.motion-brief-analysis mark.is-active { color: #f7f8f3; background: rgba(119,113,255,.3); }
.motion-storyboard { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; padding: 0 18px 20px; }
.motion-storyboard article { position: relative; min-width: 0; padding: 12px; border: 1px solid #303633; border-radius: 10px; opacity: .32; transform: translateY(8px); transition: opacity 200ms ease, transform 300ms ease, border-color 200ms ease; }
.motion-storyboard article.is-built { opacity: 1; transform: none; }
.motion-storyboard article.is-active { border-color: #7771ff; background: rgba(119,113,255,.1); }
.motion-storyboard article > span { color: #7771ff; font: 900 7px "Manrope",sans-serif; }
.motion-storyboard article > i { display: block; height: 58px; margin: 9px 0; border-radius: 6px; background: linear-gradient(145deg,#28302c,#191e1c); }
.motion-storyboard article:nth-child(2) > i { background: repeating-linear-gradient(135deg,#242a28 0 8px,#343b37 8px 10px); }
.motion-storyboard article:nth-child(3) > i { background: linear-gradient(to top,#7771ff 0 62%,#252b28 62%); }
.motion-storyboard article:nth-child(4) > i { background: linear-gradient(150deg,#a9f970 0 7%,#202622 7%); }
.motion-storyboard strong { display: block; overflow: hidden; color: #e9ece9; font: 800 9px "Manrope",sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.motion-storyboard small { color: #737c77; font-size: 7px; }

.motion-continuity-stage { position: relative; overflow: hidden; aspect-ratio: 16/8.4; background: radial-gradient(circle at 65% 30%,rgba(119,113,255,.16),transparent 33%),#151a18; }
.motion-continuity-stage svg { position: absolute; inset: 10% 5%; width: 90%; height: 80%; overflow: visible; }
.continuity-path { fill: none; stroke: #7771ff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 970; stroke-dashoffset: calc(970 - 970 * var(--continuity)); }
.motion-continuity-stage circle { fill: #131715; stroke: #a9f970; stroke-width: 4; opacity: calc(.25 + var(--continuity)); }
.continuity-stat { position: absolute; left: 7%; top: 10%; display: grid; }
.continuity-stat span { color: #89928d; font: 800 8px "Manrope",sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.continuity-stat strong { color: #a9f970; font: 900 clamp(64px,8vw,104px)/.88 "Manrope",sans-serif; letter-spacing: -.08em; }
.motion-continuity-stage > p { position: absolute; right: 7%; bottom: 8%; max-width: 58%; margin: 0; color: #f2f4ef; font: 900 clamp(24px,3vw,40px)/1 "Manrope",sans-serif; letter-spacing: -.04em; text-align: right; }
.motion-master-track { display: grid; grid-template-columns: 36px minmax(0,1fr) 36px; align-items: center; gap: 10px; padding: 18px; color: #69716d; font: 700 7px "Manrope",sans-serif; }
.motion-master-track > div { position: relative; display: grid; grid-template-columns: 1.5fr 1.2fr 1fr 1fr; gap: 3px; height: 26px; }
.motion-master-track i,.motion-master-track b,.motion-master-track em,.motion-master-track u { border-radius: 4px; background: #313734; }
.motion-master-track b { background: rgba(119,113,255,.55); }.motion-master-track em { background: rgba(169,249,112,.5); }.motion-master-track u { background: rgba(255,255,255,.18); }
.motion-master-track strong { position: absolute; z-index: 3; left: calc(var(--continuity) * 100%); top: -4px; bottom: -4px; width: 2px; background: #fff; transform: translateX(-1px); }

.motion-mode-buttons { display: flex; gap: 8px; margin-top: 24px; }
.motion-mode-buttons button { min-height: 38px; padding: 0 14px; border: 1px solid var(--theme-border); border-radius: 99px; color: var(--theme-text-muted); background: var(--theme-surface-solid); font-size: 10px; font-weight: 800; cursor: pointer; }
.motion-mode-buttons button.is-active { color: var(--feature-accent); border-color: color-mix(in srgb,var(--feature-accent) 55%,var(--theme-border)); background: var(--feature-accent-soft); }
.motion-editor-workspace { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(170px,.85fr); gap: 14px; padding: 16px; }
.motion-editor-preview { position: relative; display: grid; align-content: center; min-height: 250px; overflow: hidden; padding: 30px; border-radius: 12px; background: radial-gradient(circle at 65% 30%,rgba(119,113,255,.2),transparent 38%),#171d1a; }
.motion-editor-preview span { color: #87908b; font: 800 8px "Manrope",sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.motion-editor-preview strong { color: #a9f970; font: 900 clamp(45px,6vw,74px)/.9 "Manrope",sans-serif; letter-spacing: -.08em; }
.motion-editor-preview small { color: #edf0ed; font: 800 11px "Manrope",sans-serif; text-transform: uppercase; }
.editor-route { position: absolute; right: -5%; top: 12%; width: 54%; height: 70%; border: 3px solid #7771ff; border-left: 0; border-radius: 0 60% 60% 0; opacity: .65; transition: opacity 220ms ease, transform 300ms ease; }
.motion-editor-card:not(.is-refined) .editor-route { opacity: 1; transform: scale(1.14); }
.motion-layer-list { display: grid; gap: 6px; }
.motion-layer-list button { display: grid; grid-template-columns: 8px minmax(0,1fr) auto; align-items: center; gap: 7px; min-width: 0; padding: 11px 9px; border: 1px solid #2d3430; border-radius: 8px; color: #b5bcb7; background: #1a201d; text-align: left; }
.motion-layer-list button.is-active { border-color: #7771ff; background: rgba(119,113,255,.11); }
.motion-layer-list button i { width: 6px; height: 6px; border-radius: 2px; background: #7771ff; }
.motion-layer-list button span { overflow: hidden; font: 800 8px "Manrope",sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.motion-layer-list button small { color: #747d78; font-size: 6px; }
.motion-editor-timeline { display: grid; grid-template-columns: 50px minmax(0,1fr); align-items: center; gap: 8px; padding: 0 16px 16px; color: #757e79; font: 800 7px "Manrope",sans-serif; text-transform: uppercase; }
.motion-editor-timeline > div { display: grid; grid-template-columns: 1.4fr 1fr .9fr 1fr; gap: 3px; height: 24px; }
.motion-editor-timeline i { border-radius: 4px; background: rgba(119,113,255,.42); transition: transform 260ms ease; transform-origin: left; }
.motion-editor-timeline i:nth-child(3) { background: rgba(169,249,112,.42); }.motion-editor-timeline i:nth-child(4) { background: rgba(255,255,255,.18); }
.motion-editor-card.is-refined [data-end-layer] { transform: scaleX(1.24); }

.motion-chat-section { display: grid; grid-template-columns: minmax(260px,.7fr) minmax(0,1.3fr); align-items: center; gap: 58px; margin-top: 118px; }
.motion-chat-section h2 { margin: 0; color: var(--theme-text-strong); font: 900 clamp(34px,4vw,56px)/1 "Manrope",sans-serif; letter-spacing: -.05em; }
.motion-chat-section > div:first-child > p:last-child { color: var(--theme-text-muted); line-height: 1.7; }
.motion-chat-card { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(170px,.75fr); overflow: hidden; border-radius: 22px; }
.motion-chat-messages { display: grid; gap: 12px; padding: 20px; border-right: 1px solid #292e2c; }
.motion-chat-messages article { padding: 13px; border-radius: 12px; color: #cbd0cc; background: #1a1f1d; }
.motion-chat-messages article span { color: #a9f970; font: 800 8px "Manrope",sans-serif; text-transform: uppercase; }
.motion-chat-messages article p { margin: 7px 0 0; font-size: 10px; line-height: 1.55; }
.motion-chat-messages > div { display: grid; gap: 3px; padding-left: 12px; border-left: 2px solid #7771ff; }
.motion-chat-messages > div strong { font: 800 10px "Manrope",sans-serif; }.motion-chat-messages > div span { color: #79827d; font-size: 8px; }
.motion-chat-result { display: grid; align-content: center; gap: 15px; padding: 20px; background: #151917; }
.motion-chat-result > div { display: grid; gap: 6px; color: #8a938e; font: 800 7px "Manrope",sans-serif; text-transform: uppercase; }
.motion-chat-result i { height: 12px; border-radius: 3px; background: #303633; }
.motion-chat-result .is-shorter { width: 63%; background: #7771ff; }.motion-chat-result .is-simple { width: 48%; background: #a9f970; }.motion-chat-result .is-longer { width: 92%; background: #4c5350; }
.motion-chat-result > strong { color: #a9f970; font: 800 9px "Manrope",sans-serif; text-transform: uppercase; }

.motion-showcase,.motion-seo-section,.motion-workflow { margin-top: 124px; }
.motion-showcase-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 42px; }
.motion-showcase-grid article { min-width: 0; padding: 12px 12px 20px; border: 1px solid var(--theme-border); border-radius: 17px; background: color-mix(in srgb,var(--theme-surface-solid) 86%,transparent); }
.motion-showcase-grid article > div { display: grid; place-items: center; aspect-ratio: 16/10; overflow: hidden; border-radius: 10px; background: #151a18; }
.motion-showcase-grid h3 { margin: 18px 5px 0; color: var(--theme-text-strong); font: 800 14px "Manrope",sans-serif; }
.motion-showcase-grid p { margin: 8px 5px 0; color: var(--theme-text-muted); font-size: 10px; line-height: 1.55; }
.micro-type { align-content: center; color: #f5f6ef; font: 900 17px/1 "Manrope",sans-serif; }.micro-type span { transform: translateX(-18px); animation: micro-slide 3.2s ease-in-out infinite; }.micro-type strong { color: #a9f970; font-size: 26px; animation: micro-slide 3.2s ease-in-out 100ms infinite; }
.micro-data { position: relative; grid-template-columns: repeat(3,25px); align-items: end; gap: 5px; padding-bottom: 24px; }.micro-data i { width: 100%; height: 34%; border-radius: 4px 4px 0 0; background: #7771ff; animation: micro-bars 2.8s ease-in-out infinite; transform-origin: bottom; }.micro-data i:nth-child(2){height:58%;animation-delay:120ms}.micro-data i:nth-child(3){height:82%;animation-delay:240ms;background:#a9f970}.micro-data strong{position:absolute;right:12%;top:15%;color:#f4f5ef;font:900 25px "Manrope",sans-serif}
.micro-process { grid-template-columns: 34px 1fr 34px 1fr 34px; padding: 0 17px; }.micro-process i { display:grid;place-items:center;width:34px;height:34px;border:1px solid #7771ff;border-radius:50%;color:#fff;font:800 10px "Manrope",sans-serif;animation:micro-node 3s ease-in-out infinite}.micro-process i:nth-of-type(2){animation-delay:250ms}.micro-process i:nth-of-type(3){animation-delay:500ms}.micro-process b{width:100%;height:2px;background:#3a413d;overflow:hidden}.micro-map svg{width:82%;overflow:visible}.micro-map path{fill:none;stroke:#7771ff;stroke-width:3;stroke-linecap:round;stroke-dasharray:290;animation:micro-route 3.2s ease-in-out infinite}.micro-map circle{fill:#151a18;stroke:#a9f970;stroke-width:3}
@keyframes micro-slide{0%,15%{opacity:0;transform:translateX(-18px)}35%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateX(12px)}}
@keyframes micro-bars{0%,15%{transform:scaleY(.12)}45%,82%{transform:scaleY(1)}100%{transform:scaleY(.12)}}
@keyframes micro-node{0%,15%{background:transparent;transform:scale(.7)}35%,82%{background:#7771ff;transform:scale(1)}100%{background:transparent;transform:scale(.7)}}
@keyframes micro-route{0%,15%{stroke-dashoffset:290}60%,82%{stroke-dashoffset:0}100%{stroke-dashoffset:-290}}

.motion-seo-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:40px}.motion-seo-grid>div{padding:28px;border:1px solid var(--theme-border);border-radius:17px;background:color-mix(in srgb,var(--theme-surface-solid) 82%,transparent)}.motion-seo-grid h3{margin:0;color:var(--theme-text-strong);font:800 17px/1.3 "Manrope",sans-serif}.motion-seo-grid p{margin:12px 0 0;color:var(--theme-text-muted);line-height:1.72}.motion-related-link{margin:24px 0 0;color:var(--theme-text-muted);font-size:13px}.motion-related-link a{color:var(--feature-accent);font-weight:800}.motion-final-cta{margin-bottom:90px}

@media(max-width:1000px){
  .motion-proof{grid-template-columns:1fr}.motion-process-screen{grid-template-columns:1fr;min-height:0}.motion-process-screen--story,.motion-process-screen--continuity{min-height:145svh}.motion-process-screen--story .motion-process-copy,.motion-process-screen--continuity .motion-process-copy{position:static}.motion-process-screen--story .motion-storyboard-card,.motion-process-screen--continuity .motion-continuity-card{top:88px}.motion-chat-section{grid-template-columns:1fr}.motion-showcase-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:700px){
  .motion-shell{width:min(100% - 28px,1180px);padding-top:6px}.motion-hero{padding:38px 0 62px}.motion-hero h1{font-size:clamp(45px,14vw,68px)}.motion-hero-demo{margin-top:38px;border-radius:20px}.motion-demo-bar{padding:0 14px}.motion-brief{grid-template-columns:1fr;gap:4px;padding:11px 14px}.motion-brief p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.motion-canvas{min-height:0;aspect-ratio:1/1}.motion-scene{padding:28px}.motion-scene--opening h2,.motion-scene--ending h2{font-size:clamp(38px,12vw,60px)}.motion-scene--map{grid-template-columns:.56fr 1.44fr}.motion-map-copy>strong{font-size:90px}.motion-map-copy>small{font-size:13px}.motion-scene--routes strong{font-size:84px}.motion-scene--routes i{font-size:32px}.motion-scene--scale{grid-template-columns:1fr;gap:10px}.motion-scene--scale>div{position:absolute;z-index:2}.motion-playback{grid-template-columns:34px minmax(0,1fr);gap:10px;padding:0 12px}.motion-playback time{display:none}.motion-scene-track button span{display:none}.motion-proof{gap:25px;padding:28px 20px}.motion-proof dl{gap:8px}.motion-proof dl div{padding-left:9px}.motion-proof dt{font-size:27px}.motion-process{margin-top:80px}.motion-process-screen{gap:30px;min-height:0;padding:28px 17px;border-radius:22px}.motion-process-screen--story,.motion-process-screen--continuity{min-height:140svh}.motion-process-screen--story .motion-storyboard-card,.motion-process-screen--continuity .motion-continuity-card{top:74px}.motion-storyboard{grid-template-columns:repeat(4,minmax(82px,1fr));overflow-x:auto}.motion-storyboard article{min-width:82px}.motion-continuity-stage{aspect-ratio:1.2/1}.motion-editor-workspace{grid-template-columns:1fr}.motion-chat-card{grid-template-columns:1fr}.motion-chat-messages{border-right:0;border-bottom:1px solid #292e2c}.motion-showcase,.motion-seo-section,.motion-workflow{margin-top:88px}.motion-showcase-grid,.motion-seo-grid{grid-template-columns:1fr}.motion-showcase-grid article>div{aspect-ratio:16/8}.motion-final-cta{margin-bottom:70px}
}

@media(prefers-reduced-motion:reduce){
  .motion-scene,.motion-map .route,.motion-map .city,.motion-scene--scale .chart-line,.motion-scene--scale circle,.motion-storyboard article,.motion-brief-analysis mark,.editor-route,.motion-editor-timeline i{transition:none}.micro-type span,.micro-type strong,.micro-data i,.micro-process i,.micro-map path{animation:none}.motion-canvas .motion-scene{display:none}.motion-canvas .motion-scene--ending{display:grid;opacity:1;visibility:visible;transform:none}.motion-scene--ending>i{width:min(63%,680px)}
}