/* =====================================================================
   Home "What we do": animated scene per service (driven by js/svc.js)
   ===================================================================== */
.svc__stage { container-type: inline-size; }
.svc__stage .vis { padding: 8%; }
.sv-chip { position: absolute; z-index: 5; display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.5cqw 2.2cqw; border-radius: 1.4cqw; font-size: max(11px, 2.1cqw); font-weight: 500; color: var(--text);
  background: rgba(22,23,28,.9); border: 1px solid rgba(242,239,234,.12); box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transform: translateY(10px) scale(.96); }
.sv-chip .dot { width: 1.3cqw; height: 1.3cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61,220,132,.6); animation: svPing 1.8s infinite; }
@keyframes svPing { 70% { box-shadow: 0 0 0 1.4cqw rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
@keyframes svIn { to { opacity: 1; transform: none; } }
.sv-cur { position: absolute; z-index: 6; left: 70%; top: 70%; pointer-events: none; opacity: 0; }
.sv-cur svg { width: max(15px, 3cqw); fill: var(--accent); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.sv-cur span { position: absolute; left: 2.6cqw; top: 2.8cqw; padding: .5cqw 1.3cqw; border-radius: .6cqw 1.6cqw 1.6cqw 1.6cqw; background: var(--accent); color: #fff; font-size: max(10px, 1.8cqw); font-weight: 500; white-space: nowrap; }

/* ---------- 0. websites: responsive reflow ---------- */
.vis--web { place-items: center; }
.sw-bps { position: absolute; top: 7%; left: 0; right: 0; display: flex; justify-content: center; gap: 1.6cqw; font-size: max(10px, 1.8cqw); }
.sw-bps span { padding: .7cqw 1.6cqw; border-radius: 99px; color: rgba(242,239,234,.4); border: 1px solid transparent; transition: all .3s; }
.sw-dev { width: 100%; border-radius: 1.6cqw; overflow: hidden; background: #0E0F13; border: 1px solid rgba(242,239,234,.14); box-shadow: 0 50px 90px -40px rgba(0,0,0,.95); }
.sw-bar { display: flex; align-items: center; gap: .9cqw; height: 4.6cqw; padding: 0 1.6cqw; background: #16171C; border-bottom: 1px solid rgba(242,239,234,.07); }
.sw-bar i { width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: rgba(242,239,234,.16); }
.sw-bar span { flex: 1; max-width: 60%; margin: 0 auto; height: 2.8cqw; border-radius: .7cqw; background: rgba(242,239,234,.06); font-size: max(9px, 1.5cqw); line-height: 2.8cqw; text-align: center; color: rgba(242,239,234,.5); overflow: hidden; white-space: nowrap; }
.sw-page { container-type: inline-size; padding: 4%; height: 50cqw; display: flex; flex-direction: column; gap: 4.5%; overflow: hidden; }
.sw-nav { display: flex; align-items: center; gap: 4%; }
.sw-nav b { width: 16%; height: 1.6cqw; border-radius: .4cqw; background: #F2EFEA; }
.sw-nav span { flex: 1; display: flex; justify-content: center; gap: 6%; }
.sw-nav span i { width: 12%; height: 1cqw; border-radius: .4cqw; background: rgba(242,239,234,.3); }
.sw-nav u { width: 15%; height: 3.2cqw; border-radius: .6cqw; background: var(--accent); }
.sw-nav em { display: none; gap: .7cqw; flex-direction: column; margin-left: auto; }
.sw-nav em i { width: 3cqw; height: .5cqw; border-radius: 1px; background: #F2EFEA; }
.sw-hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 5%; align-items: center; }
.sw-copy { display: grid; gap: 1.2cqw; }
.sw-copy s { height: 3.2cqw; border-radius: .6cqw; background: #F2EFEA; }
.sw-copy s + s { width: 72%; }
.sw-copy p { margin: .6cqw 0 0; height: 1.1cqw; border-radius: .4cqw; background: rgba(242,239,234,.28); }
.sw-copy p + p { width: 80%; margin-top: 0; }
.sw-copy u { width: 38%; height: 3.6cqw; margin-top: 1cqw; border-radius: .7cqw; background: var(--accent); box-shadow: 0 1cqw 3cqw -1cqw rgba(59,107,255,.8); }
.sw-img { aspect-ratio: 4 / 3; border-radius: 1cqw; background: radial-gradient(60% 70% at 70% 30%, rgba(124,155,255,.9), transparent 70%), linear-gradient(140deg, #1B2B6B, #0E1430 60%, #3B6BFF); }
.sw-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; }
.sw-cards div { padding: 4% 5%; border-radius: .9cqw; background: rgba(242,239,234,.04); border: 1px solid rgba(242,239,234,.08); display: grid; gap: 1cqw; }
.sw-cards i { height: 6cqw; border-radius: .6cqw; background: rgba(59,107,255,.22); }
.sw-cards p { margin: 0; height: 1cqw; width: 70%; border-radius: .4cqw; background: rgba(242,239,234,.25); }
@container (max-width: 330px) {
  .sw-hero { grid-template-columns: 1fr; }
  .sw-img { aspect-ratio: 16 / 7; order: -1; }
  .sw-cards { grid-template-columns: 1fr 1fr; }
  .sw-cards div:nth-child(3) { display: none; }
  .sw-nav span { display: none; } .sw-nav u { margin-left: auto; }
}
@container (max-width: 200px) {
  .sw-cards { grid-template-columns: 1fr; }
  .sw-nav u { display: none; } .sw-nav em { display: flex; }
  .sw-copy s { height: 4.4cqw; }
}
.sw-pub { right: 6%; bottom: 9%; }
.sw-cms { left: 6%; bottom: 9%; }
.sv-plus { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; min-width: 16px; min-height: 16px; border-radius: .6cqw; background: var(--accent); color: #fff; font-weight: 600; }
.vis--web.run .sw-dev { animation: swW 9s cubic-bezier(.65,0,.35,1) both; }
@keyframes swW { 0%, 22% { width: 100%; } 34%, 52% { width: 62%; } 64%, 86% { width: 36%; } 97%, 100% { width: 100%; } }
.vis--web.run .b1 { animation: swB1 9s both; } .vis--web.run .b2 { animation: swB2 9s both; } .vis--web.run .b3 { animation: swB3 9s both; }
@keyframes swB1 { 0%, 26% { color: #fff; border-color: rgba(59,107,255,.6); background: rgba(59,107,255,.16); } 30%, 92% { color: rgba(242,239,234,.4); border-color: transparent; background: none; } 97%, 100% { color: #fff; border-color: rgba(59,107,255,.6); background: rgba(59,107,255,.16); } }
@keyframes swB2 { 0%, 28% { color: rgba(242,239,234,.4); border-color: transparent; background: none; } 32%, 56% { color: #fff; border-color: rgba(59,107,255,.6); background: rgba(59,107,255,.16); } 60%, 100% { color: rgba(242,239,234,.4); border-color: transparent; background: none; } }
@keyframes swB3 { 0%, 60% { color: rgba(242,239,234,.4); border-color: transparent; background: none; } 64%, 88% { color: #fff; border-color: rgba(59,107,255,.6); background: rgba(59,107,255,.16); } 92%, 100% { color: rgba(242,239,234,.4); border-color: transparent; background: none; } }
.vis--web.run .sw-cms { animation: svIn .6s cubic-bezier(.2,.8,.2,1) 1.2s forwards, svOut .4s 3.6s forwards; }
.vis--web.run .sw-pub { animation: svIn .6s cubic-bezier(.3,1.5,.5,1) 7.6s forwards; }
@keyframes svOut { to { opacity: 0; transform: translateY(-6px); } }

/* ---------- 1. product: dashboard ---------- */
.sp-dash { --bg: #0E0F13; --pn: rgba(242,239,234,.03); --ln: rgba(242,239,234,.09); --tx: #F2EFEA; --mt: rgba(242,239,234,.45);
  width: 100%; display: grid; grid-template-columns: 20% 1fr; aspect-ratio: 16 / 11.5; border-radius: 1.6cqw; overflow: hidden; background: var(--bg); color: var(--tx);
  border: 1px solid rgba(242,239,234,.14); box-shadow: 0 50px 90px -40px rgba(0,0,0,.95); transition: background .6s, color .6s; }
.sp-dash.is-light { --bg: #F4F3F0; --pn: #fff; --ln: rgba(18,19,24,.09); --tx: #121318; --mt: rgba(18,19,24,.5); }
.sp-dash aside { padding: 14% 14%; border-right: 1px solid var(--ln); display: flex; flex-direction: column; gap: 2cqw; transition: border-color .6s; }
.sp-dash aside b { width: 70%; height: 1.8cqw; border-radius: .5cqw; background: var(--tx); margin-bottom: 1.6cqw; transition: background .6s; }
.sp-dash aside i { height: 1.3cqw; border-radius: .5cqw; background: var(--ln); transition: background .6s; }
.sp-dash aside i.on { background: var(--accent); }
.sp-main { padding: 4.5%; display: flex; flex-direction: column; gap: 2.2cqw; min-width: 0; }
.sp-top { display: flex; justify-content: space-between; align-items: center; }
.sp-top b { font-size: max(11px, 2.4cqw); font-weight: 600; font-family: var(--font-head); letter-spacing: -.02em; }
.sp-toggle { position: relative; width: 7cqw; height: 3.8cqw; border-radius: 99px; background: rgba(59,107,255,.25); border: 1px solid rgba(59,107,255,.5); }
.sp-toggle i { position: absolute; left: .45cqw; top: 50%; width: 2.8cqw; height: 2.8cqw; margin-top: -1.4cqw; border-radius: 50%; background: var(--accent); transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.sp-dash.is-light .sp-toggle i { transform: translateX(3.1cqw); background: #fff; box-shadow: 0 0 0 1px rgba(18,19,24,.15); }
.sp-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.sp-kpis div { position: relative; padding: 1.8cqw; border-radius: 1.2cqw; border: 1px solid var(--ln); background: var(--pn); display: grid; gap: .6cqw; transition: background .6s, border-color .6s; opacity: 0; transform: translateY(8px); }
.sp-kpis small { font-size: max(9px, 1.5cqw); color: var(--mt); }
.sp-kpis b { font-size: max(13px, 2.9cqw); font-weight: 600; font-family: var(--font-head); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.sp-kpis em { position: absolute; right: 1.4cqw; top: 1.6cqw; font-style: normal; font-size: max(8px, 1.3cqw); color: #3DDC84; }
.sp-chart { position: relative; flex: 1; min-height: 0; border-radius: 1.2cqw; border: 1px solid var(--ln); background: var(--pn); padding: 2cqw; transition: background .6s, border-color .6s; }
.sp-chart svg { position: relative; z-index: 2; width: 100%; height: 100%; display: block; overflow: visible; }
.sp-chart .ln { fill: none; stroke: var(--accent); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-dasharray: 420; stroke-dashoffset: 420; }
.sp-chart .ar { fill: url(#none); fill: var(--accent); opacity: 0; }
.sp-bars { position: absolute; inset: 2cqw; display: flex; align-items: flex-end; gap: 4%; z-index: 1; }
.sp-bars i { flex: 1; height: var(--h); border-radius: .6cqw .6cqw 0 0; background: rgba(59,107,255,.14); transform: scaleY(0); transform-origin: bottom; }
.sp-tip { position: absolute; z-index: 3; right: 3%; top: 2%; padding: .5cqw 1.2cqw; border-radius: .6cqw; background: var(--accent); color: #fff; font-size: max(9px, 1.5cqw); font-weight: 600; opacity: 0; transform: translateY(6px); }
.sp-tip::after { content: ""; position: absolute; left: 50%; bottom: -1.6cqw; width: 1.4cqw; height: 1.4cqw; margin-left: -.7cqw; border-radius: 50%; background: #fff; border: .4cqw solid var(--accent); }
.sp-rows { display: grid; gap: 1.2cqw; }
.sp-rows i { height: 1.5cqw; border-radius: .5cqw; background: var(--ln); transform: scaleX(0); transform-origin: left; transition: background .6s; }
.sp-chip { left: 6%; bottom: 7%; }
.sv-sq { width: 2.2cqw; height: 2.2cqw; min-width: 12px; min-height: 12px; border-radius: .6cqw; background: linear-gradient(135deg, #F2EFEA 50%, #121318 50%); border: 1px solid rgba(242,239,234,.3); }
.vis--app.run .sp-kpis div { animation: svIn .6s cubic-bezier(.2,.8,.2,1) forwards; }
.vis--app.run .sp-kpis div:nth-child(2) { animation-delay: .12s; } .vis--app.run .sp-kpis div:nth-child(3) { animation-delay: .24s; }
.vis--app.run .sp-bars i { animation: spBar .7s cubic-bezier(.2,.8,.2,1) forwards; }
.vis--app.run .sp-bars i:nth-child(2) { animation-delay: .07s; } .vis--app.run .sp-bars i:nth-child(3) { animation-delay: .14s; } .vis--app.run .sp-bars i:nth-child(4) { animation-delay: .21s; }
.vis--app.run .sp-bars i:nth-child(5) { animation-delay: .28s; } .vis--app.run .sp-bars i:nth-child(6) { animation-delay: .35s; } .vis--app.run .sp-bars i:nth-child(7) { animation-delay: .42s; }
@keyframes spBar { to { transform: scaleY(1); } }
.vis--app.run .sp-chart .ln { animation: spDraw 1.8s cubic-bezier(.65,0,.35,1) .5s forwards; }
@keyframes spDraw { to { stroke-dashoffset: 0; } }
.vis--app.run .sp-chart .ar { animation: spArea 1s 1.8s forwards; }
@keyframes spArea { to { opacity: .16; } }
.vis--app.run .sp-tip { animation: svIn .5s cubic-bezier(.3,1.5,.5,1) 2.2s forwards; }
.vis--app.run .sp-rows i { animation: spRow .8s cubic-bezier(.2,.8,.2,1) forwards; }
.vis--app.run .sp-rows i:nth-child(1) { animation-delay: .9s; width: 100%; } .vis--app.run .sp-rows i:nth-child(2) { animation-delay: 1.05s; width: 86%; } .vis--app.run .sp-rows i:nth-child(3) { animation-delay: 1.2s; width: 64%; }
@keyframes spRow { to { transform: scaleX(1); } }
.vis--app.run .sp-cur { animation: spCur 10s cubic-bezier(.6,0,.25,1) forwards; }
@keyframes spCur { 0%, 22% { opacity: 0; left: 52%; top: 60%; } 28% { opacity: 1; left: 52%; top: 60%; } 42%, 52% { opacity: 1; left: 86.5%; top: 14.5%; } 64%, 100% { opacity: 1; left: 66%; top: 46%; } }
.vis--app.run .sp-chip { animation: svIn .6s cubic-bezier(.3,1.5,.5,1) 5.6s forwards; }

/* ---------- 2. brand: logo on a construction grid, then applied ---------- */
.sb { width: 100%; height: 100%; display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr auto auto; gap: 3cqw 5cqw; align-items: center; }
.sb-art { position: relative; grid-row: 1; aspect-ratio: 1; border-radius: 2cqw; background: rgba(242,239,234,.025); border: 1px solid rgba(242,239,234,.08); }
.sb-art svg { position: absolute; inset: 8%; width: 84%; height: 84%; overflow: visible; }
.sb-grid * { fill: none; stroke: rgba(169,190,255,.55); stroke-width: .6; stroke-dasharray: 3 3; opacity: 0; }
.sb-m1, .sb-m2 { fill: none; stroke: #F2EFEA; stroke-width: 12; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 180; stroke-dashoffset: 180; }
.sb-m2 { stroke-dasharray: 40; stroke-dashoffset: 40; }
.sb-dot { fill: var(--accent); transform-origin: 60px 26px; transform: scale(0); }
.sb-k { position: absolute; padding: .5cqw 1.2cqw; border-radius: .6cqw; font-size: max(9px, 1.5cqw); color: var(--accent-2); background: rgba(59,107,255,.14); border: 1px solid rgba(59,107,255,.35); opacity: 0; white-space: nowrap; }
.k1 { left: 4%; top: 4%; } .k2 { right: 4%; bottom: 4%; }
.sb-word { grid-row: 2; display: flex; font-family: var(--font-head); font-weight: 600; font-size: max(20px, 6cqw); letter-spacing: -.04em; line-height: 1; overflow: hidden; }
.sb-word span { display: inline-block; transform: translateY(110%); }
.sb-sw { grid-row: 3; display: flex; gap: 1.4cqw; }
.sb-sw i { position: relative; flex: 1; height: 7cqw; border-radius: 1cqw; background: var(--c); border: 1px solid rgba(242,239,234,.14); transform: scaleY(0); transform-origin: bottom; }
.sb-sw em { position: absolute; left: 0; right: 0; bottom: -2.6cqw; text-align: center; font-style: normal; font-size: max(8px, 1.25cqw); color: rgba(242,239,234,.5); opacity: 0; }
.sb-apps { grid-column: 2; grid-row: 1 / span 3; position: relative; height: 100%; }
.sb-apps > div { position: absolute; border-radius: 2cqw; box-shadow: 0 30px 60px -24px rgba(0,0,0,.95); opacity: 0; }
.sb-icon { left: 8%; top: 4%; width: 46%; aspect-ratio: 1; border-radius: 22% !important; background: linear-gradient(150deg, #5B83FF, #2445C8); display: grid; place-items: center; transform: translateY(16px) rotate(-8deg); }
.sb-icon svg { width: 62%; }
.sb-card { left: 0; top: 36%; width: 100%; aspect-ratio: 1.6; padding: 7%; background: #F2EFEA; transform: translateY(16px) rotate(4deg); display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto auto; gap: 5% 6%; }
.sb-card svg { width: 22cqw; max-width: 46px; grid-row: 1; }
.sb-card b { grid-column: 1 / -1; height: 1.5cqw; width: 54%; border-radius: .4cqw; background: #121318; }
.sb-card i { grid-column: 1 / -1; height: 1cqw; width: 70%; border-radius: .4cqw; background: rgba(18,19,24,.3); }
.sb-post { right: 0; bottom: 0; width: 70%; aspect-ratio: 1; padding: 10%; background: radial-gradient(80% 80% at 80% 10%, rgba(124,155,255,.9), transparent 60%), #16181F; border: 1px solid rgba(242,239,234,.12); transform: translateY(16px) rotate(-3deg); display: flex; flex-direction: column; justify-content: space-between; }
.sb-post b { font-family: var(--font-head); font-size: max(12px, 2.6cqw); line-height: 1.05; letter-spacing: -.03em; }
.sb-post i { width: 30%; height: 1.2cqw; border-radius: 99px; background: var(--accent); }
.vis--brand.run .sb-grid * { animation: sbFade .8s forwards; }
.vis--brand.run .sb-grid circle:nth-child(2) { animation-delay: .15s; } .vis--brand.run .sb-grid path { animation-delay: .3s; }
@keyframes sbFade { to { opacity: 1; } }
.vis--brand.run .k1 { animation: svIn .5s .3s forwards; }
.vis--brand.run .sb-m1 { animation: spDraw 1.3s cubic-bezier(.65,0,.35,1) .7s forwards; }
.vis--brand.run .sb-m2 { animation: spDraw .5s cubic-bezier(.65,0,.35,1) 1.9s forwards; }
.vis--brand.run .sb-dot { animation: sbPop .6s cubic-bezier(.3,1.7,.5,1) 2.3s forwards; }
@keyframes sbPop { to { transform: scale(1); } }
.vis--brand.run .k2 { animation: svIn .5s 2.4s forwards; }
.vis--brand.run .sb-grid * { animation: sbFade .8s forwards, sbFadeOut .8s 3.4s forwards; }
@keyframes sbFadeOut { to { opacity: .18; } }
.vis--brand.run .sb-word span { animation: sbUp .7s cubic-bezier(.2,.8,.2,1) forwards; }
.vis--brand.run .sb-word span:nth-child(1) { animation-delay: 2.8s; } .vis--brand.run .sb-word span:nth-child(2) { animation-delay: 2.86s; } .vis--brand.run .sb-word span:nth-child(3) { animation-delay: 2.92s; }
.vis--brand.run .sb-word span:nth-child(4) { animation-delay: 2.98s; } .vis--brand.run .sb-word span:nth-child(5) { animation-delay: 3.04s; } .vis--brand.run .sb-word span:nth-child(6) { animation-delay: 3.1s; } .vis--brand.run .sb-word span:nth-child(7) { animation-delay: 3.16s; }
@keyframes sbUp { to { transform: none; } }
.vis--brand.run .sb-sw i { animation: spBar .6s cubic-bezier(.3,1.4,.5,1) forwards; }
.vis--brand.run .sb-sw i:nth-child(1) { animation-delay: 3.5s; } .vis--brand.run .sb-sw i:nth-child(2) { animation-delay: 3.6s; } .vis--brand.run .sb-sw i:nth-child(3) { animation-delay: 3.7s; } .vis--brand.run .sb-sw i:nth-child(4) { animation-delay: 3.8s; }
.vis--brand.run .sb-sw em { animation: sbFade .5s 4.1s forwards; }
.vis--brand.run .sb-icon { animation: sbApp .8s cubic-bezier(.2,.8,.2,1) 4.6s forwards; --r: -8deg; }
.vis--brand.run .sb-card { animation: sbApp .8s cubic-bezier(.2,.8,.2,1) 5.1s forwards; --r: 4deg; }
.vis--brand.run .sb-post { animation: sbApp .8s cubic-bezier(.2,.8,.2,1) 5.6s forwards; --r: -3deg; }
@keyframes sbApp { to { opacity: 1; transform: translateY(0) rotate(var(--r)); } }

/* ---------- 3. landing pages & CRO: A/B test ---------- */
.sc { position: relative; width: 100%; display: grid; gap: 0; justify-items: center; }
.sc-src { display: inline-flex; align-items: center; gap: 1.4cqw; padding: 1.3cqw 2.2cqw; border-radius: 99px; font-size: max(11px, 2cqw); background: rgba(22,23,28,.9); border: 1px solid rgba(242,239,234,.14); }
.sc-src .dot { width: 1.3cqw; height: 1.3cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #3DDC84; animation: svPing 1.8s infinite; }
.sc-src span { font-variant-numeric: tabular-nums; font-weight: 600; }
.sc-flow { position: relative; width: 52%; height: 11cqw; }
.sc-flow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(rgba(169,190,255,.5), transparent); }
.sc-flow i { position: absolute; left: 50%; top: 0; width: 1.4cqw; height: 1.4cqw; min-width: 7px; min-height: 7px; margin-left: -.7cqw; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 1.4cqw rgba(124,155,255,.9); opacity: 0; }
.vis--cro.run .sc-flow i { animation: scDrop 1.2s cubic-bezier(.5,0,.5,1) var(--t) 2 forwards; }
@keyframes scDrop { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 24cqw), 11cqw); } }
.sc-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.sc-card { position: relative; padding: 2.6cqw; border-radius: 1.8cqw; background: rgba(242,239,234,.03); border: 1px solid rgba(242,239,234,.1); display: grid; gap: 2cqw; transition: border-color .6s, box-shadow .6s, background .6s; }
.sc-tag { font-size: max(10px, 1.8cqw); color: rgba(242,239,234,.55); }
.sc-pg { aspect-ratio: 4 / 3; padding: 9%; border-radius: 1.2cqw; background: #0E0F13; border: 1px solid rgba(242,239,234,.07); display: grid; align-content: start; gap: 1.1cqw; }
.sc-pg b { height: 2cqw; width: 80%; border-radius: .5cqw; background: rgba(242,239,234,.75); }
.sc-pg i { height: 1cqw; border-radius: .4cqw; background: rgba(242,239,234,.2); }
.sc-pg u { width: 42%; height: 2.8cqw; margin-top: .8cqw; border-radius: .6cqw; background: rgba(242,239,234,.25); }
.sc-b .sc-pg u { background: var(--accent); width: 58%; }
.sc-pg s { height: 9cqw; border-radius: .8cqw; background: linear-gradient(140deg, #1B2B6B, #3B6BFF); }
.sc-num { display: flex; align-items: baseline; gap: 1.2cqw; }
.sc-num b { font-family: var(--font-head); font-size: max(18px, 4.6cqw); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sc-num small { font-size: max(9px, 1.5cqw); color: rgba(242,239,234,.5); }
.sc-bar { height: 1cqw; min-height: 5px; border-radius: 99px; background: rgba(242,239,234,.08); overflow: hidden; }
.sc-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: rgba(242,239,234,.45); transition: width 2.6s cubic-bezier(.2,.8,.2,1) .4s; }
.sc-b .sc-bar i { background: linear-gradient(90deg, var(--accent), #7C9BFF); }
.vis--cro.run .sc-bar i { width: var(--w); }
.sc-win { position: absolute; top: -1.6cqw; right: 2cqw; padding: .7cqw 1.6cqw; border-radius: .8cqw; font-size: max(10px, 1.8cqw); font-weight: 600; background: var(--accent); color: #fff; box-shadow: 0 1cqw 3cqw -1cqw rgba(59,107,255,.9); opacity: 0; transform: scale(.4) rotate(-8deg); }
.vis--cro.run .sc-win { animation: scWin .6s cubic-bezier(.3,1.7,.5,1) 4.2s forwards; }
@keyframes scWin { to { opacity: 1; transform: none; } }
.vis--cro.run .sc-b { animation: scGlow .8s 4.2s forwards; }
@keyframes scGlow { to { border-color: rgba(59,107,255,.65); background: rgba(59,107,255,.07); box-shadow: 0 0 0 1px rgba(59,107,255,.3), 0 3cqw 8cqw -3cqw rgba(59,107,255,.7); } }
.vis--cro.run .sc-a { animation: scDim .8s 4.2s forwards; }
@keyframes scDim { to { opacity: .55; } }
.sc-up { left: 50%; bottom: -8cqw; margin-left: -18cqw; }
.vis--cro.run .sc-up { animation: svIn .6s cubic-bezier(.3,1.5,.5,1) 4.9s forwards; }
.sc-arrow { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; min-width: 16px; min-height: 16px; border-radius: 50%; background: #3DDC84; color: #0B0C0F; font-weight: 700; }

/* ---------- 4. migration ---------- */
.sm { width: 100%; display: grid; gap: 3.2cqw; }
.sm-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2cqw; }
.sm-node { display: grid; gap: .3cqw; padding: 2cqw 2.6cqw; border-radius: 1.6cqw; font-weight: 600; font-size: max(12px, 2.4cqw); background: #121318; border: 1px solid rgba(242,239,234,.14); }
.sm-node small { font-weight: 400; font-size: max(9px, 1.5cqw); color: rgba(242,239,234,.5); }
.sm-node--to { border-color: rgba(59,107,255,.6); background: rgba(59,107,255,.14); color: #fff; box-shadow: 0 0 0 0 rgba(59,107,255,.5); }
.vis--mig.run .sm-node--to { animation: smPulse 1.2s 1s 4; }
@keyframes smPulse { 50% { box-shadow: 0 0 0 1.6cqw rgba(59,107,255,0), 0 0 6cqw -1cqw rgba(59,107,255,.7); } }
.sm-lane { position: relative; height: 5cqw; }
.sm-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(59,107,255,.55); animation: smDash 1s linear infinite; }
@keyframes smDash { to { background-position: 20px 0; } }
.sm-lane span { position: absolute; left: 0; top: 50%; padding: .5cqw 1.2cqw; border-radius: .7cqw; font-size: max(9px, 1.5cqw); font-weight: 500; color: #fff; background: #1B1D25; border: 1px solid rgba(169,190,255,.45); white-space: nowrap; transform: translate(-30%, -50%); opacity: 0; }
.vis--mig.run .sm-lane span { animation: smGo 1.5s cubic-bezier(.6,0,.4,1) var(--t) 2; }
@keyframes smGo { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; transform: translate(-70%, -50%); } }
.sm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.sm-stats div { padding: 2cqw; border-radius: 1.4cqw; background: rgba(242,239,234,.03); border: 1px solid rgba(242,239,234,.09); display: grid; gap: .4cqw; }
.sm-stats b { font-family: var(--font-head); font-size: max(18px, 4.4cqw); font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.sm-stats div:last-child b { color: #3DDC84; }
.sm-stats small { font-size: max(9px, 1.5cqw); color: rgba(242,239,234,.5); }
.sm-prog { height: 1cqw; min-height: 5px; border-radius: 99px; background: rgba(242,239,234,.08); overflow: hidden; }
.sm-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #7C9BFF, #3DDC84); }
.vis--mig.run .sm-prog i { animation: smProg 4.4s cubic-bezier(.4,0,.2,1) .3s forwards; }
@keyframes smProg { to { width: 100%; } }
.sm-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw; }
.sm-list li { display: flex; align-items: center; gap: 1.4cqw; padding: 1.6cqw 1.8cqw; border-radius: 1.2cqw; background: rgba(242,239,234,.03); border: 1px solid rgba(242,239,234,.09); color: #D2CFCA; font-size: max(10px, 1.75cqw); opacity: .35; transition: opacity .4s, border-color .4s, background .4s; }
.sm-list li::before { content: ""; flex: none; width: 2.6cqw; height: 2.6cqw; min-width: 14px; min-height: 14px; border-radius: 50%; border: 1px dashed rgba(242,239,234,.3); transition: all .4s cubic-bezier(.3,1.6,.5,1); }
.sm-list li.is-ok { opacity: 1; border-color: rgba(61,220,132,.3); background: rgba(61,220,132,.05); }
.sm-list li.is-ok::before { border: 0; background: #3DDC84 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='%230B0C0F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat; }

@media (prefers-reduced-motion: reduce) {
  .svc__stage .vis * { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}
@container (max-width: 440px) { .sp-kpis em { display: none; } .sb-k { display: none; } }