/* Home (v4). The hero desktop window is drawn in DOM, sized in container units so it scales as one picture. */

/* ---------------------------------------------------------------- hero */
.hero { position: relative; isolation: isolate; padding-top: 64px; }
.hero__copy { display: grid; justify-items: center; gap: 16px; text-align: center; }
.hero__title { max-width: 15em; margin-top: 8px; }
.hero__copy .lead { max-width: 34em; }
.hero__copy .actions { margin-top: 24px; }
.hero__shot { position: relative; margin-top: 64px; }
.hero__pink { position: absolute; z-index: -1; left: 50%; bottom: -8%; width: 80%; height: 60%; transform: translateX(-50%); filter: blur(64px);
  background: radial-gradient(20% 30% at 50% 100%, var(--pink-glow) 0, var(--pink-glow-2) 100%); opacity: .4; border-radius: 50%; }
:root[data-theme="light"] .hero__pink { opacity: 1; }
@media (max-width: 639px) { .hero__copy .actions { justify-self: stretch; } }
@media (max-width: 767px) {
  .hero { padding-top: 40px; }
  .hero__shot { margin-top: 48px; }
}

/* ---------------------------------------------------------------- the desktop window (one scalable picture) */
.deskshot { container-type: inline-size; position: relative; padding: 0 1.5% 3.5%; }
.ds { position: relative; font-size: 1cqi; font-family: 'Segoe UI Variable Text', 'Segoe UI', var(--font); }
.ds__screen { position: relative; aspect-ratio: 1216 / 640; border-radius: 1em; overflow: hidden; }
.ds__wall { position: absolute; inset: 0;
  background:
    radial-gradient(60% 80% at 82% 18%, rgba(48, 98, 220, .55) 0, transparent 60%),
    radial-gradient(50% 70% at 104% 70%, rgba(26, 64, 180, .5) 0, transparent 60%),
    radial-gradient(70% 90% at 0% 100%, rgba(10, 30, 90, .7) 0, transparent 60%),
    linear-gradient(160deg, #0B1634 0%, #06102A 55%, #040814 100%); }
/* After Effects window */
.ds__ae { position: absolute; left: 2.6%; top: 4.6%; width: 67%; height: 80%; display: flex; flex-direction: column; border-radius: .7em; overflow: hidden; background: #1D1D1F; border: 1px solid #34363B; box-shadow: 0 2em 4em rgba(0, 0, 0, .45); }
.ds__bar { flex: none; display: flex; align-items: center; gap: 1em; height: 2.9em; padding: 0 1.1em; background: #26272A; border-bottom: 1px solid #333539; color: #C9CCD1; font-size: 1em; }
.ds__dots { display: flex; gap: .5em; }
.ds__dots i { width: .75em; height: .75em; border-radius: 50%; background: #4A4D53; }
.ds__title { flex: 1; text-align: center; color: #C9CCD1; font-size: 1.05em; }
.ds__chip { padding: .25em .8em; border-radius: .4em; background: #2F3136; color: #8B9097; font-size: .9em; }
.ds__aebody { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 31%; min-height: 0; }
.ds__comp { display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; border-right: 1px solid #333539; }
.ds__viewer { display: grid; place-items: center; background: #161618; padding: 2.4% 4%; min-height: 0; overflow: hidden; }
.ds__frame { position: relative; height: 100%; width: auto; max-width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(160deg, #2B48D2, #1E36BE 70%, #182EA8); border-radius: .2em; overflow: hidden; display: grid; place-items: center; }
.ds__make { color: #fff; font: 600 3.1em/1 var(--font); letter-spacing: -.03em; transform: translateY(-12%); }
.ds__underline { position: absolute; left: 30%; right: 30%; top: 63%; height: .35em; border-radius: 1em; background: #9DC3FF; }
.ds__dot { position: absolute; left: 71.5%; top: 59.5%; width: 1em; height: 1em; border-radius: 50%; background: #fff; box-shadow: 0 0 1.4em rgba(157, 195, 255, .9); }
.ds__tl { position: relative; background: #1D1D1F; border-top: 1px solid #333539; padding-bottom: .6em; }
.ds__tlhead, .ds__row { display: grid; grid-template-columns: 2.4em 1.4em 8.5em minmax(0, 1fr); align-items: center; gap: .3em; padding: 0 .9em; }
.ds__tlhead { grid-template-columns: 2.4em 9.9em minmax(0, 1fr); height: 2.3em; color: #8B9097; font-size: .85em; border-bottom: 1px solid #2B2D31; }
.ds__ruler { display: flex; justify-content: space-between; padding-right: 8%; }
.ds__ruler b { font-weight: 400; }
.ds__row { height: 2.4em; color: #C9CCD1; font-size: .95em; border-bottom: 1px solid #252629; }
.ds__n { color: #8B9097; }
.ds__sw { width: 1em; height: 1em; border-radius: .2em; background: var(--c); }
.ds__ln { white-space: nowrap; overflow: hidden; }
.ds__track { position: relative; height: 1.5em; }
.ds__track i { position: absolute; left: var(--x); width: var(--w); top: 0; bottom: 0; border-radius: .2em; background: var(--c); opacity: .9; }
.ds__track s { position: absolute; left: var(--x); top: 50%; width: .75em; height: .75em; margin: -.375em 0 0 -.375em; background: #F2F4F7; transform: rotate(45deg); border-radius: .1em; }
.ds__cti { position: absolute; top: 0; bottom: 0; left: calc(.9em + 2.4em + 1.4em + 8.5em + .9em + (100% - 14.9em) * .47); width: .14em; background: #579EFA; }
.ds__cti::before { content: ''; position: absolute; top: .4em; left: -.45em; width: 1.04em; height: 1.04em; background: #579EFA; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
/* the Motion Copilot panel */
.ds__mc { display: flex; flex-direction: column; gap: .9em; padding: 1em; background: #18191C; min-width: 0; color: #DDE1E6; font-size: 1em; }
.ds__mchead { display: flex; align-items: center; gap: .5em; font-size: 1.05em; }
.ds__mchead b { font-weight: 600; }
.ds__trail { width: 1.5em; height: 1.5em; }
.ds__model { margin-left: auto; padding: .2em .6em; border-radius: 1em; border: 1px solid #34363B; color: #9AA0A8; font-size: .8em; }
.ds__msg { border-radius: .6em; padding: .75em .9em; font-size: .95em; line-height: 1.4; }
.ds__msg--you { align-self: flex-end; max-width: 92%; background: #2B48D2; color: #fff; }
.ds__msg--mc { background: #222327; border: 1px solid #2E3035; }
.ds__msg--mc p { color: #C9CCD1; }
.ds__msg--mc ul { display: grid; gap: .35em; margin-top: .55em; }
.ds__msg--mc li { display: flex; align-items: center; gap: .5em; color: #E7EAEE; }
.ds__msg--mc li i { width: 1em; height: 1em; border-radius: 50%; background: #2DD3BE; flex: none; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.6 14.2L6.3 12l1.4-1.4 2.7 2.7 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.6 14.2L6.3 12l1.4-1.4 2.7 2.7 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }
.ds__frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4em; margin-top: .7em; }
.ds__frames span { position: relative; aspect-ratio: 16 / 9; border-radius: .25em; background: linear-gradient(160deg, #2B48D2, #1E36BE); overflow: hidden; }
.ds__frames b { position: absolute; left: 22%; right: 22%; top: 42%; height: 16%; border-radius: .2em; background: rgba(255, 255, 255, .9); }
.ds__frames span:nth-child(1) b { right: 55%; }
.ds__frames span:nth-child(2) b { right: 34%; }
.ds__input { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5em; padding: .7em .8em; white-space: nowrap; overflow: hidden; border-radius: .6em; background: #111214; border: 1px solid #34363B; color: #7E848C; font-size: .9em; }
.ds__sugg { margin-top: auto; display: flex; flex-wrap: wrap; gap: .4em; }
.ds__sugg span { padding: .3em .6em; border-radius: .4em; border: 1px solid #34363B; color: #9DB4FF; font-family: var(--mono); font-size: .8em; }
.ds__sugg + .ds__input { margin-top: 0; }
.ds__slash { padding: .15em .5em; border-radius: .35em; background: rgba(43, 72, 210, .3); color: #9DB4FF; font-family: var(--mono); font-size: .9em; }
/* the desktop: Orb, its pill, a toast, the taskbar */
.ds__toast { position: absolute; right: 2.4%; top: 4.6%; width: 24%; display: flex; gap: .8em; padding: .9em 1em; border-radius: .7em; background: rgba(28, 30, 36, .92); border: 1px solid #34363B; box-shadow: 0 1.5em 3em rgba(0, 0, 0, .4); color: #C9CCD1; font-size: .95em; line-height: 1.35; }
.ds__toast > span { display: grid; gap: .2em; }
.ds__toast b { color: #fff; font-weight: 600; }
.ds__toastmark { flex: none; width: 2em; height: 2em; }
.ds__listen { position: absolute; right: 12.4%; bottom: 21%; display: flex; align-items: center; gap: .7em; padding: .7em 1em .7em .9em; border-radius: .8em; background: rgba(10, 13, 18, .88); border: 1px solid rgba(64, 210, 255, .18); box-shadow: 0 1em 2.4em rgba(0, 0, 0, .35); }
.ds__listen i { width: .7em; height: .7em; border-radius: 50%; background: #40D2FF; box-shadow: 0 0 .8em #40D2FF; }
.ds__lt { color: #40D2FF; font: 600 .95em/1 var(--font); letter-spacing: .14em; text-transform: uppercase; }
.ds__ai { margin-left: 2.4em; padding: .3em .7em; border-radius: .5em; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #C9CCD1; font-size: .85em; }
.ds__orb { position: absolute; right: 3%; bottom: 13.5%; width: 9.2%; aspect-ratio: 1; }
.ds__orb > .cssorb { width: 100%; font-size: 1em; }
.ds__orb.is-live > .cssorb { display: none; }
.ds__taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 7.2%; display: flex; align-items: center; justify-content: center; background: rgba(18, 20, 26, .86); border-top: 1px solid rgba(255, 255, 255, .06); }
.ds__tb { display: flex; gap: .9em; }
.ds__tb i { width: 2.2em; height: 2.2em; border-radius: .45em; background: rgba(255, 255, 255, .08); }
.ds__tb i:nth-child(1) { background: linear-gradient(135deg, #3E8BFF, #2B48D2); }
.ds__tb i:nth-child(3) { background: #1D1D1F; box-shadow: inset 0 0 0 1px #579EFA; }
.ds__tb i:nth-child(4) { background: radial-gradient(circle at 35% 30%, #3A414D, #050608 75%); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(64, 210, 255, .5); }
.ds__clock { position: absolute; right: 1.6em; color: #C9CCD1; font-size: .9em; }
/* floating panel over the frame's edge, and the visitor's cursor */
.ds__panel { position: absolute; left: -.6%; bottom: -1%; width: 25%; padding: .4em 0 .6em; border-radius: .7em; background: #1B1E25; border: 1px solid #2A2D34; box-shadow: 0 1.6em 3.2em rgba(0, 0, 0, .45); color: #E0E3E6; }
.ds__panelhead { display: flex; justify-content: space-between; padding: .7em 1.1em; border-bottom: 1px solid #2A2D34; font-size: 1em; }
.ds__panelhead b { font-weight: 600; }
.ds__panelhead span { color: #8A8E96; }
.ds__panel ul { display: grid; gap: .1em; padding: .4em .5em 0; }
.ds__panel li { display: grid; gap: .15em; padding: .55em .6em; border-radius: .45em; font-size: .92em; }
.ds__panel li:last-child { background: rgba(64, 210, 255, .08); }
.ds__say { color: #E0E3E6; }
.ds__done { color: #2DD3BE; font-size: .92em; }
.ds__cursor { position: absolute; left: 34.6%; top: 37.4%; display: flex; align-items: flex-start; }
.ds__cursor svg { width: 2em; height: 2em; filter: drop-shadow(0 .2em .4em rgba(0, 0, 0, .4)); }
.ds__cursor span { margin: 1.3em 0 0 -.3em; padding: .3em .8em; border-radius: .3em; background: #8B5CF6; color: #fff; font: 500 1.1em/1.3 var(--font); }
@container (max-width: 560px) {
  .ds__panel, .ds__cursor { display: none; }
}

/* ---------------------------------------------------------------- the AIs strip */
.withs { padding-block: 112px 96px; text-align: center; }
.withs__t { color: var(--body); font-weight: 400; }
.withs__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 56px; margin-top: 28px; }
.withs__list li { color: var(--helper); font-size: 26px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
:root[data-theme="light"] .withs__list li { color: #8A8E96; }
.withs__note { margin-top: 24px; }
@media (max-width: 767px) { .withs { padding-block: 80px 48px; } .withs__list { gap: 12px 32px; } .withs__list li { font-size: 21px; line-height: 30px; } }

/* ---------------------------------------------------------------- principle vignettes */
.art-pc { min-height: 300px; }
.apc { position: absolute; inset: 0 0 0 32px; border-top-left-radius: 10px; overflow: hidden; border: 1px solid var(--sep); border-right: 0; border-bottom: 0;
  background: radial-gradient(70% 90% at 90% 0%, rgba(48, 98, 220, .35), transparent 60%), linear-gradient(160deg, #0B1634, #050A1A); }
.apc__win { position: absolute; border-radius: 8px; background: #1B1E25; border: 1px solid #2A2D34; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); color: #E0E3E6; font-size: 13px; overflow: hidden; }
.apc__bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #23262D; border-bottom: 1px solid #2A2D34; color: #9AA0A8; font-size: 12px; }
.apc__bar i { width: 8px; height: 8px; border-radius: 50%; background: #4A4D53; }
.apc__bar span { margin-left: 8px; }
.apc__win--files { left: 6%; top: 28px; width: 38%; }
.apc__files { padding: 8px; display: grid; gap: 2px; }
.apc__files li { position: relative; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: 6px; }
.apc__files li.is-ring { background: rgba(64, 210, 255, .08); box-shadow: 0 0 0 2px #40D2FF, 0 0 20px rgba(64, 210, 255, .45); }
.apc__ic { width: 16px; height: 20px; border-radius: 3px; background: #3B82F6; }
.apc__ic--pdf { background: #E5484D; }
.apc__ic--img { background: #FBC320; height: 14px; }
.apc__win--ae { left: 40%; top: 92px; width: 54%; background: #1D1D1F; }
.apc__layers { padding: 10px 12px 14px; display: grid; gap: 6px; }
.apc__layers p { position: relative; display: grid; grid-template-columns: 12px 80px minmax(0, 1fr); align-items: center; gap: 8px; height: 26px; color: #C9CCD1; font-size: 12px; }
.apc__layers span { width: 12px; height: 12px; border-radius: 2px; background: var(--c); }
.apc__layers b { position: relative; height: 16px; }
.apc__layers b::after { content: ''; position: absolute; left: var(--x); width: var(--w); top: 0; bottom: 0; border-radius: 3px; background: var(--c); opacity: .85; }
.apc__orb { position: absolute; right: 7%; bottom: 58px; width: 54px; font-size: 14px; }
.apc__task { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; display: flex; justify-content: center; align-items: center; gap: 10px; background: rgba(18, 20, 26, .9); border-top: 1px solid rgba(255, 255, 255, .06); }
.apc__task i { width: 20px; height: 20px; border-radius: 5px; background: rgba(255, 255, 255, .1); }
.apc__task i:nth-child(2) { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3A414D, #050608 75%); box-shadow: inset 0 0 0 1px rgba(64, 210, 255, .5); }

.art-work { display: grid; align-content: center; justify-items: center; gap: 18px; min-height: 250px; padding: 0 32px; }
.awk__say { padding: 10px 16px; border-radius: 14px 14px 14px 4px; background: var(--layer-2); color: var(--ink); font-size: 15px; justify-self: start; }
.awk__fly { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border-radius: 10px; background: #1B1E25; border: 1px solid #2A2D34; color: #E0E3E6; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.awk__ic { width: 22px; height: 22px; color: #E0E3E6; flex: none; }
.awk__bar { position: relative; flex: 1; height: 4px; border-radius: 4px; background: #3A3D44; }
.awk__bar b { position: absolute; left: 0; top: 0; bottom: 0; width: var(--v); border-radius: 4px; background: #40D2FF; }
.awk__bar i { position: absolute; left: var(--v); top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #40D2FF; box-shadow: 0 0 0 4px rgba(64, 210, 255, .2); }
.awk__val { width: 24px; text-align: right; font-variant-numeric: tabular-nums; }
.awk__done { justify-self: end; padding: 8px 14px; border-radius: 14px 14px 4px 14px; background: var(--acc-badge); border: 1px solid var(--acc-line); color: var(--acc-ink); font-size: 14px; }

.art-charge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: center; align-content: center; min-height: 0; padding: 0 32px; }
.ach { display: grid; gap: 12px; padding: 18px; border-radius: 10px; background: #1B1E25; border: 1px solid #2A2D34; color: #E0E3E6; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.ach__who { display: flex; align-items: center; gap: 8px; color: #9AA0A8; font-size: 13px; }
.ach__who svg { width: 20px; height: 20px; }
.ach--mc .ach__who { font-family: var(--mono); color: #9DB4FF; }
.ach__q { color: #fff; font-size: 15px; line-height: 22px; }
.ach__scenes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; counter-reset: sc; }
.ach__scenes li { counter-increment: sc; padding: 7px 9px; border-radius: 6px; background: #23262D; color: #C9CCD1; font-size: 12px; }
.ach__scenes li::before { content: counter(sc) '  '; color: #8A8E96; }
.ach__btns { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ach__btns span { padding: 7px 12px; border-radius: 6px; border: 1px solid #3A3D44; color: #E0E3E6; font-size: 13px; }
.ach__btns .is-main { border-color: transparent; background: #0277B6; color: #fff; }
.ach__btns .is-film { background: #2B48D2; }
@media (max-width: 899px) { .art-charge { grid-template-columns: minmax(0, 1fr); padding: 0 24px; } .art-work { padding: 0 24px; } .apc { left: 24px; } }
@media (max-width: 599px) { .apc__win--files { width: 62%; left: 5%; } .apc__win--ae { left: 22%; top: 150px; width: 74%; } .art-pc { min-height: 330px; } }

/* ---------------------------------------------------------------- products (Home cards) */
.hcard__by { display: flex; align-items: center; gap: 8px; color: var(--acc-ink); font-size: 14px; line-height: 20px; font-weight: 500; }
.hcard__by .pmark, .hcard__by .mark { width: 20px; height: 20px; }
.hcard__shot { display: block; margin: 28px 32px 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--sep); background: #050910; }
.hcard__shot img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .6s var(--ease); }
.hcard__shot:hover img { transform: scale(1.015); }
.hcard .checks { margin-bottom: 28px; }
.hcard__actions { gap: 12px; }
@media (max-width: 899px) { .hcard__shot { margin: 24px 24px 0; } }
.asks__rule { margin-top: 64px; }
.asks__t { margin-top: 48px; color: var(--ink); font-size: 18px; line-height: 28px; font-weight: 500; text-align: center; }
.minis { padding-top: 40px; }
.mini .pmark { width: 20px; height: 20px; }