/* The platform movie (cabinet/_movie.html + movie.js). Loaded only on the "about the platform" page. */
.movie { margin-bottom: 8px; }
.mv-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 10; min-height: 360px; border: 1px solid var(--border); border-radius: var(--card-radius) var(--card-radius) 0 0;
  background: linear-gradient(135deg, #0d1b2a, #14323b 55%, #0f2a2e); color: #eaf6f4; isolation: isolate; box-shadow: var(--elevation-2); }
.mv-bg i { position: absolute; border-radius: 50%; filter: blur(46px); opacity: .5; animation: mv-float 14s ease-in-out infinite alternate; }
.mv-bg i:nth-child(1) { width: 320px; height: 320px; left: -80px; top: -60px; background: color-mix(in srgb, var(--accent) 60%, transparent); }
.mv-bg i:nth-child(2) { width: 260px; height: 260px; right: -60px; bottom: -80px; background: #3d7bff55; animation-duration: 18s; }
.mv-bg i:nth-child(3) { width: 180px; height: 180px; left: 45%; top: 30%; background: #9b7bf744; animation-duration: 22s; }
@keyframes mv-float { to { transform: translate(40px, 30px) scale(1.15); } }

.mv-scene { position: absolute; inset: 0; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: 12px; padding: 24px clamp(18px, 4vw, 54px) 96px; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }
.mv-scene.on { opacity: 1; visibility: visible; }
.mv-art { width: 100%; max-height: 100%; overflow: visible; }
.mv-art * { transform-box: fill-box; transform-origin: center; }
.mv-copy { min-width: 0; }
.mv-kicker { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.mv-copy h2 { margin: 0; font-size: clamp(24px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.03em; color: #fff; }
.mv-scene:not(.tut) .mv-kicker, .mv-scene:not(.tut) .mv-copy h2, .mv-scene .mv-prices, .mv-scene .mv-handle { opacity: 0; transform: translateY(18px); }
.mv-scene.on .mv-kicker { animation: mv-up .7s .15s var(--ease) forwards; }
.mv-scene.on .mv-copy h2 { animation: mv-up .8s .35s var(--ease) forwards; }
.mv-scene.on .mv-prices { animation: mv-up .8s 1.1s var(--ease) forwards; }
.mv-scene.on .mv-handle { animation: mv-up .8s 1.4s var(--ease) forwards; }
@keyframes mv-up { to { opacity: 1; transform: none; } }
.mv-prices { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; max-width: 360px; }
.mv-prices li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-radius: 0; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); font-size: 14px; }
.mv-handle { display: inline-block; margin-top: 18px; padding: 10px 20px; border-radius: 0; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 20px; text-decoration: none; }

/* art: shared look */
.mv-art rect, .mv-art circle, .mv-art path { fill: none; stroke: #bfeee6; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mv-art text { fill: #eaf6f4; font-family: Manrope, system-ui, sans-serif; font-weight: 700; stroke: none; }

/* 1 - logo, rings, orbit */
.s1-logo rect { fill: var(--accent); stroke: none; } .s1-logo text { fill: var(--on-accent); font-size: 56px; font-weight: 800; }
.s1-rings circle { stroke: var(--accent); opacity: 0; } .s1-orbit circle { fill: rgba(255,255,255,.1); }
.mv-scene.on .s1-logo { animation: mv-pop .9s var(--ease) both; }
.mv-scene.on .s1-rings circle { animation: mv-ring 3s ease-out infinite; }
.mv-scene.on .s1-rings circle:nth-child(2) { animation-delay: 1s; } .mv-scene.on .s1-rings circle:nth-child(3) { animation-delay: 2s; }
.s1-orbit .o1 { transform: translate(90px, 70px); } .s1-orbit .o2 { transform: translate(310px, 80px); } .s1-orbit .o3 { transform: translate(320px, 190px); } .s1-orbit .o4 { transform: translate(80px, 195px); }
.s1-orbit > g { opacity: 0; } .mv-scene.on .s1-orbit > g { animation: mv-in 0.8s var(--ease) forwards, mv-bob 4s 1s ease-in-out infinite alternate; }
.mv-scene.on .s1-orbit .o2 { animation-delay: .25s, 1.25s; } .mv-scene.on .s1-orbit .o3 { animation-delay: .5s, 1.5s; } .mv-scene.on .s1-orbit .o4 { animation-delay: .75s, 1.75s; }
@keyframes mv-pop { from { opacity: 0; transform: scale(.3) rotate(-12deg); } 60% { transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes mv-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes mv-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mv-bob { to { translate: 0 -8px; } }

/* 2 - papers fly away, one window assembles */
.s2-papers rect { fill: rgba(255,255,255,.08); } .s2-window > rect:first-child { fill: rgba(255,255,255,.06); }
.s2-window g rect { fill: rgba(255,255,255,.08); } .s2-window .ok { stroke: var(--accent); stroke-width: 4; }
.s2-window, .s2-window g, .s2-window .ok { opacity: 0; }
.mv-scene.on .s2-papers rect { animation: mv-fly 1.4s 1.2s ease-in forwards; }
.mv-scene.on .s2-papers .p2 { animation-delay: 1.35s; } .mv-scene.on .s2-papers .p3 { animation-delay: 1.5s; } .mv-scene.on .s2-papers .p4 { animation-delay: 1.65s; }
.mv-scene.on .s2-papers .pl { animation: mv-in .01s 1.3s reverse forwards; }
.mv-scene.on .s2-window { animation: mv-in .6s 2.2s forwards; }
.mv-scene.on .s2-window .w1 { animation: mv-slide .7s 2.6s var(--ease) forwards; }
.mv-scene.on .s2-window .w2 { animation: mv-slide .7s 3.1s var(--ease) forwards; }
.mv-scene.on .s2-window .w3 { animation: mv-slide .7s 3.6s var(--ease) forwards; }
.mv-scene.on .s2-window .ok { animation: mv-draw 1s 4.5s forwards; stroke-dasharray: 60; stroke-dashoffset: 60; opacity: 1; }
@keyframes mv-fly { to { transform: translate(-160px, -90px) rotate(-28deg); opacity: 0; } }
@keyframes mv-slide { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes mv-draw { to { stroke-dashoffset: 0; } }

/* price - tariffs and coins */
.s4-cards rect { fill: rgba(255,255,255,.07); } .s4-cards .c2 rect { fill: color-mix(in srgb, var(--accent) 22%, transparent); stroke: var(--accent); } .s4-cards .c2 circle { fill: var(--accent); stroke: none; }
.s4-cards > g { opacity: 0; } .s4-coins circle { fill: #f6ad3c; stroke: #ffd98a; opacity: 0; }
.mv-scene.on .s4-cards > g { animation: mv-rise .8s var(--ease) forwards; }
.mv-scene.on .s4-cards .c2 { animation-delay: .4s; } .mv-scene.on .s4-cards .c3 { animation-delay: .8s; }
.mv-scene.on .s4-coins circle { animation: mv-coin 2.4s ease-in infinite; }
.mv-scene.on .s4-coins .k1 { animation-delay: 1.4s; } .mv-scene.on .s4-coins .k2 { animation-delay: 1.9s; } .mv-scene.on .s4-coins .k3 { animation-delay: 2.4s; }
@keyframes mv-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes mv-coin { 0% { opacity: 0; transform: translateY(-10px) rotateY(0); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(150px) rotateY(540deg); } }

/* help - plane + dots */
.s6-plane circle { fill: color-mix(in srgb, var(--accent) 25%, transparent); stroke: var(--accent); } .s6-plane path { stroke: #fff; fill: rgba(255,255,255,.15); }
.s6-dots circle { fill: var(--accent); stroke: none; opacity: 0; }
.mv-scene.on .s6-plane { animation: mv-plane 1.4s var(--ease) both, mv-bob 3s 1.4s ease-in-out infinite alternate; }
.mv-scene.on .s6-dots circle { animation: mv-twinkle 2.2s ease-in-out infinite; }
.mv-scene.on .s6-dots .d2 { animation-delay: .4s; } .mv-scene.on .s6-dots .d3 { animation-delay: .8s; } .mv-scene.on .s6-dots .d4 { animation-delay: 1.2s; } .mv-scene.on .s6-dots .d5 { animation-delay: 1.6s; }
@keyframes mv-plane { from { opacity: 0; transform: translate(-200px, 120px) rotate(-30deg) scale(.5); } to { opacity: 1; transform: none; } }
@keyframes mv-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.6); } }

/* ---- the screen tour: a drawn copy of the real cabinet with a moving cursor ---------------------------------------------- */
.mv-scene.tut { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 10px; padding: 16px clamp(14px, 3vw, 28px) 84px; }
.mv-step { display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(-10px); }
.mv-scene.on .mv-step { animation: mv-up .6s .1s var(--ease) forwards; }
.mv-step h2 { margin: 0; font-size: clamp(17px, 2.4vw, 24px); letter-spacing: -.02em; color: #fff; }
.mv-badge { padding: 4px 11px; border-radius: 0; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.mv-stage { position: relative; width: 100%; height: 100%; min-height: 0; --mv-s: 1; }
.mock { position: absolute; left: 50%; top: 0; width: 640px; height: 330px; transform-origin: 0 0; transform: translateX(calc(var(--mv-s) * -320px)) scale(var(--mv-s)); overflow: hidden;
  border-radius: 0; background: #0e1a1e; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 24px 70px rgba(0,0,0,.5); font: 500 12px/1.35 Manrope, system-ui, sans-serif; color: #dcebea; }
.mock * { box-sizing: border-box; }
.mock-bar { position: absolute; left: 0; right: 0; top: 0; height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 10px; background: #0a1417; border-bottom: 1px solid rgba(255,255,255,.07); }
.mock-bar i { width: 8px; height: 8px; border-radius: 50%; background: #34484c; } .mock-bar i:first-child { background: #e0625a; } .mock-bar i:nth-child(2) { background: #e3b341; } .mock-bar i:nth-child(3) { background: #4fc16d; }
.mock-bar span { margin-left: 14px; font-size: 10px; color: #6e8a8c; }
.mock-side { position: absolute; left: 0; top: 24px; bottom: 0; width: 150px; background: #0b1518; border-right: 1px solid rgba(255,255,255,.07); }
.mock-brand { height: 40px; padding: 7px 14px; font-weight: 800; font-size: 15px; letter-spacing: -.02em; line-height: 1.1; } .mock-brand small { display: block; font-size: 9px; font-weight: 500; color: #6e8a8c; letter-spacing: 0; }
.mock-grp { height: 22px; padding: 8px 14px 0; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #6e8a8c; }
.mock-it { position: absolute; left: 8px; right: 8px; height: 26px; border-radius: 0; padding: 0 8px; display: flex; align-items: center; font-size: 10.5px; color: #a9c2c2; white-space: nowrap; }
.mock-it.act { background: color-mix(in srgb, var(--accent) 20%, transparent); color: #fff; }
.mv-scene.on .mock-it.tgt { animation: it-on .3s var(--go, 3s) both; } .mv-scene.on .mock-it.src { animation: it-off .3s var(--go, 3s) forwards; }
@keyframes it-on { from { background: transparent; color: #a9c2c2; } to { background: color-mix(in srgb, var(--accent) 20%, transparent); color: #fff; } }
@keyframes it-off { to { background: transparent; color: #a9c2c2; } }
.mock-main { position: absolute; left: 150px; right: 0; top: 24px; bottom: 0; overflow: hidden; }
.sc { position: absolute; inset: 0; padding: 12px 16px; opacity: 0; }
.mv-scene.on .sc { animation: sc-in .35s var(--in, 0s) both, sc-out .25s var(--out, 999s) forwards; }
@keyframes sc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes sc-out { to { opacity: 0; } }
.sc h3 { margin: 0 0 8px; font-size: 16px; letter-spacing: -.02em; color: #fff; }
.mock-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.mock-choice { padding: 14px; border-radius: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); } .mock-choice b { display: block; color: #fff; font-size: 12.5px; } .mock-choice span { display: block; margin-top: 4px; font-size: 10.5px; color: #8aa6a7; }
.mock-card { padding: 10px 12px 12px; border-radius: 0; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.mock-card-h { margin-bottom: 8px; font-weight: 700; font-size: 12px; color: #fff; display: flex; align-items: center; gap: 8px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 0; background: rgba(255,255,255,.1); color: #cfe3e2; font-size: 9.5px; font-weight: 700; font-style: normal; }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; } .fgrid.three { grid-template-columns: repeat(3, 1fr); gap: 8px 10px; }
.f label { display: block; margin-bottom: 3px; font-size: 9.5px; color: #7f9b9c; }
.f .in { height: 26px; border-radius: 0; padding: 0 9px; display: flex; align-items: center; font-size: 11px; color: #fff; background: #142428; border: 1px solid rgba(255,255,255,.12); white-space: nowrap; overflow: hidden; }
.ty { display: inline-block; clip-path: inset(0 100% 0 0); }
.mv-scene.on .ty { animation: ty var(--dur, 1s) steps(var(--n, 10), end) var(--in, 0s) forwards; }
@keyframes ty { to { clip-path: inset(0 0 0 0); } }
.mock-btn { display: inline-block; margin-top: 9px; padding: 7px 16px; border-radius: 0; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 11.5px; }
.mock-p { margin: 4px 0 8px; font-size: 11px; color: #a9c2c2; }
.mock-note { padding: 7px 10px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.05); border-radius: 0 6px 6px 0; font-size: 11px; }
.mock-steps { margin: 0 0 8px; padding-left: 16px; font-size: 10.5px; color: #a9c2c2; display: grid; gap: 2px; } .mock-steps b { color: #fff; }
.mock-join { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px; border-radius: 0; background: rgba(255,255,255,.05); }
.mock-join small { display: block; font-size: 9.5px; color: var(--accent); font-weight: 700; } .mock-join b { display: block; font-size: 14px; color: #fff; } .mock-join span { font-size: 10px; color: #8aa6a7; }
.mock-join em { font-style: normal; padding: 5px 10px; border-radius: 0; border: 1px solid rgba(255,255,255,.18); font-size: 10px; color: #e8a09a; }
.mock-toast { position: absolute; right: 14px; bottom: 14px; padding: 9px 14px; border-radius: 0; background: #12392f; border: 1px solid var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; opacity: 0; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.mock-toast b { color: var(--accent); margin-right: 4px; }
.mv-scene.on .mock-toast { animation: toast .5s var(--in, 0s) var(--ease) both; }
@keyframes toast { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; } .mock-stats div { padding: 14px 12px; border-radius: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.mock-stats b { display: block; font-size: 26px; color: var(--accent); letter-spacing: -.03em; } .mock-stats span { font-size: 10px; color: #8aa6a7; }
.mock-staff { display: grid; gap: 7px; } .mock-staff > div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 0; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.mock-staff b { flex: 1; font-size: 12px; color: #fff; }
.av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 11px; background: var(--accent); color: var(--on-accent); }
.av.b { background: #6aa8ff; } .av.c { background: #f0a24a; } .av.d { background: #b58cf5; }
.rv { opacity: 0; } .mv-scene.on .rv { animation: sc-in .45s var(--in, 0s) both; }
.mock-phone { position: absolute; right: 14px; bottom: 14px; width: 190px; padding: 8px; border-radius: 0; background: #0a1417; border: 2px solid rgba(255,255,255,.22); opacity: 0; box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.mv-scene.on .mock-phone { animation: toast .6s var(--in, 0s) var(--ease) both; }
.ph-top { font-size: 9.5px; color: #8aa6a7; padding: 0 4px 6px; text-align: center; } .ph-msg { padding: 8px 10px; border-radius: 0; background: #1d3a44; } .ph-msg b { display: block; font-size: 11.5px; color: #fff; } .ph-msg span { display: block; margin-top: 2px; font-size: 9.5px; color: #a9c2c2; }
.mv-cursor { position: absolute; left: 0; top: 0; z-index: 30; width: 22px; height: 22px; pointer-events: none; transform: translate(470px, 250px); margin: -3px 0 0 -3px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); }
.mv-cursor svg { width: 22px; height: 22px; } .mv-cursor path { fill: #fff; stroke: #111; stroke-width: 1.4; stroke-linejoin: round; }
.mv-cursor i { position: absolute; left: 1px; top: 1px; width: 30px; height: 30px; margin: -12px 0 0 -12px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.mv-cursor.tap svg { animation: tap .3s; } .mv-cursor.tap i { animation: ripple .6s ease-out; }
@keyframes tap { 50% { transform: scale(.82); } } @keyframes ripple { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.9); } }

/* captions, poster, controls */
.mv-caption { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(92%, 760px); text-align: center; padding: 10px 16px; border-radius: 0; background: rgba(5, 12, 16, .7); backdrop-filter: blur(6px); color: #fff; font-size: 15px; line-height: 1.45; opacity: 0; z-index: 4; }
.mv-caption.show { animation: mv-cap 0.4s forwards; } @keyframes mv-cap { from { transform: translate(-50%, 8px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.mv-poster { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.07), transparent 60%), linear-gradient(135deg, #0d1b2a, #14323b); transition: opacity .5s; }
.mv-poster.gone { opacity: 0; pointer-events: none; }
.mv-poster h2 { margin: 6px 0 0; font-size: clamp(22px, 3vw, 34px); color: #fff; letter-spacing: -.03em; }
.mv-poster p { margin: 0; max-width: 460px; color: #b7cfd0; font-size: 15px; line-height: 1.5; }
.mv-poster-logo { width: 64px; height: 64px; border-radius: 0; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 32px; font-weight: 800; animation: mv-pop .9s var(--ease) both; }
.mv-poster-actions { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.mv-poster-note { font-size: 13px !important; color: #e8b66b !important; min-height: 18px; }
.mv-controls { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--card-radius) var(--card-radius); background: var(--panel); }
.mv-segments { flex: 1; display: flex; gap: 4px; }
.mv-segments { align-self: stretch; align-items: center; } .mv-segments i { flex: 1; height: 5px; border-radius: 0; background: var(--border); overflow: hidden; cursor: pointer; transition: height .15s; } .mv-segments i:hover { height: 9px; }
.mv-segments b { display: block; height: 100%; width: 0; background: var(--accent); }
#mv-volume { width: 90px; height: 24px; padding: 0; accent-color: var(--accent); background: transparent; border: 0; }
/* without JavaScript: scenes are plain cards, the drawn screens stay hidden */
.movie:not(.mv-js) .mv-frame { aspect-ratio: auto; display: grid; gap: 14px; padding: 16px; }
.movie:not(.mv-js) .mv-scene { position: static; opacity: 1; visibility: visible; padding: 8px; grid-template-columns: 1fr 1fr; }
.movie:not(.mv-js) .mv-scene.tut { grid-template-columns: 1fr; }
.movie:not(.mv-js) .mv-stage, .movie:not(.mv-js) .mv-poster, .movie:not(.mv-js) .mv-caption, .movie:not(.mv-js) .mv-controls { display: none; }
.movie:not(.mv-js) .mv-scene .mv-kicker, .movie:not(.mv-js) .mv-scene .mv-copy h2, .movie:not(.mv-js) .mv-scene .mv-prices, .movie:not(.mv-js) .mv-scene .mv-handle, .movie:not(.mv-js) .mv-step { opacity: 1; transform: none; }
.mv-reduced .mv-scene * { animation-duration: .01ms !important; animation-delay: 0s !important; }
@media (max-width: 720px) {
  .mv-frame { aspect-ratio: auto; min-height: 500px; }
  .mv-scene { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; padding-bottom: 110px; gap: 4px; }
  .mv-scene.tut { grid-template-rows: auto minmax(0, 1fr); padding: 12px 10px 100px; }
  .mv-art { max-height: 200px; }
  .mv-step { flex-wrap: wrap; gap: 6px; }
  #mv-volume { width: 64px; }
}

/* ==== bright theme: sunny, memorable, smiling (overrides the dark look above) ================================================ */
.movie { --b-blue: #3b5bff; --b-violet: #7a3cff; --b-pink: #ff5fa2; --b-yellow: #ffd23f; --b-teal: #19d3b0; --b-coral: #ff8a5b; --b-ink: #1b2559; }
.mv-frame { background: linear-gradient(135deg, #3b5bff 0%, #7a3cff 55%, #ff5fa2 100%); color: #fff; border: 0; box-shadow: 0 22px 60px rgba(59, 91, 255, .38); }
.mv-bg i { opacity: .6; mix-blend-mode: screen; }
.mv-bg i:nth-child(1) { background: #ffd23f; } .mv-bg i:nth-child(2) { background: #19d3b0; } .mv-bg i:nth-child(3) { background: #ff8a5b; }
.mv-brand { position: absolute; top: 12px; right: 14px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 0; background: rgba(255,255,255,.18); backdrop-filter: blur(6px); font-size: 13px; letter-spacing: .02em; }
.mv-brand-logo { width: 24px; height: 24px; border-radius: 0; display: grid; place-items: center; background: var(--b-yellow); color: var(--b-ink); font-weight: 800; font-size: 14px; animation: br-wiggle 3.2s ease-in-out infinite; }
@keyframes br-wiggle { 0%, 80%, 100% { transform: none; } 86% { transform: rotate(-12deg) scale(1.12); } 93% { transform: rotate(10deg) scale(1.08); } }
.mv-kicker { color: var(--b-yellow); }
.mv-copy h2, .mv-step h2 { color: #fff; text-shadow: 0 2px 12px rgba(20, 20, 90, .25); }
.mv-badge { background: var(--b-yellow); color: var(--b-ink); }
.mv-handle { background: var(--b-yellow); color: var(--b-ink); box-shadow: 0 8px 22px rgba(255, 210, 63, .45); }
.mv-art rect, .mv-art circle, .mv-art path { stroke: #fff; }
.mv-art text { fill: #fff; }
.mv-caption { background: rgba(20, 24, 90, .82); }
.mv-poster { background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.18), transparent 60%), linear-gradient(135deg, #3b5bff, #7a3cff 55%, #ff5fa2); }
.mv-poster-logo { background: var(--b-yellow); color: var(--b-ink); box-shadow: 0 10px 30px rgba(255, 210, 63, .5); }
.mv-poster p { color: #e8ebff; } .mv-poster-note { color: var(--b-yellow) !important; }

/* logo with a smile, rings, orbit */
.s1-logo rect { fill: var(--b-yellow); } .s1-logo text { fill: var(--b-ink); font-size: 46px; }
.s1-logo .smile { stroke: var(--b-ink); stroke-width: 4.5; fill: none; }
.s1-logo .cheek { fill: var(--b-pink); stroke: none; opacity: .8; }
.mv-scene.on .s1-logo .smile { animation: smile 2.6s ease-in-out infinite; } @keyframes smile { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.18) translateY(1px); } }
.s1-rings circle { stroke: var(--b-yellow); }
.s1-orbit circle { fill: #fff; stroke: none; } .s1-orbit path, .s1-orbit rect { stroke: var(--b-blue); }
.confetti i { position: absolute; width: 9px; height: 14px; border-radius: 0; opacity: 0; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i:nth-child(1) { left: 12%; background: var(--b-yellow); } .confetti i:nth-child(2) { left: 22%; background: var(--b-teal); } .confetti i:nth-child(3) { left: 33%; background: var(--b-pink); }
.confetti i:nth-child(4) { left: 44%; background: #fff; } .confetti i:nth-child(5) { left: 55%; background: var(--b-yellow); } .confetti i:nth-child(6) { left: 66%; background: var(--b-teal); }
.confetti i:nth-child(7) { left: 77%; background: var(--b-coral); } .confetti i:nth-child(8) { left: 88%; background: #fff; }
.mv-scene.on .confetti i { animation: conf 3.4s ease-in infinite; }
.mv-scene.on .confetti i:nth-child(2n) { animation-delay: .5s; animation-duration: 3s; } .mv-scene.on .confetti i:nth-child(3n) { animation-delay: 1s; } .mv-scene.on .confetti i:nth-child(5) { animation-delay: 1.6s; }
@keyframes conf { 0% { top: -10%; opacity: 0; transform: rotate(0); } 10% { opacity: 1; } 100% { top: 105%; opacity: 1; transform: rotate(540deg) translateX(20px); } }
.mv-scene:not(.on) .confetti i { animation: none; }
.mv-scene { overflow: hidden; }

/* scene 2 */
.s2-papers rect { fill: #fff; } .s2-papers .p1 { fill: var(--b-yellow); } .s2-papers .p2 { fill: var(--b-teal); } .s2-papers .p3 { fill: var(--b-coral); }
.s2-papers path { stroke: var(--b-ink); }
.s2-window > rect:first-child { fill: #fff; stroke: none; } .s2-window g rect { fill: #eef1ff; stroke: var(--b-blue); } .s2-window path, .s2-window circle { stroke: var(--b-blue); }
.s2-window > circle:nth-of-type(1) { fill: #ff5f56; stroke: none; } .s2-window .ok { stroke: var(--b-teal); }

/* scene 7 */
.s6-plane circle { fill: #29b6f6; stroke: #fff; } .s6-plane path { fill: #fff; stroke: #fff; } .s6-dots circle { fill: var(--b-yellow); }
.s6-dots .d2 { fill: var(--b-teal); } .s6-dots .d3 { fill: var(--b-pink); } .s6-dots .d5 { fill: #fff; }

/* the cabinet drawn on a light theme */
.mock { background: #fff; color: var(--b-ink); border: 0; box-shadow: 0 24px 60px rgba(20, 24, 90, .4); }
.mock-bar { background: #eef1ff; border-bottom: 1px solid #dfe4ff; } .mock-bar span { color: #7a85b8; }
.mock-side { background: #f4f6ff; border-right: 1px solid #e3e8ff; }
.mock-brand { color: var(--b-ink); } .mock-brand small { color: #7a85b8; } .mock-grp { color: #8c96c4; }
.mock-it { color: #4a5688; } .mock-it.act { background: var(--b-blue); color: #fff; }
@keyframes it-on { from { background: transparent; color: #4a5688; } to { background: var(--b-blue); color: #fff; } }
@keyframes it-off { to { background: transparent; color: #4a5688; } }
.sc h3 { color: var(--b-ink); }
.mock-choice { background: #f4f6ff; border: 1px solid #e0e5ff; } .mock-choice b { color: var(--b-ink); } .mock-choice span { color: #6c78ad; }
.mock-card { background: #f7f9ff; border: 1px solid #e3e8ff; } .mock-card-h { color: var(--b-ink); }
.mock .pill { background: #e7ebff; color: var(--b-blue); }
.f label { color: #6c78ad; } .f .in { background: #fff; border: 1px solid #cfd6f7; color: var(--b-ink); overflow: visible; }
.mock-btn { background: linear-gradient(135deg, var(--b-blue), var(--b-violet)); color: #fff; box-shadow: 0 6px 16px rgba(59, 91, 255, .35); }
.mock-p { color: #4a5688; } .mock-note { background: #fff7d6; border-left-color: var(--b-yellow); color: var(--b-ink); }
.mock-steps { color: #4a5688; } .mock-steps b { color: var(--b-ink); }
.mock-join { background: #eef1ff; } .mock-join small { color: var(--b-blue); } .mock-join b { color: var(--b-ink); } .mock-join span { color: #6c78ad; } .mock-join em { border-color: #ffc4cf; color: #e0475f; }
.mock-toast { background: #e6fbf5; border: 1px solid var(--b-teal); color: #0b5a49; } .mock-toast b { color: #0fa88b; }
.mock-stats div { background: #f4f6ff; border: 1px solid #e3e8ff; } .mock-stats b { color: var(--b-blue); } .mock-stats span { color: #6c78ad; }
.mock-staff > div { background: #f7f9ff; border: 1px solid #e3e8ff; } .mock-staff b { color: var(--b-ink); }
.av { background: var(--b-blue); color: #fff; } .av.b { background: var(--b-teal); } .av.c { background: var(--b-coral); } .av.d { background: var(--b-pink); }
.mock-phone { background: #fff; border: 2px solid #cfd6f7; } .ph-top { color: #6c78ad; } .ph-msg { background: #e3f4ff; } .ph-msg b { color: var(--b-ink); } .ph-msg span { color: #4a5688; }
.mv-cursor path { fill: var(--b-ink); stroke: #fff; } .mv-cursor i { border-color: var(--b-pink); }

/* prices: a free month, then three plans, then the warning */
.mv-scene.pricing { grid-template-columns: 1fr; align-content: center; padding: 20px clamp(14px, 3vw, 34px) 96px; }
.mv-price header { margin-bottom: 16px; } .mv-price h2 { margin: 0; font-size: clamp(24px, 3.6vw, 40px); line-height: 1.1; letter-spacing: -.03em; }
.mv-scene.pricing .mv-kicker, .mv-scene.pricing .mv-copy h2 { opacity: 1; transform: none; }
.price-row { display: grid; grid-template-columns: 1.15fr auto 1fr 1fr 1fr; gap: 10px; align-items: stretch; }
.pcard { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 16px 14px; border-radius: 0; background: #fff; color: var(--b-ink); box-shadow: 0 14px 34px rgba(20, 24, 90, .28); opacity: 0; }
.pcard b { font-size: 15px; } .pcard strong { font-size: clamp(18px, 2.4vw, 26px); letter-spacing: -.03em; color: var(--b-blue); line-height: 1.1; } .pcard small { color: #6c78ad; font-size: 12.5px; }
.pcard.free { background: linear-gradient(160deg, #ffd23f, #ffb347); } .pcard.free strong { color: var(--b-ink); } .pcard.free small { color: #5a4a10; }
.pico { font-size: 26px; line-height: 1; }
.parrow { align-self: center; font-size: 26px; font-weight: 800; color: var(--b-yellow); opacity: 0; }
.mv-scene.on .pcard { animation: pc-in .6s var(--d, 0s) cubic-bezier(.2, 1.3, .3, 1) both; } .mv-scene.on .parrow { animation: pc-in .5s var(--d, 0s) both; }
@keyframes pc-in { from { opacity: 0; transform: translateY(30px) scale(.9); } to { opacity: 1; transform: none; } }
.mv-scene.on .pcard.free { animation: pc-in .6s var(--d, 0s) cubic-bezier(.2, 1.3, .3, 1) both, pc-pulse 2s 1.4s ease-in-out infinite; } @keyframes pc-pulse { 50% { transform: scale(1.04); } }
.price-warn { margin: 16px 0 0; padding: 10px 14px; border-radius: 0; background: #fff7d6; color: #5a4a10; font-size: 14px; font-weight: 700; opacity: 0; max-width: 640px; }
.mv-scene.on .price-warn { animation: pc-in .6s var(--d, 0s) ease both; }
@media (max-width: 760px) { .price-row { grid-template-columns: 1fr 1fr; } .parrow { display: none; } .pcard.free { grid-column: 1 / -1; } .mv-brand b { display: none; } }
.pcard strong { letter-spacing: 0; word-spacing: .14em; }

/* tap to stop, full screen, phones */
.mv-frame { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mv-frame a, .mv-frame button, .mv-poster { cursor: auto; }
.mv-flash { position: absolute; left: 50%; top: 50%; z-index: 6; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 24, 90, .62); color: #fff; font-size: 30px; opacity: 0; pointer-events: none; }
.mv-flash.on { animation: mv-flash .7s ease-out; } @keyframes mv-flash { 0% { opacity: 0; transform: scale(.7); } 25% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
#mv-full svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mv-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--ink-muted); }
.movie:fullscreen, .movie.mv-fs { display: flex; flex-direction: column; width: 100%; height: 100%; margin: 0; background: #0b0f2a; }
.movie.mv-fs { position: fixed; inset: 0; z-index: 9999; }
.movie:fullscreen .mv-frame, .movie.mv-fs .mv-frame { flex: 1; aspect-ratio: auto; min-height: 0; border-radius: 0; box-shadow: none; }
.movie:fullscreen .mv-controls, .movie.mv-fs .mv-controls { border-radius: 0; border-left: 0; border-right: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
.movie:fullscreen .mv-hint, .movie.mv-fs .mv-hint { display: none; }
.movie:fullscreen .mv-caption, .movie.mv-fs .mv-caption { font-size: clamp(16px, 2.2vw, 24px); width: min(92%, 980px); }
.movie:fullscreen .mv-copy h2, .movie.mv-fs .mv-copy h2 { font-size: clamp(30px, 5vw, 64px); }
@media (max-width: 720px) {
  .mv-controls { gap: 6px; padding: 8px 10px; }
  .mv-controls .btn.small { min-width: 44px; min-height: 44px; }
  #mv-volume { display: none; }               /* phones have volume buttons */
  .mv-caption { font-size: 14px; padding: 8px 12px; bottom: 10px; }
  .mv-scene.tut { padding: 10px 8px 78px; gap: 6px; }
  .mv-step h2 { font-size: 15px; } .mv-badge { font-size: 11px; padding: 3px 9px; }
  .mv-brand { top: 8px; right: 8px; padding: 3px 5px; } .mv-brand b { display: none; }
  .mv-price h2 { font-size: 24px; } .pcard { padding: 12px 10px; } .price-warn { font-size: 12.5px; }
  .mv-frame { min-height: 460px; }
}
@media (max-width: 720px) and (orientation: landscape) { .mv-frame { min-height: 0; aspect-ratio: 16 / 9; } .mv-hint { display: none; } }
@media (min-width: 721px) { .mv-hint { display: none; } }

/* the drawn window sits in the middle of the stage, not at the top */
.mock { top: 50%; transform: translate(calc(var(--mv-s) * -320px), calc(var(--mv-s) * -165px)) scale(var(--mv-s)); }

/* typed fields: whole words pop in (no half-written words when someone pauses) */
.ty { clip-path: none; display: inline-block; }
.mv-scene.on .ty { animation: none; }
.tw { display: inline-block; opacity: 0; } .tw + .tw { margin-left: .3em; }
.mv-scene.on .tw { animation: tw-in .22s calc(var(--in, 0s) + var(--k, 0) * .26s) both; }
@keyframes tw-in { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }

/* the plan list opens above the field */
.f.f-sel { position: relative; }
.f .caret { margin-left: auto; color: #8c96c4; font-size: 11px; }
.f .in { display: flex; align-items: center; }
.dd { position: absolute; left: 0; right: 0; bottom: calc(100% + 4px); z-index: 12; padding: 4px; border-radius: 0; background: #fff; border: 1px solid #cfd6f7; box-shadow: 0 14px 32px rgba(20, 24, 90, .28); opacity: 0; pointer-events: none; }
.mv-scene.on .dd { animation: sc-in .25s var(--in, 0s) both, sc-out .2s var(--out, 999s) forwards; }
.opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 9px; border-radius: 0; font-size: 11.5px; color: var(--b-ink); }
.opt em { font-style: normal; font-size: 9.5px; font-weight: 800; padding: 1px 7px; border-radius: 0; background: var(--b-yellow); color: var(--b-ink); }
.mv-scene.on .opt { animation: opt-hl .01s var(--hl, 999s) forwards; }
@keyframes opt-hl { to { background: #e7ebff; color: var(--b-blue); font-weight: 700; } }

/* ==== calm brand palette (deep teal, soft aqua, one warm accent) instead of the blue-violet-pink gradient; smaller, centred ======= */
.movie { --b-blue: #12808c; --b-violet: #0d5f6d; --b-pink: #5fd0c2; --b-yellow: #f4c95d; --b-teal: #27d4b0; --b-coral: #e9a46a; --b-ink: #0d2f3a;
  width: 100%; max-width: 760px; margin-left: auto; margin-right: auto; }
.mv-frame { background: linear-gradient(135deg, #0c3340 0%, #0f5361 58%, #14707b 100%); box-shadow: 0 18px 46px rgba(8, 40, 50, .35); min-height: 300px; aspect-ratio: 16 / 9; max-height: 70vh; }
.mv-bg i { opacity: .32; }
.mv-bg i:nth-child(1) { background: #27d4b0; } .mv-bg i:nth-child(2) { background: #2f9bd6; } .mv-bg i:nth-child(3) { background: #8fe0d2; }
.mv-poster { background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.14), transparent 60%), linear-gradient(135deg, #0c3340, #0f5361 58%, #14707b); }
.mv-poster p { color: #d7ecec; }
.mv-caption { background: rgba(6, 28, 36, .84); }
.mv-flash { background: rgba(6, 28, 36, .62); }
.mv-copy h2, .mv-step h2 { text-shadow: 0 2px 12px rgba(4, 24, 30, .3); }
.mock { box-shadow: 0 24px 60px rgba(4, 24, 30, .45); }
.movie:fullscreen, .movie.mv-fs { background: #061c24; max-width: none; }
.movie:fullscreen .mv-frame, .movie.mv-fs .mv-frame { max-height: none; aspect-ratio: auto; }
.mv-start-wait { opacity: .75; }
@media (max-width: 720px) { .movie { max-width: 100%; } .mv-frame { aspect-ratio: auto; min-height: 440px; max-height: none; } }