/* Velar Bureau — service pages, Apple-style showcase: each part of the service gets a full screen. The screen pins,
   and as you scroll the example inside the browser window plays step by step (js/show.js sets is-k1…is-k3),
   the caption on the left follows the step, and the price lands at the end. */
.sh-in { padding-block: var(--sec) clamp(24px, min(3vw, 43.2px), 48px); text-align: center; }
.sh-in .label { justify-content: center; }
.sh-in__h { margin: 18px auto 0; max-width: 16ch; font-weight: 500; font-size: clamp(2.6rem, min(6vw, 86.4px), 6rem); line-height: .96; letter-spacing: -.05em; }
.sh-in__h .mute { color: #9CA2AD; }
.sh-in__p { margin: 22px auto 0; max-width: 46ch; color: #646A76; font-size: 1.1rem; line-height: 1.5; }
.sh { position: relative; height: 320vh; padding: 0 !important; }
.sh__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: center; gap: clamp(28px, min(4vw, 57.6px), 64px);
  padding: calc(var(--top-h, 76px) + 16px) var(--gx) 32px; max-width: 1440px; margin: 0 auto; box-sizing: border-box; }
.sh__txt { position: relative; display: flex; flex-direction: column; gap: 22px; }
.sh__k { display: flex; align-items: baseline; gap: 10px; margin: 0; font-family: var(--fd); font-stretch: 125%; font-weight: 600; font-size: .8rem; }
.sh__k b { color: var(--signal); } .sh__k span { color: #9CA2AD; }
.sh__k em { font-style: normal; margin-left: 8px; padding: 4px 9px; background: rgba(14, 15, 17, .06); font-stretch: 112%; font-size: .72rem; letter-spacing: .02em; }
.sh__h { margin: 0; font-weight: 500; font-size: clamp(2.4rem, min(4.4vw, 63.36px), 4.4rem); line-height: .98; letter-spacing: -.05em; }
.sh__h .mute { color: #9CA2AD; }
.sh__steps { position: relative; list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.sh__steps li { padding: 10px 0 10px 22px; border-left: 2px solid rgba(14, 15, 17, .12); color: #9CA2AD; font-size: 1.12rem; line-height: 1.35; transition: color .4s, border-color .4s; }
.sh__steps li.is-on { color: #0E0F11; border-left-color: var(--signal); }
.sh__price { display: flex; align-items: baseline; gap: 14px; margin: 8px 0 0; opacity: .25; transform: translateY(10px); transition: opacity .6s, transform .6s var(--ease); }
.sh__price small { font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: #8C929C; }
.sh__price b { font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: clamp(2rem, min(3vw, 43.2px), 3rem); letter-spacing: -.03em; color: var(--signal); }
.sh.is-k3 .sh__price { opacity: 1; transform: none; }
.sh__prog { position: relative; display: block; height: 2px; margin-top: 10px; background: rgba(14, 15, 17, .1); }
.sh__prog i { position: absolute; inset: 0; background: #0E0F11; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

/* the window grows into place as the scene arrives */
.sh__win { position: relative; background: #F7F8FA; border: 1px solid rgba(14, 15, 17, .12); box-shadow: 0 60px 120px -50px rgba(14, 15, 17, .4); overflow: hidden;
  transform: perspective(1800px) rotateX(calc(var(--in, 1) * 14deg)) scale(calc(1 - var(--in, 1) * .08)); transform-origin: 50% 100%; opacity: calc(1 - var(--in, 1) * .7); }
.sh__scr { position: relative; aspect-ratio: 16 / 10.4; overflow: hidden; container-type: inline-size; }
.sh__s { position: absolute; inset: 0; padding: 4.5cqw 5cqw; font-size: 1.6cqw; color: #0E0F11; }
.sh__s small { font-family: var(--fd); font-stretch: 112%; font-weight: 600; font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: #8C929C; }
.sh .m-cur { opacity: 1; transform: translate(var(--cx, 50cqw), var(--cy, 60cqw)); transition: transform .9s var(--ease), opacity .4s; }
.sh .m-cur.is-click { animation: shClick .35s; }
@keyframes shClick { 50% { scale: .8; } }
.sh .m-toast { transition: opacity .5s, transform .5s var(--ease); }

/* 01 landing */
.sh .m-in { position: relative; transition: border-color .4s, box-shadow .4s; }
.sh .m-in s { text-decoration: none; transition: opacity .3s; }
.sh .m-in .m-ty { position: absolute; left: 1.4cqw; top: 50%; transform: translateY(-50%); font-style: normal; color: #0E0F11; clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(16); }
.sh .m-form { transition: box-shadow .5s; }
.sh[data-scene="land"].is-k1 .m-form { box-shadow: 0 0 0 3px var(--signal); }
.sh[data-scene="land"].is-k2 .m-in { border-color: #0E0F11; }
.sh[data-scene="land"].is-k2 .m-in s { opacity: 0; }
.sh[data-scene="land"].is-k2 .m-ty { clip-path: inset(0 0 0 0); }
.sh[data-scene="land"] .m-send { transition: background .3s; }
.sh[data-scene="land"].is-k3 .m-send { background: var(--signal); }
.sh[data-scene="land"].is-k3 .m-toast, .sh[data-scene="cat"].is-k3 .m-toast { opacity: 1; transform: none; }

/* 02 floor */
.sh .m-fl { transition: background .4s; }
.sh .m-fl i { transition: background .4s; }
.sh[data-scene="floor"].is-k1 .m-fl--on { background: var(--signal); }
.sh[data-scene="floor"].is-k1 .m-fl--on i { background: #F9C9BC; }
.sh .m-u { transition: opacity .5s, transform .5s var(--ease), box-shadow .4s; }
.sh[data-scene="floor"].is-k2 .m-u { opacity: 1; transform: none; }
.sh[data-scene="floor"].is-k2 .m-u:nth-of-type(2) { transition-delay: .06s; } .sh[data-scene="floor"].is-k2 .m-u:nth-of-type(3) { transition-delay: .12s; } .sh[data-scene="floor"].is-k2 .m-u:nth-of-type(4) { transition-delay: .18s; }
.sh[data-scene="floor"].is-k3 .m-u:nth-of-type(2) { box-shadow: inset 0 0 0 2px var(--signal); }
.sh .m-plan { transition: opacity .5s, transform .5s var(--ease); }
.sh[data-scene="floor"].is-k3 .m-plan { opacity: 1; transform: none; }
.sh[data-scene="floor"].is-k3 .m-plan i:nth-child(2) { background: rgba(226, 73, 43, .35); }

/* 03 catalogue */
.sh[data-scene="cat"] .m-card { opacity: 1; transform: none; transition: opacity .4s, transform .5s var(--ease); }
.sh[data-scene="cat"].is-k1 .m-card:not(.m-card--hit) { opacity: .35; }
.sh[data-scene="cat"].is-k1 .m-chips span { background: none; color: inherit; border-color: rgba(14, 15, 17, .16); }
.sh[data-scene="cat"].is-k1 .m-chips span:nth-child(3) { background: #0E0F11; color: #fff; border-color: #0E0F11; }
.sh[data-scene="cat"] .m-rq { transition: background .3s, color .3s; }
.sh[data-scene="cat"].is-k2 .m-card--hit .m-rq { background: var(--signal); color: #fff; border-color: var(--signal); }
.sh[data-scene="cat"].is-k2 .m-card--hit { transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(14, 15, 17, .35); }

/* 04 languages */
.sh[data-scene="lang"] .m-lt span, .sh[data-scene="lang"] .m-lh span { opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s var(--ease); }
.sh[data-scene="lang"][data-k="0"] .m-lt span:nth-child(1), .sh[data-scene="lang"][data-k="0"] .m-lh span:nth-child(1),
.sh[data-scene="lang"][data-k="1"] .m-lt span:nth-child(2), .sh[data-scene="lang"][data-k="1"] .m-lh span:nth-child(2),
.sh[data-scene="lang"][data-k="2"] .m-lt span:nth-child(3), .sh[data-scene="lang"][data-k="2"] .m-lh span:nth-child(3),
.sh[data-scene="lang"][data-k="3"] .m-lt span:nth-child(4), .sh[data-scene="lang"][data-k="3"] .m-lh span:nth-child(4) { opacity: 1; transform: none; }
.sh[data-scene="lang"] .m-langs i { transition: background .3s, color .3s; }
.sh[data-scene="lang"] .m-langs .is-on { background: transparent; color: inherit; }
.sh[data-scene="lang"][data-k="0"] .m-langs i:nth-child(1), .sh[data-scene="lang"][data-k="1"] .m-langs i:nth-child(2),
.sh[data-scene="lang"][data-k="2"] .m-langs i:nth-child(3), .sh[data-scene="lang"][data-k="3"] .m-langs i:nth-child(4) { background: #0E0F11; color: #fff; border-color: #0E0F11; }

/* phones and tablets: the window on top, the caption under it */
@media (max-width: 900px) {
  .sh { height: 260vh; }
  .sh__pin { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 18px; padding: calc(var(--top-h, 64px) + 10px) var(--gx) 90px; }
  .sh__win { order: -1; }
  .sh__s { font-size: 2.2cqw; padding: 4cqw; }
  .sh__h { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .sh__steps { gap: 0; } .sh__steps li { display: none; padding: 6px 0 6px 14px; font-size: 1rem; } .sh__steps li.is-on { display: block; }
  .sh__txt { gap: 12px; } .sh__price b { font-size: 1.8rem; }
}
@media (prefers-reduced-motion: reduce) { .sh { height: auto; } .sh__pin { position: relative; height: auto; padding-block: 48px; } .sh__win { transform: none; opacity: 1; } }
.sh__s--floor { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4cqw; align-items: end; }

/* generic step states for the other service pages: aN appears at step N, hN lights up at step N, h1x fades at step 1 */
.sh .a1, .sh .a2, .sh .a3 { opacity: 0; transform: translateY(14px); transition: opacity .55s, transform .6s var(--ease), box-shadow .4s, background .4s, color .4s; }
.sh.is-k1 .a1, .sh.is-k2 .a2, .sh.is-k3 .a3 { opacity: 1; transform: none; }
.sh .hi1, .sh .hi2, .sh .hi3 { transition: box-shadow .4s, background .4s, color .4s, transform .5s var(--ease); }
.sh.is-k1 .hi1, .sh.is-k2 .hi2, .sh.is-k3 .hi3 { box-shadow: 0 0 0 2px var(--signal); }
.sh .h1x { transition: opacity .4s, text-decoration-color .4s; text-decoration: line-through transparent 2px; }
.sh.is-k1 .h1x { opacity: .35; text-decoration-color: #0E0F11; }
.sh.is-k3 .m-toast { opacity: 1; transform: none; }

/* brand · name & logo */
.sh__s--bname { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4cqw; align-items: center; }
.b-names { display: flex; flex-direction: column; gap: 1.6cqw; font-weight: 500; font-size: 2.1em; letter-spacing: -.03em; }
.b-names small { font-size: .38em; }
.b-pick { align-self: flex-start; padding: 0 .3em; }
.sh.is-k1 .b-pick { background: #0E0F11; color: #fff; box-shadow: none; }
.b-logo { position: relative; height: 34cqw; display: grid; place-items: center; background: #1F3B34; color: #EDE6D9; }
.b-mark { display: flex; align-items: center; gap: 2cqw; }
.b-mark i { width: 7cqw; height: 7cqw; background: #C9A46A; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.b-mark b { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: 2.6em; line-height: .95; letter-spacing: .04em; }
.b-tiles { position: absolute; left: 2cqw; right: 2cqw; bottom: 2cqw; display: grid; grid-template-columns: 1fr 1fr .5fr; gap: 1.4cqw; }
.b-tiles span { display: flex; align-items: center; gap: .8cqw; height: 6cqw; padding: 0 1.4cqw; font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: .75em; letter-spacing: .06em; }
.b-tiles i { width: 2cqw; height: 2cqw; background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.b-t1 { background: #EDE6D9; color: #1F3B34; } .b-t2 { background: #0E0F11; color: #C9A46A; } .b-t3 { background: #C9A46A; color: #1F3B34; justify-content: center; }
/* brand · brandbook */
.sh__s--bbook { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2cqw; }
.bb-p { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.4cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .08); }
.bb-col div { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqw; flex: 1; } .bb-col i { display: block; }
.bb-type b { font-family: Georgia, serif; font-weight: 400; font-size: 5em; line-height: 1; color: #1F3B34; } .bb-type span { color: #646A76; }
.bb-zone { position: relative; display: grid; place-items: center; flex: 1; border: 1px dashed rgba(226, 73, 43, .7); }
.bb-zone b { font-family: var(--fd); font-stretch: 125%; font-weight: 700; font-size: 1.4em; color: #1F3B34; letter-spacing: .04em; }
.bb-rule span { color: #646A76; font-size: .85em; }
.bb-tpl div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1cqw; flex: 1; } .bb-tpl i { display: block; background: #1F3B34; } .bb-tpl i:nth-child(2) { background: #EDE6D9; } .bb-tpl i:nth-child(3) { background: #C9A46A; }
/* brand · fence & billboard */
.sh__s--bfence { padding: 0; background: linear-gradient(#DCE3EA 0 62%, #C8CBC4 62%); }
.f-bill { position: absolute; left: 52%; top: 8%; width: 42%; }
.f-board { display: flex; flex-direction: column; gap: .8cqw; padding: 2.6cqw; background: #1F3B34; color: #EDE6D9; box-shadow: 0 1.4cqw 3cqw -1cqw rgba(0, 0, 0, .3); }
.f-board b { font-family: var(--fd); font-stretch: 125%; font-size: 1.8em; letter-spacing: .05em; } .f-board em { align-self: flex-start; font-style: normal; padding: .6cqw 1.4cqw; background: #C9A46A; color: #1F3B34; font-size: .8em; }
.f-pole { display: block; width: 1.2cqw; height: 12cqw; margin: 0 auto; background: #6E7A8A; }
.f-fence { position: absolute; left: 0; right: 0; bottom: 18%; height: 22cqw; background: repeating-linear-gradient(90deg, #8C929C 0 .4cqw, #B9C2CE .4cqw 9cqw); }
.f-print { position: absolute; inset: 1.4cqw 3cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 4cqw; background: #1F3B34; color: #EDE6D9; }
.f-print b { font-family: var(--fd); font-stretch: 125%; font-size: 2.6em; letter-spacing: .05em; } .f-print span { font-size: 1.1em; } .f-print em { width: 8cqw; height: 8cqw; background: #C9A46A; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.f-bro { position: absolute; left: 6%; top: 8%; width: 18cqw; height: 24cqw; display: flex; flex-direction: column; justify-content: space-between; padding: 2cqw; background: #EDE6D9; color: #1F3B34; transform: rotate(-6deg); box-shadow: 0 2cqw 4cqw -1cqw rgba(0, 0, 0, .35); }
.sh.is-k3 .f-bro { transform: rotate(-6deg); }
.f-bro b { font-family: var(--fd); font-stretch: 125%; font-size: 1.6em; line-height: 1; } .f-bro span { font-size: .8em; }
/* brand · trade fair */
.sh__s--bfair { padding: 0; background: #E8ECF1; }
.fa-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: #C9D0DA; }
.fa-wall { position: absolute; left: 12%; right: 12%; top: 10%; height: 52%; display: flex; flex-direction: column; justify-content: center; gap: 1cqw; padding-left: 5cqw; background: #1F3B34; color: #EDE6D9; }
.fa-wall b { font-family: var(--fd); font-stretch: 125%; font-size: 3em; letter-spacing: .05em; }
.fa-desk { position: absolute; left: 22%; width: 30%; bottom: 14%; height: 22%; display: grid; place-items: center; background: #EDE6D9; color: #1F3B34; font-family: var(--fd); font-stretch: 125%; font-size: 1.1em; }
.fa-scr { position: absolute; right: 18%; top: 22%; width: 20%; height: 26%; background: #0E0F11; padding: 1cqw; } .fa-scr i { display: block; height: 100%; background: linear-gradient(160deg, #B9C2CE, #6E7A8A); }
.fa-cat { position: absolute; right: 16%; bottom: 10%; width: 16%; display: flex; flex-direction: column; gap: .6cqw; padding: 1.4cqw; background: #fff; transform: rotate(4deg); box-shadow: 0 1cqw 2cqw -1cqw rgba(0, 0, 0, .3); }
.fa-cat b { font-size: .9em; } .fa-cat i { height: .7cqw; background: #D3D8DF; }

/* ads · google */
.g-bar { display: flex; align-items: center; gap: 2cqw; margin-bottom: 3cqw; padding: 1.6cqw 2.4cqw; border: 1px solid rgba(14, 15, 17, .14); border-radius: 99px; background: #fff; }
.g-q { position: relative; overflow: hidden; white-space: nowrap; clip-path: inset(0 100% 0 0); transition: clip-path 1s steps(20); font-size: 1.2em; }
.sh.is-k1 .g-q { clip-path: inset(0 0 0 0); }
.g-res { display: flex; flex-direction: column; gap: .6cqw; padding: 1.8cqw 2cqw; margin-bottom: 1cqw; }
.g-res b { font-weight: 500; font-size: 1.35em; color: #1A3DB8; } .g-res span { color: #646A76; }
.g-ad { background: #fff; } .g-gr { display: block; width: 60%; height: 1.6cqw; background: #D3D8DF; } .g-gr2 { display: block; width: 80%; height: 1cqw; background: #E3E7ED; }
/* ads · meta */
.sh__s--ameta { display: grid; grid-template-columns: 1.4fr 1fr; gap: 4cqw; }
.mt-map { position: relative; background: radial-gradient(circle, #B9C2CE 0 .35cqw, transparent .4cqw) 0 0 / 1.6cqw 1.6cqw; -webkit-mask: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 72%); mask: radial-gradient(ellipse at 50% 50%, #000 55%, transparent 72%); }
.mt-c { position: absolute; padding: .5cqw 1.2cqw; background: var(--signal); color: #fff; font-family: var(--fd); font-stretch: 112%; font-weight: 700; font-size: .9em; }
.mt-bg { background: #0E0F11; }
.mt-phone { display: flex; flex-direction: column; gap: 1.4cqw; padding: 2cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .1); border-radius: 2cqw; }
.mt-head { display: flex; align-items: center; gap: 1cqw; } .mt-head i { width: 3cqw; height: 3cqw; border-radius: 50%; background: #1F3B34; } .mt-head small { margin-left: auto; }
.mt-img { flex: 1; background: linear-gradient(160deg, #B9C2CE, #6E7A8A); }
.mt-cta { padding: 1.2cqw; text-align: center; background: #EEF1F4; font-weight: 500; }
.sh.is-k3 .mt-cta { background: var(--signal); color: #fff; }
/* ads · dashboard */
.sh__s--adash { display: flex; flex-direction: column; gap: 2cqw; }
.d-row { display: grid; grid-template-columns: 14cqw 1fr; align-items: center; gap: 2cqw; font-size: 1.2em; }
.d-bar { height: 3.4cqw; width: var(--w); background: #B9C2CE; transform-origin: 0 50%; }
.sh .d-bar.a1 { transform: scaleX(0); } .sh.is-k1 .d-bar.a1 { transform: scaleX(1); }
.sh.is-k2 .d-row:first-of-type .d-bar { background: var(--signal); }
.d-best { display: flex; gap: 1.4cqw; align-items: baseline; margin-top: 1cqw; } .d-best b { font-size: 1.8em; color: var(--signal); } .d-best span { color: #646A76; }
.d-move { display: flex; align-items: center; gap: 1.2cqw; align-self: flex-start; padding: 1.4cqw 2cqw; background: #0E0F11; color: #fff; } .d-move i { width: 1.4cqw; height: 1.4cqw; background: var(--signal); }
/* ads · landing */
.sh__s--aland { display: grid; grid-template-columns: 1fr 6cqw 1.5fr; align-items: center; gap: 2cqw; }
.al-ad { display: flex; flex-direction: column; gap: 1cqw; padding: 2.4cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .1); } .al-ad b { font-weight: 500; font-size: 1.4em; line-height: 1.15; }
.al-arr { display: block; height: 2px; background: var(--signal); position: relative; } .al-arr::after { content: ""; position: absolute; right: -2px; top: -5px; border: 6px solid transparent; border-left-color: var(--signal); }
.al-page { display: flex; flex-direction: column; gap: 1.4cqw; padding: 3cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .1); min-height: 32cqw; } .al-page b { font-weight: 500; font-size: 2em; line-height: 1.05; letter-spacing: -.03em; } .al-page span { color: #646A76; }
.sh.is-k2 .al-page b { color: var(--signal); }
.al-form { display: flex; gap: 1cqw; margin-top: auto; } .al-form i { flex: 1; height: 4cqw; border: 1px solid rgba(14, 15, 17, .2); } .al-form em { font-style: normal; display: grid; place-items: center; padding: 0 2cqw; background: var(--signal); color: #fff; }

/* crm · all leads in */
.sh__s--cin { display: grid; grid-template-columns: 1fr .6fr 1.6fr; align-items: center; gap: 1cqw; }
.ci-src { display: flex; flex-direction: column; gap: 2cqw; } .ci-src span { padding: 1.4cqw 2cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .1); font-weight: 500; }
.ci-src span:nth-child(2) { transition-delay: .08s; } .ci-src span:nth-child(3) { transition-delay: .16s; } .ci-src span:nth-child(4) { transition-delay: .24s; }
.ci-lines { position: relative; height: 30cqw; } .ci-lines i { position: absolute; left: 0; right: 0; height: 2px; background: var(--signal); transform-origin: 0 50%; }
.ci-lines i:nth-child(1) { top: 12%; transform: rotate(14deg); } .ci-lines i:nth-child(2) { top: 38%; transform: rotate(5deg); } .ci-lines i:nth-child(3) { top: 62%; transform: rotate(-5deg); } .ci-lines i:nth-child(4) { top: 88%; transform: rotate(-14deg); }
.ci-box { display: flex; flex-direction: column; gap: 1.2cqw; padding: 2.4cqw; background: #0E0F11; color: #fff; } .ci-box small { color: #9CA2AD; }
.ci-card { display: flex; justify-content: space-between; padding: 1.4cqw 1.8cqw; background: #1C1F23; } .ci-card span { color: #9CA2AD; }
/* crm · kanban */
.sh__s--ckan { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.k-col { display: flex; flex-direction: column; gap: 1.2cqw; padding: 1.6cqw; background: #EEF1F4; } .k-col i { height: 7cqw; background: #fff; border: 1px solid rgba(14, 15, 17, .06); }
.k-card { position: absolute; left: 5cqw; top: 13cqw; width: calc((100% - 10cqw - 4.8cqw) / 4 - 3.2cqw); margin-left: 1.6cqw; display: flex; flex-direction: column; gap: .6cqw; padding: 1.4cqw; background: #fff; box-shadow: 0 0 0 2px var(--signal), 0 2cqw 4cqw -2cqw rgba(14, 15, 17, .4);
  transition: transform .8s var(--ease); } .k-card span { color: #646A76; font-size: .9em; }
.sh[data-k="1"] .k-card { transform: translateX(calc(100% + 4.8cqw)); } .sh[data-k="2"] .k-card { transform: translateX(calc(200% + 9.6cqw)); } .sh[data-k="3"] .k-card { transform: translateX(calc(300% + 14.4cqw)); background: var(--signal); color: #fff; }
.sh[data-k="3"] .k-card span { color: #fff; }
/* crm · call tracking */
.sh__s--ccall { display: flex; flex-direction: column; justify-content: center; gap: 3cqw; }
.cl-ring { display: flex; align-items: center; gap: 2cqw; padding: 2.4cqw; background: #0E0F11; color: #fff; } .cl-ring i { width: 5cqw; height: 5cqw; border-radius: 50%; background: var(--signal); animation: clPulse 1.2s infinite; } .cl-ring b { font-size: 1.4em; font-weight: 500; } .cl-ring span { margin-left: auto; color: #9CA2AD; }
@keyframes clPulse { 50% { box-shadow: 0 0 0 1.4cqw rgba(226, 73, 43, .25); } }
.cl-wave { display: flex; align-items: center; gap: 1cqw; height: 8cqw; } .cl-wave i { flex: 1; background: #B9C2CE; height: 30%; } .cl-wave i:nth-child(3n) { height: 80%; } .cl-wave i:nth-child(4n+1) { height: 55%; } .cl-wave i:nth-child(5n+2) { height: 100%; }
.cl-rec { display: flex; flex-direction: column; gap: .8cqw; padding: 2.4cqw; background: #fff; box-shadow: inset 4px 0 0 var(--signal); } .cl-rec b { font-size: 1.3em; font-weight: 500; } .cl-rec span { color: #646A76; }
/* crm · dashboard */
.sh__s--cdash { display: flex; flex-direction: column; gap: 1.8cqw; justify-content: center; }
.cf-bar { width: var(--w); height: 6cqw; display: flex; align-items: center; padding-left: 2cqw; background: #B9C2CE; font-weight: 500; }
.sh .cf-bar.a1, .sh .cf-bar.a2, .sh .cf-bar.a3 { transform-origin: 0 50%; transform: scaleX(.02); opacity: 1; } .sh.is-k1 .cf-bar.a1, .sh.is-k2 .cf-bar.a2, .sh.is-k3 .cf-bar.a3 { transform: none; }
.cf-win { background: var(--signal); color: #fff; }

/* content · reels */
.sh__s--treel { display: grid; place-items: center; }
.r-phone { position: relative; width: 26cqw; height: 46cqw; padding: 1cqw; background: #0E0F11; border-radius: 3cqw; overflow: hidden; }
.r-vid { position: absolute; inset: 1cqw; border-radius: 2.2cqw; overflow: hidden; background: linear-gradient(#F6B48F, #8D6E9C); }
.r-sun { position: absolute; left: 30%; top: 22%; width: 9cqw; height: 9cqw; border-radius: 50%; background: #FFE2C4; transition: transform 2s var(--ease); }
.r-bld { position: absolute; left: 10%; right: 10%; bottom: 0; height: 52%; background: repeating-linear-gradient(#2A3340 0 2.4cqw, #3A4656 2.4cqw 3cqw); }
.sh.is-k1 .r-sun { transform: translateY(6cqw); }
.r-prog { position: absolute; left: 2.4cqw; right: 2.4cqw; top: 2.4cqw; height: .5cqw; background: rgba(255, 255, 255, .3); } .r-prog i { display: block; height: 100%; width: 0; background: #fff; transition: width 2s linear; } .sh.is-k1 .r-prog i { width: 70%; }
.r-cap { position: absolute; left: 2.4cqw; right: 2.4cqw; bottom: 8cqw; padding: .8cqw 1.2cqw; background: rgba(0, 0, 0, .55); color: #fff; font-size: .9em; text-align: center; }
.r-side { position: absolute; right: 2cqw; bottom: 14cqw; display: flex; flex-direction: column; gap: 1.4cqw; } .r-side i { width: 3cqw; height: 3cqw; border-radius: 50%; background: #fff; } .r-side i:first-child { background: var(--signal); }
/* content · plan */
.sh__s--tplan { display: flex; flex-direction: column; gap: 2cqw; }
.pl-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1cqw; flex: 1; } .pl-cal i { background: #fff; border: 1px solid rgba(14, 15, 17, .06); transition: background .4s; }
.sh.is-k1 .pl-cal i:nth-child(3), .sh.is-k1 .pl-cal i:nth-child(12), .sh.is-k1 .pl-cal i:nth-child(19), .sh.is-k1 .pl-cal i:nth-child(26) { background: var(--signal); }
.sh.is-k2 .pl-cal i:nth-child(6), .sh.is-k2 .pl-cal i:nth-child(10), .sh.is-k2 .pl-cal i:nth-child(16), .sh.is-k2 .pl-cal i:nth-child(23) { background: #0E0F11; }
.sh.is-k2 .pl-cal i:nth-child(1), .sh.is-k2 .pl-cal i:nth-child(8), .sh.is-k2 .pl-cal i:nth-child(14), .sh.is-k2 .pl-cal i:nth-child(21), .sh.is-k2 .pl-cal i:nth-child(28) { background: #B9C2CE; }
.pl-ok { position: absolute; right: 5cqw; top: 4cqw; padding: 1cqw 2cqw; background: #1E8A4C; color: #fff; font-weight: 500; }
/* content · 3D */
.sh__s--ttour { padding: 0; perspective: 120cqw; }
.tr-room { position: absolute; inset: 5cqw 8cqw; background: linear-gradient(#EDE6D9 0 64%, #C9B79A 64%); transform: rotateY(-8deg); transition: transform 1.2s var(--ease); box-shadow: 0 3cqw 6cqw -3cqw rgba(0, 0, 0, .4); }
.sh.is-k1 .tr-room { transform: rotateY(8deg); }
.tr-win { position: absolute; left: 50%; top: 10%; width: 36%; height: 44%; background: linear-gradient(#B9D3EA, #E8F0F6); border: 1cqw solid #fff; }
.tr-sofa { position: absolute; left: 10%; bottom: 20%; width: 34%; height: 16%; background: #1F3B34; } .tr-lamp { position: absolute; left: 14%; top: 18%; width: 6%; height: 40%; border-top: 3cqw solid #C9A46A; border-left: 3px solid transparent; }
.tr-pt { position: absolute; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1cqw rgba(226, 73, 43, .45); }
.tr-360 { position: absolute; right: 5cqw; top: 3cqw; padding: 1cqw 2cqw; background: #0E0F11; color: #fff; font-family: var(--fd); font-stretch: 125%; font-size: 1.2em; }
/* content · stories */
.sh__s--tstory { display: flex; align-items: center; justify-content: center; gap: 3cqw; }
.st-c { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .6cqw; width: 20cqw; height: 36cqw; padding: 2cqw; border-radius: 2cqw; color: #fff; overflow: hidden; }
.st-c small { color: rgba(255, 255, 255, .8); } .st-c b { font-size: 1.6em; font-weight: 500; }
.st-1 { background: linear-gradient(160deg, #8C929C, #3A4656); transform: rotate(-4deg); } .st-2 { background: linear-gradient(160deg, #6E7A8A, #1F3B34); } .st-3 { background: linear-gradient(160deg, #E2492B, #5E1407); transform: rotate(4deg); }
.sh.is-k1 .st-1 { transform: rotate(-4deg); } .sh.is-k3 .st-3 { transform: rotate(4deg); }
.st-c em { font-style: normal; align-self: flex-start; margin-top: 1cqw; padding: .8cqw 1.4cqw; background: #fff; color: #0E0F11; font-weight: 500; }
/* abstract mocks: no construction */
.sh[data-scene="floor"] .m-bld { border-bottom: 0; justify-content: center; }
.sh[data-scene="floor"] .m-fl em { right: auto; left: -3.4cqw; }
.sh[data-scene="floor"] .m-bld { padding-left: 4.4cqw; }
.sh .r-bld { left: 24%; right: 24%; height: 40%; border-radius: 999px 999px 0 0; background: #2A3340; }
.sh .m-pic::after { left: 22%; right: 22%; bottom: 14%; height: auto; aspect-ratio: 1; clip-path: none; border-radius: 50%; background: linear-gradient(160deg, #F7F8FA, #C9D0DA); }