/* V8 / Product stories in motion. Every scene has a readable static state. */
.language-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  flex: none;
  border: 1px solid #DDE2EA;
  border-radius: 7px;
  background: #EEF1F6;
}
.language-switch > button {
  min-width: 35px;
  min-height: 29px;
  padding: 5px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #687282;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
}
.language-switch > button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px #14171D12; }
.language-switch > button:hover { color: var(--green); }
.mobile-menu > .language-switch { margin: 0 0 23px; }
.motion-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 35px;
  padding: 7px 11px;
  border: 1px solid #DCE1E9;
  border-radius: 6px;
  background: transparent;
  color: #626B78;
  font-size: 10px;
  line-height: 1.3;
}
.motion-control > .icon { width: 13px; height: 13px; }
.motion-control:hover, .motion-control[aria-pressed="true"] { color: var(--green); border-color: #BACAF2; background: #EEF3FF; }
.motion-control:disabled { cursor: default; background: #EFF1F5; border-color: #DFE4EC; color: #6F7886; opacity: .75; }
.hero-bottom { flex-wrap: wrap; gap: 16px; }

/* The narrative scrolls; the product canvas holds its position. */
.motion-section { background: #F7F8FA; }
.motion-story-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 65px; align-items: stretch; }
.story-steps { min-width: 0; }
.story-step { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 580px; padding: 56px 0 56px 25px; position: relative; border-left: 1px solid #E0E5ED; }
.story-step::before { content: ""; position: absolute; left: -2px; top: 29%; height: 42%; width: 3px; background: var(--green); transform: scaleY(0); transform-origin: center; transition: transform .65s var(--ease); }
.story-step.is-active::before { transform: scaleY(1); }
.story-step > .eyebrow { color: #6C7789; font-size: 9px; letter-spacing: .11em; }
.story-step.is-active > .eyebrow { color: var(--green); }
.story-step > h3 { font-size: 31px; line-height: 1.5; letter-spacing: -.045em; font-weight: 600; margin: 21px 0 19px; }
.story-step > p { color: var(--muted); font-size: 13px; line-height: 1.95; max-width: 410px; margin: 0; }
.story-benefits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 23px; }
.story-benefits > span { padding: 5px 8px; font-size: 9px; color: #5E6B7E; background: #EDF0F5; border: 1px solid #E0E5ED; border-radius: 4px; line-height: 1.6; }
.story-trigger { margin-top: 20px; padding: 8px 0; border: 0; background: none; font-family: inherit; font-size: 12px; }
.motion-stage-wrap { min-width: 0; position: relative; }
.motion-stage { position: sticky; top: 116px; height: 580px; min-width: 0; border: 1px solid #DCE2EC; border-radius: 18px; background: #F0F3F8; overflow: hidden; isolation: isolate; box-shadow: 0 25px 65px -48px #25365B3B; }
.motion-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(#DBE1ED55 1px, transparent 1px), linear-gradient(90deg, #DBE1ED55 1px, transparent 1px); background-size: 34px 34px; mask-image: radial-gradient(ellipse at center, #000, transparent 76%); pointer-events: none; }
.motion-stage-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 55px; padding: 0 23px; border-bottom: 1px solid #DDE3ED; font-size: 9px; color: #67758B; background: #F8FAFCB3; }
.motion-stage-top > span:first-child { display: flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', Consolas, monospace; font-size: 8px; letter-spacing: .08em; }
.motion-stage-top .status-dot { width: 5px; height: 5px; box-shadow: 0 0 0 4px #2457E60B; }
.story-pane { position: absolute; inset: 55px 0 80px; display: none; }
.story-pane.is-active { display: block; }
.story-pane.is-active { animation: motion-scene-enter .65s var(--ease) both; }
.scene-caption { display: flex; align-items: center; justify-content: center; gap: 7px; position: absolute; bottom: 10px; left: 18px; right: 18px; margin: 0; color: #5F6D82; font-size: 10px; text-align: center; line-height: 1.7; }
.scene-caption > .small-dot { width: 4px; height: 4px; }
.story-tabs { position: absolute; display: flex; left: 22px; right: 22px; bottom: 17px; padding: 4px; gap: 4px; background: #E2E8F2; border: 1px solid #D8E0EE; border-radius: 9px; }
.story-tabs > button { display: flex; align-items: center; justify-content: center; gap: 7px; flex: 1; min-width: 0; min-height: 40px; padding: 9px 7px; border: 0; border-radius: 6px; font-size: 10px; line-height: 1.5; color: #68768B; background: transparent; transition: background .3s ease, color .3s ease, box-shadow .3s ease; }
.story-tabs > button > span { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 8px; color: #7C899D; }
.story-tabs > button[aria-selected="true"] { background: #fff; color: var(--green); box-shadow: 0 3px 6px #1C335411; }
.story-tabs > button[aria-selected="true"] > span { color: var(--green); }
.motion-timeline { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #DDE4F0; }
.motion-timeline > span { display: block; width: var(--story-progress, 33.333%); max-width: 100%; height: 100%; background: var(--green); transition: width .7s var(--ease); }

/* A single brief separates into video, imagery and multilingual copy. */
.idea-capsule { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 9px; top: 23px; left: 50%; transform: translateX(-50%); padding: 12px 19px; max-width: calc(100% - 36px); border: 1px solid #D7E1F7; border-radius: 8px; background: #fff; white-space: nowrap; color: #384B70; box-shadow: 0 6px 20px -15px #2457E640; font-size: 11px; }
.idea-capsule > .icon { width: 18px; height: 18px; color: var(--green); }
.idea-pulse { width: 5px; height: 5px; flex: none; border-radius: 50%; background: var(--green); animation: motion-idea-pulse 2.5s ease-in-out infinite; }
.creation-beam { position: absolute; top: 68px; left: 50%; width: 1px; height: 45px; background: #CAD8F0; }
.creation-beam > i { position: absolute; display: block; left: -2px; top: 0; width: 5px; height: 9px; border-radius: 4px; background: var(--green); animation: motion-beam-travel 2.4s linear infinite; }
.creation-beam > i:nth-child(2) { animation-delay: -.8s; }
.creation-beam > i:nth-child(3) { animation-delay: -1.6s; }
.motion-content-stack { position: absolute; top: 117px; left: 0; right: 0; height: 276px; perspective: 900px; }
.motion-content-card { position: absolute; left: 50%; top: 0; width: 169px; min-height: 240px; padding: 15px; border: 1px solid #D9E0EB; border-radius: 11px; background: #fff; color: var(--ink); box-shadow: 0 15px 38px -24px #22365E4D; transform: translate(calc(-50% + var(--fan-x)), var(--fan-y)) rotate(var(--fan-angle)); animation: motion-content-fan 8s var(--ease) infinite; transform-origin: center 80%; }
.card-video { --fan-x: -150px; --fan-y: 25px; --fan-angle: -10deg; z-index: 2; }
.card-image { --fan-x: 0px; --fan-y: -7px; --fan-angle: 1deg; z-index: 3; }
.card-copy { --fan-x: 150px; --fan-y: 34px; --fan-angle: 10deg; z-index: 1; }
.motion-card-top { display: flex; align-items: center; gap: 7px; min-height: 24px; margin-bottom: 12px; }
.motion-card-top > .icon { width: 14px; height: 14px; color: #596A84; }
.motion-card-top > b { font-size: 10px; font-weight: 600; line-height: 1.4; }
.motion-content-card > small { display: block; margin-top: 12px; color: #63718A; font-size: 8px; line-height: 1.8; }
.motion-video-poster { position: relative; height: 156px; overflow: hidden; background: #1B202B; border-radius: 6px; padding: 17px 13px; color: #fff; }
.motion-video-poster > .mono { position: absolute; left: 13px; top: 17px; font-size: 10px; line-height: 1.45; letter-spacing: -.04em; z-index: 2; }
.creative-object { position: absolute; width: 88px; height: 88px; right: -6px; bottom: 6px; transform-style: preserve-3d; animation: motion-object-turn 8s ease-in-out infinite; }
.creative-object > i { position: absolute; width: 74px; height: 74px; border: 1px solid #CCD8F390; border-radius: 15px; background: linear-gradient(140deg, #FFFFFF85, #FFFFFF08 52%, #8EADD545); transform: rotate(35deg); }
.creative-object > i:nth-child(2) { transform: translate(-9px, -9px) rotate(35deg); opacity: .65; }
.creative-object > i:nth-child(3) { transform: translate(-18px, -18px) rotate(35deg); opacity: .35; }
.poster-play { position: absolute; bottom: 11px; left: 11px; display: grid; place-items: center; width: 23px; height: 23px; color: #263D68; background: #fff; border-radius: 50%; z-index: 2; }
.poster-play > .icon { width: 10px; height: 10px; fill: currentColor; stroke-width: 0; margin-left: 2px; }
.motion-image-poster { position: relative; height: 156px; overflow: hidden; border-radius: 6px; background: #E7EDF7; padding: 17px 12px; }
.motion-image-poster > b { position: relative; display: block; font-size: 21px; letter-spacing: -.06em; line-height: 1.15; z-index: 1; margin-top: 24px; }
.motion-image-poster > .mono { position: absolute; bottom: 13px; left: 12px; font-size: 6px; color: #516789; letter-spacing: .06em; }
.poster-rings { position: absolute; width: 134px; height: 134px; top: -16px; right: -49px; border: 1px solid #A4B7D2; border-radius: 50%; animation: motion-rings-expand 4s ease-in-out infinite; }
.poster-rings::before, .poster-rings::after { content: ""; position: absolute; inset: 13px; border: 1px solid #B4C3D9; border-radius: 50%; }
.poster-rings::after { inset: 28px; }
.card-copy { padding-top: 16px; }
.animated-copy-lines { display: grid; gap: 10px; margin: 31px 0 27px; }
.animated-copy-lines > i { display: block; width: 100%; height: 5px; border-radius: 2px; background: #D8E1F0; transform-origin: left; animation: motion-type-line 4.8s ease-in-out infinite; }
.animated-copy-lines > i:nth-child(2) { width: 92%; animation-delay: .18s; }
.animated-copy-lines > i:nth-child(3) { width: 82%; animation-delay: .36s; }
.animated-copy-lines > i:nth-child(4) { width: 64%; animation-delay: .54s; }
.copy-language-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 31px; }
.copy-language-tags > span { padding: 4px 6px; border: 1px solid #DCE4F3; border-radius: 4px; font-size: 7px; color: #486391; background: #F3F6FD; }

/* A visible packet travels from the AI hub to each platform. */
.network-wrap { position: absolute; left: 50%; top: 47%; width: 88%; max-width: 500px; aspect-ratio: 500 / 380; transform: translate(-50%, -50%); }
.network-lines { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.network-path { fill: none; stroke: #B8C9E3; stroke-width: 1.2; }
.network-packet { fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 7 93; stroke-dashoffset: -24; animation: motion-network-packet 2.9s linear var(--delay, 0s) infinite; }
.network-hub { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 95px; height: 95px; background: #1B202B; border: 1px solid #36445A; border-radius: 17px; box-shadow: 0 13px 36px -23px #163A815E; z-index: 2; color: #fff; }
.network-hub > .icon { width: 19px; height: 19px; color: #AFC5FF; }
.network-hub > b { font-size: 24px; line-height: 1.1; font-weight: 600; letter-spacing: -.05em; }
.network-hub > span { font-size: 8px; color: #BECBE1; }
.network-hub > i { position: absolute; inset: -12px; border: 1px solid #2457E638; border-radius: 24px; z-index: -1; animation: motion-hub-send 2.9s ease-out infinite; }
.network-node { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; left: var(--node-x); top: var(--node-y); transform: translate(-50%, -50%); min-width: 79px; min-height: 74px; padding: 11px 10px; border: 1px solid #D8E1F0; border-radius: 12px; background: #fff; box-shadow: 0 7px 20px -15px #284B8A3D; z-index: 2; animation: motion-node-receive 2.9s ease-out calc(var(--delay, 0s) + .7s) infinite; }
.network-node > img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
.network-node > span { font-size: 8px; line-height: 1.3; font-weight: 500; color: #4A5A75; }
.node-check { position: absolute; width: 13px; height: 13px; top: -4px; right: -4px; border-radius: 50%; background: var(--green); border: 2px solid #F0F3F8; }
.node-check::before { content: ""; display: block; width: 5px; height: 3px; border-left: 1px solid #fff; border-bottom: 1px solid #fff; transform: translate(2px, 2px) rotate(-45deg); }

/* A conversation builds on screen, then becomes a customer record. */
.chat-window { width: 77%; max-width: 424px; margin: 22px auto 0; padding: 19px; border: 1px solid #D9E2F0; border-radius: 13px; background: #fff; box-shadow: 0 14px 32px -25px #244A862F; }
.chat-window-top { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; margin-bottom: 13px; border-bottom: 1px solid #E6EBF3; }
.chat-ai-avatar { display: grid; place-items: center; flex: none; width: 34px; height: 34px; color: var(--green); background: #E9F0FF; border-radius: 9px; }
.chat-ai-avatar > .icon { width: 18px; height: 18px; }
.chat-window-top > div { flex: 1; min-width: 0; }
.chat-window-top b { display: block; font-size: 11px; font-weight: 600; line-height: 1.4; }
.chat-window-top > div > span { display: block; font-size: 8px; color: #65738B; line-height: 1.6; margin-top: 3px; }
.chat-language-code { flex: none; color: #627EA7; font-size: 8px; border: 1px solid #DFE8F8; border-radius: 4px; padding: 4px 5px; }
.chat-bubble { width: 88%; padding: 11px 13px; border-radius: 9px; color: #42536E; font-size: 11px; line-height: 1.65; }
.chat-bubble small { display: block; font-size: 7px; line-height: 1.6; margin-top: 4px; color: #64738C; }
.chat-in { background: #F0F3F8; border: 1px solid #E5EAF2; border-bottom-left-radius: 3px; }
.chat-out { background: #EAF0FF; border: 1px solid #D5E2FF; margin-left: auto; border-bottom-right-radius: 3px; color: #294987; }
.chat-typing { display: flex; align-items: center; justify-content: flex-end; gap: 3px; height: 31px; padding-right: 5px; color: #5574A2; }
.chat-typing > span { font-size: 8px; margin-right: 6px; }
.chat-typing > i { width: 4px; height: 4px; background: #7491C0; border-radius: 50%; animation: motion-typing-dot 1.1s ease-in-out infinite; }
.chat-typing > i:nth-of-type(2) { animation-delay: .18s; }
.chat-typing > i:nth-of-type(3) { animation-delay: .36s; }
.chat-confirmation { display: flex; align-items: center; gap: 7px; padding: 14px 0 0; font-size: 9px; color: #456BAA; }
.chat-confirmation > .icon { width: 15px; height: 15px; }
.mini-analytics { display: flex; align-items: center; gap: 17px; width: 77%; max-width: 424px; margin: 13px auto 0; padding: 12px 17px; border: 1px solid #D9E2F0; border-radius: 10px; background: #fff; }
.mini-analytics > div:first-child { flex: none; }
.mini-analytics > div:first-child > span { color: #65738B; font-size: 8px; }
.mini-analytics strong { display: block; font-size: 29px; font-weight: 500; line-height: 1.2; color: var(--ink); letter-spacing: -.06em; }
.mini-analytics strong > small { margin-left: 5px; font-size: 8px; font-weight: 400; letter-spacing: 0; color: #64738C; }
.motion-bars { display: flex; align-items: flex-end; justify-content: flex-end; flex: 1; gap: 5px; height: 43px; min-width: 0; }
.motion-bar { display: block; flex: 1; height: var(--bar-size); max-width: 16px; border-radius: 3px 3px 0 0; background: #BACCF4; transform-origin: bottom; animation: motion-bar-grow 4s var(--ease) var(--delay, 0s) infinite; }
.motion-bar:nth-last-child(-n+2) { background: var(--green); }
.analytics-caption { font-size: 8px; line-height: 1.65; max-width: 66px; color: #65738B; }
.motion-running .story-pane.is-active .chat-in { animation: motion-chat-in 8s var(--ease) infinite; }
.motion-running .story-pane.is-active .chat-out { animation: motion-chat-out 8s var(--ease) infinite; }
.motion-running .story-pane.is-active .chat-confirmation { animation: motion-chat-record 8s var(--ease) infinite; }

/* Keep the original content panels active, too. */
.creation-source { overflow: hidden; }
.creation-visual { padding-right: 12px; }
.creation-scanning-line { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: #85AAFF; box-shadow: 0 -8px 22px 9px #2457E640; opacity: .8; animation: motion-source-scan 5.5s ease-in-out infinite; }
.creation-visual .motion-output { animation: motion-output-expand 6.5s var(--ease) infinite; }
.creation-visual .output-video { --output-angle: 2.5deg; --output-x: 12px; }
.creation-visual .output-copy { --output-angle: -2deg; --output-x: -10px; animation-delay: .4s; }
.creation-visual .copy-lines > i { transform-origin: left; animation: motion-type-line 4.8s ease-in-out infinite; }
.creation-visual .copy-lines > i:nth-child(2) { animation-delay: .2s; }
.creation-visual .copy-lines > i:nth-child(3) { animation-delay: .4s; }
.agent-signal { display: inline-flex; align-items: center; gap: 3px; height: 19px; margin-left: auto; margin-right: 10px; }
.agent-signal > i { width: 3px; height: 8px; border-radius: 2px; background: #6A8CE8; animation: motion-agent-signal 1.3s ease-in-out var(--agent-delay, 0s) infinite; }
.agent-signal > i:nth-child(2) { height: 17px; animation-delay: calc(var(--agent-delay, 0s) + .2s); }
.agent-signal > i:nth-child(3) { height: 11px; animation-delay: calc(var(--agent-delay, 0s) + .4s); }
.ribbon-track:has(.ribbon-loop) { overflow: hidden; }
.ribbon-loop { display: flex; width: max-content; animation: motion-platform-marquee 32s linear infinite; }
.ribbon-group { display: flex; align-items: center; gap: 35px; padding-right: 35px; flex: none; }
.ribbon-group > span { display: inline-flex; align-items: center; gap: 8px; flex: none; color: #626B78; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ribbon-group > span > img { width: 23px; height: 23px; border-radius: 5px; object-fit: contain; }
.ribbon-track:hover .ribbon-loop { animation-play-state: paused !important; }

/* Entrance animations belong to a visible component; static content stays visible. */
.hero.motion-item .hero-intro, .hero.motion-item .hero-title,
.hero.motion-item .hero-description, .hero.motion-item .hero-actions,
.hero.motion-item .hero-proof, .hero.motion-item .hero-stage { animation: none; }
.hero.motion-item .lead-toast { animation-name: gentle-float; animation-duration: 7s; animation-delay: 0s; animation-fill-mode: none; }
.hero.motion-running .hero-title { animation: motion-copy-enter .85s var(--ease) both; }
.hero.motion-running .hero-description { animation: motion-copy-enter .85s var(--ease) .08s both; }
.hero.motion-running .hero-actions { animation: motion-copy-enter .85s var(--ease) .16s both; }
.hero.motion-running .hero-stage { animation: motion-product-enter 1.1s var(--ease) both; }

/* One controller governs new scenes and the existing hero animations. */
.motion-item { --motion-play-state: paused; }
.motion-item.motion-running { --motion-play-state: running; }
.motion-item, .motion-item *, .motion-item::before, .motion-item::after,
.motion-item *::before, .motion-item *::after { animation-play-state: var(--motion-play-state, paused); }
.story-pane:not(.is-active), .story-pane:not(.is-active) *,
.story-pane:not(.is-active) *::before, .story-pane:not(.is-active) *::after { animation-play-state: paused !important; }
html.motion-paused *, html.motion-paused *::before,
html.motion-paused *::after { animation-play-state: paused !important; }
html.motion-paused .hero-copy, html.motion-paused .hero-intro,
html.motion-paused .hero-title, html.motion-paused .hero-description,
html.motion-paused .hero-actions, html.motion-paused .hero-proof,
html.motion-paused .hero-stage, html.motion-paused .hero .reveal { opacity: 1 !important; transform: none !important; }
html.motion-paused .chat-bubble,
html.motion-paused .chat-confirmation { opacity: 1 !important; transform: none !important; }
html.motion-paused .story-pane.is-active { transform: none !important; }
html.motion-paused .chat-typing { visibility: hidden; }

@keyframes motion-scene-enter { from { transform: translateY(12px) scale(.975); } to { transform: none; } }
@keyframes motion-copy-enter { from { opacity: .45; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes motion-product-enter { from { opacity: .45; transform: translateX(45px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes motion-idea-pulse { 0%,100% { box-shadow: 0 0 0 0 #2457E63B; } 60% { box-shadow: 0 0 0 7px #2457E600; } }
@keyframes motion-beam-travel { 0% { transform: translateY(0); opacity: .25; } 70% { opacity: 1; } 100% { transform: translateY(38px); opacity: 0; } }
@keyframes motion-content-fan {
  0%, 62%, 100% { transform: translate(calc(-50% + var(--fan-x)), var(--fan-y)) rotate(var(--fan-angle)); }
  14%, 23% { transform: translate(-50%, 25px) rotate(0deg) scale(.89); }
  40% { transform: translate(calc(-50% + var(--fan-x)), calc(var(--fan-y) - 7px)) rotate(var(--fan-angle)) scale(1.02); }
  77%, 88% { transform: translate(calc(-50% + var(--fan-x) * .72), calc(var(--fan-y) + 6px)) rotate(calc(var(--fan-angle) * .55)); }
}
@keyframes motion-object-turn { 0%,100% { transform: rotateY(-18deg) rotateZ(-10deg); } 50% { transform: rotateY(46deg) rotateZ(18deg) translateY(-9px); } }
@keyframes motion-rings-expand { 0%,100% { transform: scale(.92); } 50% { transform: scale(1.17) translateX(-7px); } }
@keyframes motion-type-line { 0%,100% { transform: scaleX(1); } 12%,25% { transform: scaleX(.08); } 58%,88% { transform: scaleX(1); } }
@keyframes motion-network-packet { from { stroke-dashoffset: 7; } to { stroke-dashoffset: -93; } }
@keyframes motion-hub-send { 0% { transform: scale(.94); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes motion-node-receive { 0%,25%,100% { border-color: #D8E1F0; box-shadow: 0 7px 20px -15px #284B8A3D; } 45%,70% { border-color: #8EAFE9; box-shadow: 0 0 0 5px #2457E609, 0 7px 20px -15px #284B8A3D; } }
@keyframes motion-chat-in { 0%,10% { opacity: 0; transform: translate(-16px, 8px) scale(.94); } 24%,94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-chat-out { 0%,40% { opacity: 0; transform: translate(16px, 8px) scale(.94); } 56%,94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-chat-record { 0%,60% { opacity: 0; transform: translateY(9px); } 73%,94% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes motion-typing-dot { 0%,80%,100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
@keyframes motion-bar-grow { 0%,100% { transform: scaleY(1); } 15%,24% { transform: scaleY(.13); } 68%,90% { transform: scaleY(1); } }
@keyframes motion-source-scan { 0%,100% { top: 0; opacity: 0; } 12% { opacity: .8; } 78% { top: 100%; opacity: .8; } 90% { top: 100%; opacity: 0; } }
@keyframes motion-output-expand { 0%,100% { transform: rotate(var(--output-angle)) translateX(0); } 20%,35% { transform: rotate(0) translateX(-23px) scale(.94); } 58%,82% { transform: rotate(var(--output-angle)) translateX(var(--output-x)); } }
@keyframes motion-agent-signal { 0%,100% { transform: scaleY(.4); } 45% { transform: scaleY(1); } }
@keyframes motion-platform-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Longer English copy keeps the same hierarchy, with natural line breaks. */
html[lang="en"] .hero-title { font-size: clamp(48px, 4.4vw, 58px); letter-spacing: -.05em; line-height: 1.18; }
html[lang="en"] .hero-title .ai-word { letter-spacing: -.045em; }
html[lang="en"] .hero-description { max-width: 510px; font-size: 14px; }
html[lang="en"] .section-heading h2, html[lang="en"] .creation-copy h2,
html[lang="en"] .seo-copy h2, html[lang="en"] .partner-copy h2,
html[lang="en"] .contact-copy h2 { letter-spacing: -.035em; line-height: 1.23; overflow-wrap: normal; }
html[lang="en"] .section-heading > p, html[lang="en"] .story-step > p { line-height: 1.8; }
html[lang="en"] .story-step > h3 { font-size: 31px; line-height: 1.3; letter-spacing: -.035em; }
html[lang="en"] .desktop-nav { gap: 19px; }
html[lang="en"] .desktop-nav a { font-size: 11px; }
html[lang="en"] .header-cta { font-size: 11px; gap: 10px; padding-inline: 13px; }
html[lang="en"] .header-inner { gap: 18px; }
html[lang="en"] .hero-actions { flex-wrap: wrap; gap: 17px; }
html[lang="en"] .hero-proof > div { min-width: 0; }
html[lang="en"] .hero-proof > div > span { font-size: 9px; }

@media (max-width: 1200px) {
  .header-inner { gap: 15px; }
  .desktop-nav { gap: 15px; }
  .desktop-nav a { font-size: 11px; }
  .motion-story-grid { gap: 36px; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); }
  .story-step { padding-left: 20px; }
  .story-step > h3 { font-size: 28px; }
  .motion-content-card { width: 148px; padding: 13px; }
  .card-video { --fan-x: -123px; }
  .card-copy { --fan-x: 123px; }
  .motion-card-top > b { font-size: 9px; }
  .motion-image-poster > b { font-size: 19px; }
  .network-node { min-width: 74px; min-height: 70px; }
}

@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .header-inner > .language-switch { margin-left: auto; }
  .header-cta { margin-left: 0; }
  .menu-toggle { display: inline-flex; width: 40px; height: 40px; min-width: 40px; min-height: 40px; border: 0; }
  .mobile-menu { display: block; position: fixed; inset: 86px 0 0; z-index: 99; padding: 30px 32px calc(110px + env(safe-area-inset-bottom)); background: #F7F8FAFA; backdrop-filter: blur(22px); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-15px); transition: opacity .25s, transform .3s var(--ease), visibility .3s; }
  .menu-open .mobile-menu { visibility: visible; opacity: 1; transform: none; }
  .mobile-menu nav { display: grid; }
  .mobile-menu nav a { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 23px; font-weight: 500; }
  .mobile-menu nav a > span { font-size: 11px; font-family: 'JetBrains Mono', Consolas, monospace; color: #7A879A; }
  .mobile-menu > .button { margin-top: 25px; }
  .motion-story-grid { gap: 30px; }
  .motion-content-card { width: 137px; }
  .card-video { --fan-x: -112px; }
  .card-copy { --fan-x: 112px; }
  .motion-video-poster > .mono { font-size: 9px; }
  .chat-window, .mini-analytics { width: 86%; }
}

@media (max-width: 960px) {
  .mobile-menu { top: 74px; }
  .motion-story-grid { grid-template-columns: 1fr; gap: 24px; }
  .story-steps { min-height: 215px; }
  .story-step { display: none; min-height: 0; padding: 10px 0 14px 20px; justify-content: flex-start; }
  .story-step.is-active { display: flex; }
  .story-step::before { top: 0; height: 100%; }
  .story-step > h3 { font-size: 29px; margin: 14px 0 13px; }
  .story-step > p { max-width: 580px; font-size: 12px; }
  .story-benefits { margin-top: 16px; }
  .story-trigger { margin-top: 10px; font-size: 11px; }
  .motion-stage { position: relative; top: 0; height: 520px; max-width: 660px; margin-inline: auto; }
  .motion-content-card { width: 165px; }
  .card-video { --fan-x: -148px; }
  .card-copy { --fan-x: 148px; }
  .motion-card-top > b { font-size: 10px; }
  .network-wrap { max-width: 440px; }
  .network-node { min-width: 75px; }
  .chat-window { margin-top: 13px; width: 80%; }
  .mini-analytics { width: 80%; margin-top: 9px; }
  html[lang="en"] .hero-title { font-size: 42px; }
  html[lang="en"] .hero-description { font-size: 12px; }
  html[lang="en"] .section-heading > p br,
  html[lang="en"] .academy-stats-note br,
  html[lang="en"] .credit-card h3 br { display: initial; }
}

@media (max-width: 700px) {
  .header-cta { display: none; }
  .header-inner { gap: 12px; }
  .language-switch { padding: 3px; }
  .language-switch > button { min-width: 32px; min-height: 36px; font-size: 9px; padding: 5px 6px; }
  .header-inner > .language-switch { margin-left: auto; }
  .menu-toggle { width: 32px; min-width: 32px; }
  .motion-story-grid { gap: 23px; }
  .story-steps { min-height: 220px; }
  .story-step { padding: 4px 0 8px 16px; }
  .story-step > .eyebrow { font-size: 8px; }
  .story-step > h3 { font-size: 23px; line-height: 1.5; margin: 11px 0 12px; }
  .story-step > p { font-size: 11px; line-height: 1.9; }
  .story-benefits { gap: 6px; margin-top: 15px; }
  .story-benefits > span { font-size: 8px; padding: 4px 6px; }
  .story-trigger { font-size: 10px; margin-top: 9px; }
  .motion-stage { height: 350px; border-radius: 13px; box-shadow: 0 18px 40px -30px #25365B30; }
  .motion-stage-top { height: 43px; padding-inline: 15px; font-size: 7px; }
  .motion-stage-top > span:first-child { font-size: 7px; gap: 7px; }
  .story-pane { inset: 43px 0 61px; }
  .story-tabs { left: 12px; right: 12px; bottom: 11px; padding: 3px; gap: 2px; border-radius: 7px; }
  .story-tabs > button { min-height: 34px; padding: 7px 4px; font-size: 9px; gap: 5px; border-radius: 4px; }
  .story-tabs > button > span { font-size: 7px; }
  .idea-capsule { top: 13px; padding: 8px 12px; font-size: 8px; gap: 6px; border-radius: 6px; }
  .idea-capsule > .icon { width: 14px; height: 14px; }
  .idea-pulse { width: 4px; height: 4px; }
  .creation-beam { top: 46px; height: 18px; }
  .creation-beam > i { width: 4px; height: 6px; animation-name: motion-beam-travel-mobile; }
  .motion-content-stack { top: 70px; height: 156px; }
  .motion-content-card { width: 115px; min-height: 146px; padding: 10px; border-radius: 7px; }
  .card-video { --fan-x: -88px; --fan-y: 8px; --fan-angle: -7deg; }
  .card-image { --fan-x: 0px; --fan-y: -7px; --fan-angle: 1deg; }
  .card-copy { --fan-x: 88px; --fan-y: 6px; --fan-angle: 7deg; }
  .motion-card-top { min-height: 18px; gap: 5px; margin-bottom: 7px; }
  .motion-card-top > b { font-size: 7px; }
  .motion-card-top > .icon { width: 11px; height: 11px; }
  .motion-content-card > small { font-size: 6px; margin-top: 7px; line-height: 1.5; }
  .motion-video-poster, .motion-image-poster { height: 89px; padding: 12px 9px; border-radius: 4px; }
  .motion-video-poster > .mono { left: 9px; top: 13px; font-size: 7px; }
  .creative-object { width: 65px; height: 65px; right: -8px; bottom: -6px; }
  .creative-object > i { width: 48px; height: 48px; border-radius: 10px; }
  .poster-play { width: 17px; height: 17px; bottom: 7px; left: 7px; }
  .poster-play > .icon { width: 7px; height: 7px; }
  .motion-image-poster > b { font-size: 14px; margin-top: 13px; }
  .motion-image-poster > .mono { font-size: 4px; bottom: 9px; left: 9px; }
  .poster-rings { width: 93px; height: 93px; right: -36px; top: -22px; }
  .poster-rings::before { inset: 10px; }
  .poster-rings::after { inset: 21px; }
  .animated-copy-lines { gap: 6px; margin: 12px 0 11px; }
  .animated-copy-lines > i { height: 3px; }
  .copy-language-tags { gap: 4px; margin-bottom: 11px; }
  .copy-language-tags > span { font-size: 5px; padding: 3px 4px; border-radius: 3px; }
  .scene-caption { font-size: 7px; bottom: 1px; left: 12px; right: 12px; }
  .create-scene .scene-caption { bottom: -6px; }
  .network-wrap { width: calc(100% - 35px); max-width: 300px; top: 47%; }
  .network-hub { width: 59px; height: 59px; gap: 3px; border-radius: 10px; }
  .network-hub > .icon { width: 12px; height: 12px; }
  .network-hub > b { font-size: 18px; }
  .network-hub > span { font-size: 5px; }
  .network-hub > i { inset: -8px; border-radius: 15px; }
  .network-node { min-width: 60px; min-height: 47px; padding: 7px 6px; border-radius: 7px; gap: 4px; }
  .network-node > img { width: 19px; height: 19px; border-radius: 4px; }
  .network-node > span { font-size: 6px; }
  .node-check { width: 10px; height: 10px; border-width: 1px; right: -3px; top: -3px; }
  .node-check::before { width: 4px; height: 2px; }
  .network-packet { stroke-width: 3.5; }
  .chat-window { width: calc(100% - 38px); margin-top: 6px; padding: 8px 12px; border-radius: 9px; }
  .chat-window-top { gap: 7px; padding-bottom: 7px; margin-bottom: 7px; }
  .chat-ai-avatar { width: 24px; height: 24px; border-radius: 6px; }
  .chat-ai-avatar > .icon { width: 14px; height: 14px; }
  .chat-window-top b { font-size: 8px; }
  .chat-window-top > div > span { font-size: 6px; margin-top: 2px; }
  .chat-language-code { font-size: 6px; padding: 3px; }
  .chat-bubble { padding: 7px 9px; border-radius: 6px; font-size: 8px; line-height: 1.5; }
  .chat-bubble small { margin-top: 3px; font-size: 5px; }
  .chat-typing { height: 18px; gap: 2px; }
  .chat-typing > span { font-size: 6px; margin-right: 4px; }
  .chat-typing > i { width: 3px; height: 3px; }
  .chat-confirmation { gap: 5px; padding-top: 6px; font-size: 6px; }
  .chat-confirmation > .icon { width: 11px; height: 11px; }
  .mini-analytics { width: calc(100% - 38px); padding: 6px 10px; margin-top: 6px; gap: 9px; min-height: 40px; border-radius: 7px; }
  .mini-analytics > div:first-child { display: flex; align-items: center; gap: 8px; }
  .mini-analytics > div:first-child > span { max-width: 46px; font-size: 6px; line-height: 1.4; }
  .mini-analytics strong { font-size: 23px; }
  .mini-analytics strong > small { font-size: 6px; margin-left: 3px; }
  .motion-bars { height: 26px; gap: 4px; }
  .motion-bar { max-width: 12px; border-radius: 2px 2px 0 0; }
  .analytics-caption { font-size: 6px; max-width: 49px; }
  .ribbon-group { gap: 26px; padding-right: 26px; }
  .ribbon-group > span { font-size: 10px; }
  .ribbon-group > span > img { width: 21px; height: 21px; }
  .ribbon-loop { animation-duration: 28s; }
  .motion-control { font-size: 9px; gap: 6px; min-height: 32px; padding: 6px 8px; }
  .motion-control > .icon { width: 12px; height: 12px; }
  .hero-bottom { gap: 12px; }
  html[lang="en"] .hero-title { font-size: clamp(36px, 9.6vw, 40px); letter-spacing: -.045em; line-height: 1.18; }
  html[lang="en"] .hero-title .ai-word { white-space: normal; }
  html[lang="en"] .hero-description { font-size: 12px; }
  html[lang="en"] .hero-actions { flex-wrap: wrap; gap: 13px; }
  html[lang="en"] .hero-proof { gap: 19px; }
  html[lang="en"] .hero-proof > div { padding-right: 19px; }
  html[lang="en"] .hero-proof > div:last-child { padding-right: 0; }
  html[lang="en"] .hero-proof > div > span { font-size: 8px; letter-spacing: 0; }
  html[lang="en"] .story-step > h3 { font-size: 23px; line-height: 1.3; }
  html[lang="en"] .story-step > p { font-size: 11px; line-height: 1.8; }
  html[lang="en"] .story-tabs > button { font-size: 8px; gap: 4px; }
  html[lang="en"] .motion-card-top { min-height: 23px; }
  html[lang="en"] .motion-card-top > b { font-size: 7px; }
  html[lang="en"] .chat-bubble { font-size: 8px; }
}

@media (max-width: 640px) { .mobile-menu { top: 70px; padding: 25px 26px 120px; } }
@media (max-width: 380px) {
  .header-inner { gap: 9px; }
  .language-switch > button { min-width: 29px; padding-inline: 5px; }
  .motion-stage-top { padding-inline: 12px; }
  .motion-content-card { width: 104px; padding: 9px; }
  .card-video { --fan-x: -77px; }
  .card-copy { --fan-x: 77px; }
  .motion-card-top > b { font-size: 6px; }
  .motion-image-poster > b { font-size: 13px; }
  .idea-capsule { font-size: 7px; padding-inline: 10px; }
  .network-node { min-width: 55px; padding: 6px 5px; }
  .chat-window, .mini-analytics { width: calc(100% - 27px); }
  .analytics-caption { display: none; }
  html[lang="en"] .hero-title { font-size: 36px; }
  html[lang="en"] .hero-proof { gap: 14px; }
  html[lang="en"] .hero-proof > div { padding-right: 14px; }
  html[lang="en"] .hero-proof > div > span { font-size: 7px; }
  html[lang="en"] .story-tabs > button { font-size: 8px; gap: 3px; }
  html[lang="en"] .story-tabs > button > span { font-size: 6px; }
}

@keyframes motion-beam-travel-mobile { 0% { transform: translateY(0); opacity: .25; } 70% { opacity: 1; } 100% { transform: translateY(15px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .story-pane.is-active, .chat-bubble, .chat-confirmation,
  .hero.motion-item .hero-title, .hero.motion-item .hero-description,
  .hero.motion-item .hero-actions, .hero.motion-item .hero-stage { opacity: 1; }
  .motion-bar { transform: none; }
  .creation-scanning-line { display: none; }
  .ribbon-loop { transform: none; }
}