/* Original motion treatment: atmosphere on the homepage, quiet work surfaces. */
:root {
  --silver-metal: linear-gradient(125deg, #ffffff 0%, #e0e3e7 27%, #f9fafb 49%, #ced2d8 76%, #eef0f3 100%);
  --silver-hover: linear-gradient(125deg, #f8f9fa 0%, #cdd2d9 28%, #f1f3f5 50%, #bbc2ca 78%, #e3e7ec 100%);
}
.marketing-page { background: #fafafa; }
.marketing-page main { overflow: clip; }
.marketing-page .hero { position: relative; isolation: isolate; min-height: 690px; padding-block: 86px 96px; grid-template-columns: 1fr 1.1fr; gap: 60px; }
.hero-atmosphere { position: absolute; inset: -34px -160px -50px; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-atmosphere i { position: absolute; width: 780px; height: 780px; right: -90px; top: -170px; border-radius: 50%; background: radial-gradient(ellipse, #8080804d, #a6a6a626 38%, transparent 67%); animation: ambient-drift 16s ease-in-out infinite alternate; }
.hero-atmosphere i:nth-child(2) { width: 630px; height: 630px; top: 90px; right: 220px; background: radial-gradient(ellipse, #c7c7c73b, transparent 66%); animation-delay: -7s; }
.hero-atmosphere > span { position: absolute; width: 860px; height: 860px; right: -90px; top: -250px; border: 1px solid #61616114; border-radius: 50%; box-shadow: 0 0 0 65px #61616106, 0 0 0 130px #61616104; }
.marketing-page .hero-copy h1 { font-size: clamp(40px, 4.15vw, 60px); line-height: 1.24; letter-spacing: -.055em; }
.hero-copy h1 em { color: #3c3c3c; font-style: normal; }
.marketing-page .hero-lead { font-size: 16px; color: #6f6f6f; max-width: 425px; }
.marketing-page .eyebrow { letter-spacing: .12em; font-size: 12px; }
.marketing-page .proof-list { font-size: 12px; gap: 10px; }
.marketing-page .hero-actions .button-dark { background: #282828; box-shadow: 0 8px 20px #2828281c; }
.marketing-page .hero-actions .button-dark:hover { background: #1d1d1d; }
.motion-toggle { min-height: 38px; padding: 7px 10px; border: 1px solid #dddddd; border-radius: 999px; color: #656565; background: #ffffffb3; font-size: 12px; white-space: nowrap; }
.motion-toggle:hover { background: #ebebeb; }
.motion-showcase { padding: 22px; background: #fff; border: 1px solid #fff; border-radius: 26px; box-shadow: 0 30px 70px -24px #37373733, 0 0 0 1px #34343410; }
.showcase-top, .showcase-top > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.showcase-top > span { font-size: 10px; font-weight: 700; letter-spacing: .16em; color: #414141; }
.showcase-top i { width: 7px; height: 7px; border-radius: 50%; background: #6a6a6a; }
.showcase-top small { font-size: 10px; color: #828c89; }
.showcase-modes { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; margin-top: 22px; border-radius: 11px; background: #f0f0f0; }
.showcase-modes button { padding: 10px; border-radius: 8px; font-size: 12px; color: #737373; background: transparent; transition: color .18s, background .18s, box-shadow .18s; }
.showcase-modes button[aria-pressed="true"] { background: #fff; color: #2d2d2d; box-shadow: 0 2px 8px #2727270a; font-weight: 650; }
.showcase-body { display: grid; grid-template-columns: 1fr .92fr; gap: 23px; margin-top: 20px; }
.showcase-portrait { position: relative; min-height: 310px; overflow: hidden; border-radius: 15px; background: #1a1a1a; }
.showcase-portrait > img { width: 100%; height: 100%; position: absolute; object-fit: cover; }
.showcase-portrait::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #1a1a1a14 40%, #121212e0 100%); }
.portrait-tag { position: absolute; z-index: 1; top: 12px; left: 12px; color: #fff; background: #1515156b; border: 1px solid #ffffff40; padding: 5px 8px; border-radius: 6px; font-size: 10px; }
.portrait-caption { position: absolute; z-index: 1; bottom: 20px; left: 18px; right: 12px; color: #fff; }
.portrait-caption small { font-size: 7px; letter-spacing: .12em; opacity: .75; }
.portrait-caption strong { display: block; margin-top: 8px; font-size: 20px; font-weight: 550; line-height: 1.5; }
.showcase-rail { padding-top: 6px; min-width: 0; }
.showcase-kicker { display: block; font-size: 10px; color: #8d8d8d; margin-bottom: 22px; letter-spacing: .1em; }
.showcase-rail article { display: flex; align-items: center; gap: 10px; }
.showcase-rail article > b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #eeeeee; color: #434343; font-size: 10px; flex: 0 0 auto; }
.showcase-rail article strong { display: block; font-size: 13px; color: #323232; }
.showcase-rail article small { display: block; font-size: 10px; color: #7d7d7d; margin-top: 5px; line-height: 1.5; }
.showcase-connector { height: 22px; width: 1px; background: #dedede; margin: 5px 0 5px 15px; }
.voice-illustration { height: 45px; margin: 18px 0 13px; display: flex; justify-content: center; align-items: center; gap: 5px; background: #eeeeee; border-radius: 9px; }
.voice-illustration i { display: block; width: 3px; height: 20px; border-radius: 4px; background: #757575; animation: voice-wave 1.8s ease-in-out infinite alternate; }
.voice-illustration i:nth-child(3n) { height: 30px; animation-delay: -.8s; }
.voice-illustration i:nth-child(3n + 1) { height: 11px; animation-delay: -.4s; }
.showcase-note { color: #848484; font-size: 10px; line-height: 1.9; margin: 0; }
.showcase-link { margin-top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 6px; color: #373737; font-size: 11px; font-weight: 650; }
.showcase-link:hover { color: #1a1a1a; }
.showcase-bottom { display: flex; justify-content: space-between; padding-top: 16px; margin-top: 18px; border-top: 1px solid #ececec; font-size: 9px; color: #8d8d8d; letter-spacing: .06em; }
.showcase-float { position: absolute; bottom: -27px; left: 30px; display: flex; align-items: center; gap: 12px; padding: 13px 22px 13px 13px; border: 1px solid #fff; border-radius: 13px; background: #fafafaf2; box-shadow: 0 12px 28px #25252514; animation: card-float 6s ease-in-out infinite; }
.showcase-float > span { width: 36px; height: 36px; display: grid; place-items: center; color: #5c5c5c; background: #eaeaea; border-radius: 10px; }
.showcase-float b { font-size: 12px; color: #373737; }
.showcase-float small { display: block; font-size: 9px; color: #8e8e8e; margin-top: 5px; }
.marketing-page .trust-strip { background: #f0f0f0; border-color: #e4e4e4; }
.marketing-page .product-card { transition: border-color .2s, box-shadow .2s, transform .2s; }
.marketing-page .section { scroll-margin-top: 80px; }
.marketing-page .steps-grid article { transition: background .2s, border-color .2s; }
.marketing-page .steps-grid article:hover { background: #fff; border-color: #aaaaaa; }
.marketing-page .hero-copy > * { animation: reveal-up .65s both; }
.marketing-page .hero-copy > :nth-child(2) { animation-delay: .08s; }
.marketing-page .hero-copy > :nth-child(3) { animation-delay: .16s; }
.marketing-page .hero-copy > :nth-child(4) { animation-delay: .24s; }
.marketing-page .hero-copy > :nth-child(5) { animation-delay: .32s; }
.motion-showcase { animation: reveal-up .8s .18s both; }
.section.is-revealing { animation: reveal-up .65s both; }
.showcase-body.is-switching { animation: panel-appear .2s ease-out; }
/* Inputs stay in place; feedback changes surfaces, never the three-column geometry. */
.scene-toggle { cursor: pointer; align-items: center; list-style: none; min-height: 42px; border-radius: 7px; }
.scene-toggle::-webkit-details-marker { display: none; }
.scene-toggle h2 { font-size: 14px; }
.scene-toggle p { color: #757575; font-size: 10px; line-height: 1.5; }
.scene-toggle-label { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--brand); font-size: 11px; }
.scene-toggle-label i { font-style: normal; font-size: 16px; transition: transform .18s; }
.scene-picker-card .when-expanded { display: none; }
.scene-picker-card[open] .when-expanded { display: inline; }
.scene-picker-card[open] .when-collapsed { display: none; }
.scene-picker-card:not([open]) .scene-toggle-label i { transform: rotate(180deg); }
.scene-picker-card[open] .scene-options { animation: panel-appear .18s ease-out; }
.scene-toggle:hover .scene-toggle-label { color: var(--brand-dark); }
.studio-page :is(button, .nav-item) { transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s; }
.studio-page button:not(:disabled):active { filter: brightness(.94); }
.studio-page :is(.creation-panel, .scene-picker-card, .material-composer) { transition: border-color .2s, box-shadow .2s; }
.studio-page .creation-panel:focus-within { border-color: #aaaaaa; box-shadow: 0 0 0 3px #4444440a; }
.studio-page :is(.upload-area, .material-upload-grid button):hover { border-color: #909090; background: #f3f3f3; }
.studio-page .upload-area.is-dragging { box-shadow: inset 0 0 0 2px #5f5f5f38; }
.studio-page :is(.generate-button, .director-submit):hover { background: #2a2a2a; box-shadow: 0 5px 14px #2727271a; }
.studio-page .method-card:hover { border-color: #a7a7a7; box-shadow: 0 3px 12px #2929290a; }
.studio-page .method-card.is-selected { box-shadow: inset 0 0 0 1px #434343; }
.ls-audio-tabs { position: relative; isolation: isolate; }
.ls-audio-tabs::before { content: ''; position: absolute; z-index: -1; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 7px; background: #fff; box-shadow: 0 2px 6px #2222220a; transition: transform .2s ease; }
.ls-audio-tabs:has([data-audio-mode="file"].is-active)::before { transform: translateX(100%); }
.lipsync-page .ls-audio-tabs button.is-active { background: transparent; box-shadow: none; }
.lipsync-page :is(#text-panel, #audio-panel):not([hidden]) { animation: panel-appear .18s ease-out; }
/* Reserve voice-panel space on desktop so the video preview never jumps. */
@media (min-width: 980px) { .lipsync-page .settings-panel { display: grid; grid-template-rows: auto auto minmax(380px, auto) 1fr; align-content: start; } }
@media (hover: hover) and (pointer: fine) {
  .marketing-page .product-card:hover { transform: translateY(-4px); border-color: #b4b4b4; box-shadow: 0 18px 38px #24242412; }
}
@media (min-width: 1101px) and (max-width: 1320px) {
  .video-workspace-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .video-task-panel { grid-column: 1 / -1; min-height: auto; }
  .queue-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .video-workspace-grid { grid-template-columns: minmax(0,1fr); }
  .video-task-panel { grid-column: auto; }
  .queue-list { grid-template-columns: minmax(0,1fr); }
  .video-titlebar { flex-wrap: wrap; }
  .video-titlebar h1 { font-size: 25px; }
}
/* Silver is a surface treatment; text and selected borders remain dark enough to read. */
.hero-atmosphere i { background: radial-gradient(ellipse, #a6adb85c, #d1d5dc3d 38%, transparent 68%); }
.hero-atmosphere i:nth-child(2) { background: radial-gradient(ellipse, #ffffffd9, #c0c5ce38 38%, transparent 67%); }
.hero-atmosphere > span { border-color: #929aa52b; box-shadow: 0 0 0 65px #9ba3af0a, 0 0 0 130px #9ba3af06; }
.hero-copy h1 em { color: #555c65; background: linear-gradient(115deg, #333942, #777f89 45%, #454c57 74%, #606873); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.motion-showcase { background: linear-gradient(135deg, #fff 15%, #f4f5f7 60%, #fff); border-color: #d7dbe1; box-shadow: 0 30px 65px -24px #4b536133, inset 0 1px 0 #fff; }
.marketing-page .hero-actions .button-dark,
.marketing-page .header-actions .button-dark,
.studio-page .generate-button,
.studio-page .director-submit { background: var(--silver-metal); color: #272e38; border: 1px solid #aeb5bf; box-shadow: inset 0 1px 0 #fff, 0 5px 14px #313b4a12; }
.marketing-page .hero-actions .button-dark:hover,
.marketing-page .header-actions .button-dark:hover,
.studio-page .generate-button:hover,
.studio-page .director-submit:hover { background: var(--silver-hover); color: #1c222b; box-shadow: inset 0 1px 0 #fff, 0 6px 18px #313b4a20; }
.lipsync-page .generate-button span { color: #535b66; }
.showcase-float { background: linear-gradient(130deg, #fff, #e7eaef 58%, #fafbfd); border-color: #cdd3db; }
.showcase-rail article > b, .showcase-float > span { background: var(--silver-metal); color: #4e5661; border: 1px solid #d2d7de; }
.voice-illustration { background: linear-gradient(100deg, #f1f3f5, #e2e6ea, #f8f9fa); }
.voice-illustration i { background: #717a87; }
.studio-page .method-card.is-selected { background: linear-gradient(120deg, #fff, #eef0f3 65%, #fafbfc); border-color: #737d8a; box-shadow: inset 0 0 0 1px #737d8a; }
.studio-page .method-card.is-selected > span { background: var(--silver-metal); color: #303844; border: 1px solid #b3bbc5; }
.studio-page .creation-panel:focus-within { border-color: #8a95a4; box-shadow: 0 0 0 3px #64748b0c; }
.scene-toggle-label { color: #4f5967; }
@keyframes ambient-drift { to { transform: translate(-65px, 45px) scale(1.08); opacity: .7; } }
@keyframes card-float { 50% { transform: translateY(-7px); } }
@keyframes voice-wave { to { transform: scaleY(.35); opacity: .55; } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes panel-appear { from { opacity: .5; } to { opacity: 1; } }
.motion-paused, .motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.motion-suspended *, .motion-suspended *::before, .motion-suspended *::after { animation-play-state: paused !important; }
@media (max-width: 1080px) {
  .marketing-page .hero { grid-template-columns: 1fr 1.1fr; gap: 30px; padding-block: 60px 85px; }
  .marketing-page .hero-copy h1 { font-size: 42px; }
  .motion-showcase { padding: 16px; }
  .showcase-body { gap: 14px; }
  .showcase-portrait { min-height: 300px; }
  .showcase-top small { font-size: 9px; }
}
@media (max-width: 760px) {
  .marketing-page .hero { grid-template-columns: 1fr; gap: 38px; padding-block: 48px 72px; }
  .marketing-page .hero-copy h1 { font-size: clamp(34px, 7.8vw, 48px); }
  .marketing-page .hero-lead { font-size: 15px; }
  .marketing-page .hero-product { margin-top: 0; }
  .marketing-page .hero-actions { margin-top: 25px; }
  .marketing-page .hero-actions .button { padding-inline: 15px; font-size: 13px; }
  .showcase-body { grid-template-columns: 1fr 1fr; }
  .showcase-portrait { min-height: 295px; }
  .portrait-caption { left: 12px; }
  .portrait-caption strong { font-size: 17px; }
  .showcase-float { left: 15px; bottom: -25px; animation: none; }
  .hero-atmosphere i { animation: none; }
  .motion-toggle { min-height: 34px; font-size: 11px; padding-inline: 9px; }
  .marketing-page .site-header { padding-inline: 16px; gap: 10px; }
  .marketing-page .header-actions { gap: 6px; }
  .marketing-page .header-actions .button { min-height: 36px; font-size: 11px; padding-inline: 10px; }
  .marketing-page .brand { gap: 8px; }
  .marketing-page .brand strong { font-size: 13px; }
  .marketing-page .brand-mark { width: 34px; height: 34px; }
}
@media (max-width: 380px) { .marketing-page .header-actions .button { display: none; } .showcase-top { gap: 3px; } .showcase-top > span { font-size: 8px; } .showcase-rail article { gap: 6px; } .showcase-rail article small { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}