/* Showcase product mockups. 1em = 10px at 720px width; everything scales via container query units. */
.mk-system,.mk-ads,.mk-bot,.mk-ai{container-type:inline-size;width:100%;aspect-ratio:3/2;position:relative;overflow:hidden;transform:translateZ(0);border-radius:clamp(14px,4cqw,32px);font-family:"Roboto Flex",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;isolation:isolate}
.mk-in{--mkmin:10px;position:absolute;inset:0;font-size:calc(100cqw/72);line-height:1.3;display:flex;overflow:hidden}
.mk-in *{box-sizing:border-box;margin:0}
.mk-ic{width:1.5em;height:1.5em;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk-grow{flex:1;min-width:0}
.mk-b{font-weight:600}

/* ===== 1. SYSTEM (light admin, one green accent: workspace sidebar, toolbar, KPI row with deltas, kanban pipeline) ===== */
.mk-bg{font-size:max(var(--mkmin),.82em);font-weight:600;border-radius:.5em;padding:.1em .5em;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:0 0 0 1px currentColor inset}
.mk-bg.up{color:#067647;background:#ecfdf3}.mk-bg.dn{color:#b42318;background:#fef3f2}
.mk-lp{animation:mk-toast 7s ease-in-out 4s infinite}
@keyframes mk-toast{0%,66%{opacity:1;transform:none}74%{opacity:0;transform:translateY(-1em)}88%{opacity:0;transform:translateY(1.2em)}100%{opacity:1;transform:none}}

/* ===== 2. ADS (dark zinc dashboard: toolbar, KPI cards with deltas + sparklines, multi-series chart with axes, campaign meters) ===== */
@keyframes mk-pulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.6);opacity:0}}
@keyframes mk-dot{0%,30%{opacity:0;transform:scale(.4)}38%{opacity:1;transform:scale(1)}60%{opacity:.7;transform:scale(1.5)}80%{opacity:1;transform:scale(1)}95%,100%{opacity:0;transform:scale(.4)}}
@keyframes mk-ext{0%,10%{stroke-dashoffset:1;opacity:1}35%,80%{stroke-dashoffset:0;opacity:1}95%,100%{stroke-dashoffset:0;opacity:0}}

/* ===== 4. AI (warm support desk: inbox, thread with sourced answer, human handoff) ===== */
.mk-ai{background:#f6efe6;color:#3b2f27}
.mk-ai .mk-in{background:radial-gradient(40em 30em at 8% 0,#ffe7cf 0,transparent 70%),radial-gradient(40em 30em at 100% 100%,#f9d7cf 0,transparent 70%),#f6efe6;padding:2.4em;gap:1.6em}
.mk-ai .mk-in *{min-width:0}
.mk-ai .mk-inbox{width:22em;flex:none;display:flex;flex-direction:column;gap:.55em}
.mk-ai .mk-ih{display:flex;align-items:center;gap:.7em;font-size:max(var(--mkmin),1.25em);color:#6b4a36;padding:0 .2em .3em}.mk-ai .mk-ih b{font-weight:650}
.mk-ai .mk-ih em{font-style:normal;font-size:max(var(--mkmin),.8em);font-weight:650;background:#f09550;color:#fff;border-radius:2em;padding:0 .65em}
.mk-ai .mk-cv{display:flex;align-items:center;gap:.9em;background:#ffffffa8;border:1px solid #f0e2d3;border-radius:1.4em;padding:.85em .95em}
.mk-ai .mk-cv.mk-on{background:#fff;border-color:#f3b98a;box-shadow:0 .7em 1.6em -.6em #e0884a55}
.mk-ai .mk-av{width:3em;height:3em;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:650;font-size:max(var(--mkmin),.9em);flex:none;line-height:1;text-align:center;background:linear-gradient(135deg,var(--a,#f59e0b),var(--b,#ef4444));box-shadow:0 0 0 .2em #fff}
.mk-ai .mk-cvt{flex:1;display:block;line-height:1.25}.mk-ai .mk-cvt b{display:block;font-size:max(var(--mkmin),1.05em)}.mk-ai .mk-cvt small{display:block;color:#9a8574;font-size:max(var(--mkmin),.92em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:11.5em}
.mk-ai .mk-cvr{display:flex;flex-direction:column;align-items:flex-end;gap:.35em;font-size:max(var(--mkmin),.85em);color:#a99484}.mk-ai .mk-cvr time{font-variant-numeric:tabular-nums}
.mk-ai .mk-bd{font-size:max(var(--mkmin),.82em);font-weight:700;background:#e9f7ef;color:#1f8a57;border-radius:2em;padding:.05em .6em;letter-spacing:.02em}
.mk-ai .mk-un{width:1.7em;height:1.7em;border-radius:50%;background:#f06a8d;color:#fff;display:grid;place-items:center;font-weight:700;font-size:max(var(--mkmin),.95em)}
.mk-ai .mk-chat{flex:1;display:flex;flex-direction:column;background:#fffdfa;border-radius:2.4em;box-shadow:0 2.4em 5em #8a4b2230,0 0 0 1px #f0e2d3;overflow:hidden;font-size:max(var(--mkmin),1.05em)}
.mk-ai .mk-ch{padding:1.1em 1.5em;display:flex;align-items:center;gap:.9em;border-bottom:1px solid #f4e9dc;background:linear-gradient(#fff,#fffaf4)}
.mk-ai .mk-ch b{display:block;font-size:max(var(--mkmin),1.15em)}.mk-ai .mk-ch small{color:#1f8a57;font-size:max(var(--mkmin),.95em)}
.mk-ai .mk-ch small::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:50%;background:#34c77b;margin-right:.45em}
.mk-ai .mk-sw{margin-left:auto;display:flex;align-items:center;gap:.6em;font-size:max(var(--mkmin),.95em);font-weight:600;color:#a05a2c;background:#fff2e4;border-radius:2em;padding:.35em .9em .35em .5em}
.mk-ai .mk-sw i{width:2.2em;height:1.3em;border-radius:2em;background:#f09550;position:relative}.mk-ai .mk-sw i::after{content:"";position:absolute;right:.2em;top:.2em;width:.9em;height:.9em;border-radius:50%;background:#fff}
.mk-ai .mk-log{flex:1;padding:1.2em 1.5em;display:flex;flex-direction:column;gap:.9em;font-size:max(var(--mkmin),1.05em);justify-content:flex-end;min-height:0}
.mk-ai .mk-q{align-self:flex-start;max-width:78%;background:#f4efe9;color:#3b2f27;border-radius:1.5em 1.5em 1.5em .4em;padding:.75em 1.05em}
.mk-ai .mk-a{align-self:flex-end;max-width:90%;background:linear-gradient(135deg,#ffeedd,#ffe3cf);border-radius:1.5em 1.5em .4em 1.5em;padding:.85em 1.05em;line-height:1.4;position:relative;box-shadow:0 .6em 1.4em -.8em #e0884a88}
.mk-ai .mk-ab{display:flex;align-items:center;gap:.6em;margin-bottom:.45em}.mk-ai .mk-aia{width:2.2em;height:2.2em;border-radius:.8em;background:linear-gradient(135deg,#ffb27a,#f06a8d);color:#fff;display:grid;place-items:center}.mk-ai .mk-aia .mk-ic{width:1.3em;height:1.3em}
.mk-ai .mk-src{display:flex;gap:.5em;flex-wrap:wrap;margin-top:.7em}
.mk-ai .mk-src>span{display:inline-flex;align-items:center;gap:.4em;font-size:max(var(--mkmin),.88em);background:#fff;border:1px solid #f0d9c2;color:#a05a2c;border-radius:2em;padding:.2em .75em .2em .55em;font-weight:550;white-space:nowrap}.mk-ai .mk-src .mk-ic{width:1.2em;height:1.2em}
.mk-ai .mk-conf{display:flex;align-items:center;gap:.8em;margin-top:.7em;font-size:max(var(--mkmin),.9em);color:#8a6a55}.mk-ai .mk-conf em{font-style:normal;font-weight:650;color:#1f8a57;white-space:nowrap}
.mk-ai .mk-meter{flex:1;display:block;height:.5em;border-radius:1em;background:#f6d9bf;overflow:hidden}.mk-ai .mk-meter i{display:block;width:var(--w);height:100%;background:linear-gradient(90deg,#f09550,#34c77b);border-radius:1em;transform-origin:left}
.mk-ai .mk-hand{align-self:stretch;background:#eaf7ef;border:1px solid #bfe6cf;color:#256a46;border-radius:1.4em;padding:.7em 1em;display:flex;gap:.9em;align-items:center;font-size:max(var(--mkmin),.98em)}.mk-ai .mk-hand b{display:block}.mk-ai .mk-hand small{color:#3f8a64}.mk-ai .mk-hand .mk-av{width:2.8em;height:2.8em;font-size:max(var(--mkmin),.85em)}
.mk-ai .mk-in2{margin:0 1.2em 1.2em;border:1px solid #f0e2d3;border-radius:2em;padding:.6em .7em .6em 1.1em;display:flex;align-items:center;color:#b3a089;font-size:max(var(--mkmin),1.02em);background:#fff}
.mk-ai .mk-snd{margin-left:auto;width:2.4em;height:2.4em;border-radius:50%;background:#f09550;color:#fff;display:grid;place-items:center}.mk-ai .mk-snd .mk-ic{width:1.3em;height:1.3em}

/* ===== 3. BOT (Telegram Mini App shop: big product card on a Telegram-blue stage) ===== */
.mk-bot{background:linear-gradient(135deg,#1b8fe0 0,#2aabee 45%,#34d3c0 100%);color:#111;box-shadow:0 0 0 1px #ffffff30}
.mk-bot .mk-in{align-items:center;justify-content:center;background:radial-gradient(circle at 1px 1px,#ffffff2e 1px,transparent 1.6px) 0 0/2.2em 2.2em}
.mk-bot .mk-ring{position:absolute;border:1px solid #ffffff40;border-radius:50%}
.mk-bot .r1{width:62em;height:62em;left:-14em;top:-24em}.mk-bot .r2{width:44em;height:44em;right:-12em;bottom:-22em;border-color:#ffffff30}
.mk-bot .mk-phone{position:absolute;left:22.5em;top:1.2em;width:27em;height:46.4em;border-radius:3.6em;background:#0f1115;padding:.8em;box-shadow:0 3em 6em #05386f66,0 0 0 .15em #3a3f4a inset,0 0 0 1px #ffffff22}
.mk-bot .mk-scr{height:100%;border-radius:2.9em;overflow:hidden;background:#f2f5f8;display:flex;flex-direction:column;position:relative}
.mk-bot .mk-tgb{display:flex;align-items:center;justify-content:space-between;padding:2.3em 1.3em .7em;background:#fff;font-size:max(var(--mkmin),.95em);color:#2a9bd8}.mk-bot .mk-tgb b{color:#111;font-size:max(var(--mkmin),1.1em)}.mk-bot .mk-dots3{letter-spacing:.1em;color:#7a8794}
.mk-bot .mk-app{flex:1;min-height:0;margin-bottom:6.4em;padding:.9em 1em 0;display:flex;flex-direction:column;gap:.8em;overflow:hidden}
.mk-bot .mk-ah{display:flex;align-items:center;gap:.8em}
.mk-bot .mk-bav{width:3.2em;height:3.2em;border-radius:50%;background:linear-gradient(135deg,#ff9a3d,#ff4d8d);display:grid;place-items:center;color:#fff;font-weight:700;font-size:max(var(--mkmin),1.05em);flex:none}
.mk-bot .mk-ah b{display:block;font-size:max(var(--mkmin),1.2em);line-height:1.2}.mk-bot .mk-ah small{color:#7a8794;font-size:max(var(--mkmin),.95em)}
.mk-bot .mk-cartb2{position:relative;margin-left:auto;width:3.3em;height:3.3em;border-radius:1.1em;background:#fff;box-shadow:0 .2em .8em #1f2a5a1f;display:grid;place-items:center;color:#1b6fcf;flex:none}
.mk-bot .mk-cartb2 .mk-ic{width:1.8em;height:1.8em}
.mk-bot .mk-cartb2 em{position:absolute;right:-.4em;top:-.4em;min-width:1.7em;height:1.7em;border-radius:1em;background:#ef4444;color:#fff;font-style:normal;font-size:max(var(--mkmin),.8em);font-weight:700;display:grid;place-items:center;padding:0 .3em;box-shadow:0 0 0 .2em #f2f5f8}
.mk-bot .mk-chips{display:flex;gap:.45em;font-size:max(var(--mkmin),.95em);white-space:nowrap}
.mk-bot .mk-chips span{background:#fff;border-radius:2em;padding:.45em .95em;font-weight:550;color:#334;box-shadow:0 .1em .4em #1f2a5a14}
.mk-bot .mk-chips .mk-on{background:#1b6fcf;color:#fff}
.mk-bot .mk-pr{background:#fff;border-radius:1.8em;box-shadow:0 .6em 1.6em -.8em #1f2a5a55,0 0 0 1px #0000000a}
.mk-bot .mk-big1{padding:.55em}
.mk-bot .mk-pi{display:grid;place-items:center;border-radius:1.4em;position:relative}
.mk-bot .mk-pi.big{height:14.6em}.mk-bot .mk-pi.big>svg{height:12.4em;width:auto}
.mk-bot .mk-hit{position:absolute;left:.8em;top:.8em;background:#ef4444;color:#fff;font-size:max(var(--mkmin),.88em);font-weight:700;border-radius:2em;padding:.2em .8em}
.mk-bot .mk-fav{position:absolute;right:.8em;top:.8em;width:2.9em;height:2.9em;border-radius:50%;background:#ffffffd9;color:#ef4444;display:grid;place-items:center}.mk-bot .mk-fav .mk-ic{width:1.5em;height:1.5em;fill:none;stroke:#ef4444;stroke-width:2}
.mk-bot .mk-pinfo{padding:.7em .5em .35em}
.mk-bot .mk-pt1{display:flex;justify-content:space-between;align-items:baseline}.mk-bot .mk-pt1 b{font-size:max(var(--mkmin),1.4em);letter-spacing:-.01em}
.mk-bot .mk-price{font-weight:700;font-size:max(var(--mkmin),1.3em);color:#111;font-variant-numeric:tabular-nums}
.mk-bot .mk-pt2{display:flex;gap:.9em;align-items:center;color:#7a8794;font-size:max(var(--mkmin),.95em);margin-top:.1em}
.mk-bot .mk-rate{display:inline-flex;align-items:center;gap:.25em;color:#111;font-weight:650}.mk-bot .mk-rate .mk-ic{width:1.2em;height:1.2em;fill:#f5a623;stroke:none}
.mk-bot .mk-pbuy{display:flex;gap:.6em;margin-top:.7em;align-items:stretch}
.mk-bot .mk-qty{display:grid;place-items:center;background:#eef3f8;border-radius:1em;padding:0 .9em;font-weight:650;font-size:max(var(--mkmin),1.05em);white-space:nowrap}
.mk-bot .mk-addb{flex:1;display:grid;background:#111827;color:#fff;text-align:center;border-radius:1em;padding:.8em .2em;font-size:max(var(--mkmin),1.02em);font-weight:650}
.mk-bot .mk-addb>*{grid-area:1/1}.mk-bot .mk-t2{opacity:0}
.mk-bot .mk-pr.mk-added .mk-addb{background:#16a34a}.mk-bot .mk-pr.mk-added .mk-t1{opacity:0}.mk-bot .mk-pr.mk-added .mk-t2{opacity:1}
.mk-bot .mk-minis{display:grid;grid-template-columns:1fr 1fr;gap:.7em}
.mk-bot .mk-mini{padding:.45em .45em .6em;position:relative;line-height:1.25}
.mk-bot .mk-mini .mk-pi{height:6.6em;margin-bottom:.45em}.mk-bot .mk-mini .mk-pi>svg{height:5.4em;width:auto}
.mk-bot .mk-mini b{display:block;font-size:max(var(--mkmin),1.02em);padding:0 .3em}.mk-bot .mk-mini .mk-price{display:block;font-size:max(var(--mkmin),1.05em);padding:.1em .3em 0}
.mk-bot .mk-plus{position:absolute;right:.6em;bottom:.6em;width:2.4em;height:2.4em;border-radius:.9em;background:#1b6fcf;color:#fff;display:grid;place-items:center;font-weight:700;font-size:max(var(--mkmin),1.1em)}.mk-bot .mk-plus>*{grid-area:1/1}.mk-bot .mk-plus{display:grid}.mk-bot .mk-plus .mk-t2{opacity:0}
.mk-bot .mk-pr.mk-added .mk-plus{background:#16a34a}.mk-bot .mk-pr.mk-added .mk-plus .mk-t1{opacity:0}.mk-bot .mk-pr.mk-added .mk-plus .mk-t2{opacity:1}
.mk-bot .mk-mainbtn{position:absolute;left:1em;right:1em;bottom:1.1em;display:flex;justify-content:space-between;align-items:center;background:#1b6fcf;color:#fff;border-radius:1.2em;padding:1em 1.3em;font-weight:650;font-size:max(var(--mkmin),1.1em);box-shadow:0 .8em 1.6em -.6em #1b6fcf99}
.mk-bot .mk-mainbtn b{font-variant-numeric:tabular-nums}

/* ===== STAGE: layered composition shared by all illustrations ===== */
.pain-vis:has(.mk-stage){overflow:visible;box-shadow:none;border-radius:0;background:none}
.mk-stage{container-type:inline-size;position:relative;width:100%;aspect-ratio:100/82;overflow:visible;--base:-3}
.mk-sc{position:absolute;inset:0;font-size:calc(100cqw/78);perspective:1600px;font-family:"Roboto Flex",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.3}
.mk-sc *{box-sizing:border-box;margin:0}
.mk-sc::before{-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);mask-image:radial-gradient(closest-side,#000 50%,transparent 100%);content:"";position:absolute;inset:-9% -7%;z-index:0;pointer-events:none;background:var(--glow);opacity:.45}
[data-mk-stage=bot]{--glow:radial-gradient(36% 40% at 50% 42%,#2aabee55,transparent 100%),radial-gradient(26% 30% at 78% 80%,#34d3c040,transparent 100%);--base:3}
[data-mk-stage=ai]{--glow:radial-gradient(34% 38% at 76% 24%,#ffb27a66,transparent 100%),radial-gradient(30% 34% at 22% 78%,#f06a8d3d,transparent 100%);--base:-3}
[data-mk-stage=ai] .mk-tilt{transform:none}
.mk-tilt{position:absolute;left:4cqw;top:6cqw;width:92cqw;z-index:2;transform:rotateX(2deg) rotateY(calc(var(--base)*1deg))}
.mk-bot{box-shadow:0 0 0 1px #ffffff40,0 3em 6em -1.5em #0b5aa899,0 1em 2em -.5em #0003}
.mk-ai{box-shadow:0 0 0 1px #f0e2d3,0 3em 6em -1.5em #c9692f66,0 1em 2em -.5em #7a3b1a22}
.mk-sheen{position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff33;background:linear-gradient(112deg,transparent 28%,#ffffff14 44%,#ffffff26 50%,transparent 62%) 50% 0/260% 100% no-repeat}
.mk-system .mk-sheen,.mk-ai .mk-sheen{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #0000000a;background-image:linear-gradient(112deg,transparent 30%,#ffffff55 48%,transparent 62%)}
.mk-f{position:absolute;z-index:6}
.mk-fc{border-radius:1.9em;padding:1.3em 1.5em;font-size:max(var(--mkmin),1.05em);}
.mk-fc.dk{background:#141826f5;color:#e7e9ee;box-shadow:0 0 0 1px #ffffff1f,inset 0 1px 0 #ffffff26,0 2.4em 4em -1em #3b82f655,0 .6em 1.4em #0008}
.mk-fc.lt{background:#fffffff7;color:#171717;box-shadow:0 0 0 1px #0f172a0f,inset 0 1px 0 #fff,0 2.4em 4em -1em #0f5a4340,0 .5em 1.2em #0f172a14}
.mk-fc.wm{background:#fffcf7f7;color:#3b2f27;box-shadow:0 0 0 1px #f0e2d3,inset 0 1px 0 #fff,0 2.4em 4em -1em #e0783c55,0 .5em 1.2em #7a3b1a14}
.mk-fh{display:flex;justify-content:space-between;align-items:center;gap:1em;font-size:max(var(--mkmin),.95em);font-weight:600;opacity:.62;letter-spacing:.01em}
.mk-fh em{font-style:normal;font-weight:500;opacity:.8;white-space:nowrap}
.mk-big{display:block;font-size:2.7em;font-weight:650;letter-spacing:-.035em;line-height:1.1;font-variant-numeric:tabular-nums;margin-top:.15em}
.mk-fc .mk-d{font-weight:650;font-size:1em;color:#16a34a}.mk-fc.dk .mk-d{color:#34d399}
.mk-row{display:flex;align-items:baseline;justify-content:space-between;gap:1em}
.mk-fc small{display:block;opacity:.6;font-size:max(var(--mkmin),.92em)}.mk-fc b{font-weight:650}
.mk-toast{display:flex;gap:1em;align-items:flex-start}.mk-toast b{display:block;font-size:max(var(--mkmin),1.15em);margin-top:.15em}
.mk-tic{width:3.2em;height:3.2em;border-radius:1em;display:grid;place-items:center;flex:none;font-weight:700;background:#ffffff14}
.mk-tic .mk-ic{width:1.7em;height:1.7em}.mk-red .mk-tic{background:#4a1a20;color:#fb7185}.mk-grn{background:#dcfce7;color:#16a34a}
.mk-red{box-shadow:0 0 0 1px #fb718555,inset 0 1px 0 #ffffff26,0 2.4em 4em -1em #f43f5e66,0 .6em 1.4em #0008!important}
/* ads floats */
/* system floats */
/* bot floats */
[data-mk-stage=bot] .mk-f1{right:0;top:5em;width:21em}[data-mk-stage=bot] .mk-f2{right:1.5em;bottom:.5em;width:25em}[data-mk-stage=bot] .mk-f3{left:0;top:12em;width:25em}
.mk-deal h5{font-size:max(var(--mkmin),1.15em);display:flex;align-items:center;gap:.6em;font-weight:650}
.mk-ok{width:2.2em;height:2.2em;border-radius:.7em;background:#dcfce7;color:#16a34a;display:grid;place-items:center;flex:none}
.mk-deal dl{display:grid;grid-template-columns:auto 1fr;gap:.45em 1em;margin:.9em 0 .8em;font-size:max(var(--mkmin),.98em)}.mk-deal dt{color:#8a8a8a}.mk-deal dd{text-align:right;font-weight:600;margin:0}
.mk-tag{display:inline-block;background:#e4f8ec;color:#15803d;border-radius:2em;padding:.2em .9em;font-size:max(var(--mkmin),.95em);font-weight:600}
/* ai floats */
[data-mk-stage=ai] .mk-f1{left:0;top:33em;width:24em}[data-mk-stage=ai] .mk-f2{right:0;top:-.9em;width:22em}[data-mk-stage=ai] .mk-f3{left:0;bottom:1.5em;width:24em}
.mk-pop{border-radius:1.6em}.mk-pop b{display:block;color:#a05a2c;font-size:max(var(--mkmin),1.2em);margin:.35em 0 .5em}.mk-pop blockquote{border-left:.25em solid #f09550;padding-left:.8em;font-size:max(var(--mkmin),.98em);color:#6b5648;line-height:1.4}
.mk-pop .mk-fh em{color:#16a34a;opacity:1}
.mk-stars{display:flex;gap:.15em}.mk-stars svg{width:1.8em;height:1.8em;fill:#f5a623}
.mk-auto{display:flex;align-items:center;gap:1.2em}.mk-auto svg{width:6em;height:6em;flex:none}.mk-auto .mk-big{font-size:2.4em;margin:0}
.mk-ai .mk-ans{position:relative}.mk-ai .mk-ans::after{content:"";position:absolute;inset:-.25em;border-radius:1.7em;border:1px dashed #f09550aa;pointer-events:none}

/* ===== SERVICES STACK ===== */
/* ads */
/* system kanban */
/* site */
/* bot */
/* phone */
/* loops: transform/opacity only; paused unless the stage is in view */
.mk-stage:not(.mk-inview) *,.mk-stage:not(.mk-inview) *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.mk-stage *,.mk-stage *::after{animation:none!important}}
@media (min-width:1024px){.svc-img .mk-stk{max-width:840px}}

@media (prefers-reduced-motion:reduce){.mk-typing i,.mk-ads .mk-live i::after{animation:none}}
.mk-line{stroke-dasharray:1;stroke-dashoffset:0}
/* reversed rows: site.css gives the 5fr column to the visual; flip so the illustration gets the wide 7fr column */
@media(min-width:1024px){.pain.rev:has(.mk-stage){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.mk-ai .mk-in2 .mk-ph{margin:0;width:auto;height:auto;border-radius:0;background:none;color:inherit;display:block}

/* ===== no-clip wrappers: glows/shadows/floating cards may extend past the stage ===== */
.pain .pain-vis:has(.mk-stage){overflow:visible;box-shadow:none;border-radius:0;background:none;padding-bottom:24px}
.svc-img{overflow:visible}
#cases,#services{overflow-x:clip}
.mk-stage,.mk-sc,.mk-tilt{overflow:visible}


/* ===== 5. PORTAL (client cabinet: bright sky + navy balance card + coral accents) ===== */
.mk-ft{width:2.9em;height:2.9em;border-radius:.9em;display:grid;place-items:center;font-size:max(var(--mkmin),.72em);font-weight:700;letter-spacing:.02em;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);flex:none}
.mk-file{display:flex;align-items:center;gap:1em}.mk-file b{display:block}.mk-file .mk-ft{font-size:max(var(--mkmin),.9em)}.mk-file .mk-meter{display:block;height:.4em;width:11em;border-radius:1em;background:#e3edf8;margin-top:.5em;overflow:hidden}.mk-file .mk-meter i{display:block;height:100%;width:var(--w);background:linear-gradient(90deg,#22c55e,#2563eb);transform-origin:left}
.mk-mgr{display:flex;align-items:center;gap:1em}.mk-mgr b{display:block}.mk-mgr .mk-av{width:3.4em;height:3.4em;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:650;background:linear-gradient(135deg,var(--a),var(--b));flex:none;font-size:max(var(--mkmin),.9em)}
.mk-mgr .mk-pbtn{background:#2563eb;color:#fff;border-radius:.9em;padding:.5em 1em;font-weight:650;margin-left:.4em;box-shadow:0 .5em 1em -.4em #2563ebaa}
.pain-more{padding-top:8px}

/* ===== PHONES (<=640px): re-laid-out compact mockups, portrait 4:5, bigger type; one floating card, anchored bottom-right ===== */
@media(max-width:640px){
  .mk-stage:not(.mk-stk){aspect-ratio:100/172}
  .mk-stage:not(.mk-stk) .mk-tilt{left:2cqw;top:0;width:96cqw;transform:none}
  .mk-system,.mk-ads,.mk-bot,.mk-portal{aspect-ratio:4/5}.mk-ai{aspect-ratio:4/5.7}
  
  .mk-in{font-size:calc(100cqw/40)}
  .mk-sheen{display:none}
  .mk-f2,.mk-f3{display:none}
  .mk-f1{font-size:max(var(--mkmin),1.8em)}
  [data-mk-stage=bot] .mk-f1{bottom:-1.6em}
  [data-mk-stage] .mk-f1{top:auto;left:auto;right:0;bottom:0}
  /* system */
  /* ads */
  /* bot */
  .mk-bot .mk-phone{left:6.6em;top:1.8em;width:26.8em;height:46.4em}
  /* portal */
  /* ai */
  .mk-ai .mk-in{padding:2em}.mk-ai .mk-inbox{display:none}.mk-ai .mk-a{max-width:100%}
}


/* ===== v11: photo avatars + logomarks (sprite #mk-sprite in index.html; photos in /mk/avatars) ===== */
img.mk-av{display:block;border-radius:50%;object-fit:cover;flex:none;background:#e4e4e7;font-size:1em}
.mk-lgm{display:block;flex:none;width:2.4em;height:2.4em}
.mk-av.v2{width:2.5em;height:2.5em;box-shadow:0 0 0 .2em #fff}.mk-lgm.v2{width:2.5em;height:2.5em}
.mk-bot .mk-bav{width:3.4em;height:3.4em;background:none;border-radius:0}
.mk-tica{width:3.2em;height:3.2em;border-radius:50%;object-fit:cover;flex:none;display:block}
.mk-ai .mk-aia{background:none;width:2.4em;height:2.4em;border-radius:0;display:block}.mk-ai .mk-aia .mk-lgm{width:100%;height:100%}
.mk-cn{display:inline-flex;align-items:center;gap:.6em;min-width:0}.mk-chg{width:1.7em;height:1.7em}

/* ===== v11 system: revenue hero + compact stats, rich kanban cards, opened deal panel, drag in progress ===== */
.mk-bars2{display:flex;align-items:flex-end;gap:.3em;height:1.7em}.mk-bars2 i{flex:1;height:var(--h);background:#bbf7d0;border-radius:.25em;transform-origin:bottom}.mk-bars2 i:last-child{background:#16a34a}
.mk-chip{font-size:max(var(--mkmin),.85em);font-weight:600;padding:.1em .6em;border-radius:.6em;background:#f4f4f5;color:#52525b;white-space:nowrap;line-height:1.4}
.mk-chip.vip{background:#fef3c7;color:#92400e}
.mk-due{display:inline-flex;align-items:center;gap:.3em;font-variant-numeric:tabular-nums;white-space:nowrap}.mk-due .mk-ic{width:1.2em;height:1.2em;color:#a1a1aa}
.mk-tli{width:2.4em;height:2.4em;border-radius:50%;background:#f4f4f5;color:#52525b;display:grid;place-items:center;flex:none}.mk-tli .mk-ic{width:1.3em;height:1.3em}
@media(max-width:640px){
}

/* ===== v3 SHOWCASE: ads (warm coral), system (business OS), portal (client cabinet), services stack.
   Motion: transform/opacity/stroke-dashoffset only; loops are paused off-screen (.mk-stage:not(.mk-inview)) and under reduced motion. ===== */
/* tracker used by the Telegram-bot illustration (kept from the previous version) */
.mk-trk{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;margin:1em 0 .5em}
.mk-trk i{width:1.4em;height:1.4em;border-radius:50%;background:#e5e7eb;z-index:1;box-shadow:0 0 0 .3em #fff}.mk-trk i.done{background:#22c55e}.mk-trk i.cur{background:#2b7de0;box-shadow:0 0 0 .3em #fff,0 0 0 .6em #2b7de033}
.mk-trk u{position:absolute;left:12.5%;right:12.5%;top:.55em;height:.3em;background:#e5e7eb;border-radius:1em;text-decoration:none}.mk-trk u::after{content:"";position:absolute;inset:0;width:var(--prog,66%);background:#22c55e;border-radius:inherit}
.mk-tl4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center;font-size:max(var(--mkmin),.85em);color:#6b7280}
.mk-portal,.mk-ads,.mk-system{container-type:inline-size;width:100%;aspect-ratio:3/2;position:relative;overflow:hidden;transform:translateZ(0);border-radius:clamp(14px,4cqw,32px);font-family:"Roboto Flex",ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.3}
.mk-pa{display:block;flex:none;border-radius:50%;object-fit:cover;background:#e5e7eb}
.mk-bars2{display:flex;align-items:flex-end;gap:.35em}
.mk-bars2>i,.mk-bars2>span>i{display:block;flex:1;height:var(--h);background:var(--c,#ff4a1c);border-radius:.35em .35em .12em .12em;transform-origin:bottom}
.mk-fc.lv{background:#fdfcffF7;color:#1b1840;box-shadow:0 0 0 1px #e6e2fa,inset 0 1px 0 #fff,0 2.4em 4em -1em #6a5ae055,0 .5em 1.2em #2a1f7314}
.mk-fc.wm{box-shadow:0 0 0 1px #f0e2d3,inset 0 1px 0 #fff,0 2.4em 4em -1em #ff4a1c55,0 .5em 1.2em #7a3b1a14;background:#fffdfaF7;color:#1a1612}
/* stage: dashboards get a taller stage so floats live in their own strip under the window */
[data-mk-stage=ads],[data-mk-stage=sys],[data-mk-stage=portal]{aspect-ratio:100/86}
[data-mk-stage=ads] .mk-tilt,[data-mk-stage=sys] .mk-tilt,[data-mk-stage=portal] .mk-tilt{top:4cqw}
[data-mk-stage=ads]{--glow:radial-gradient(34% 36% at 80% 22%,#ff4a1c40,transparent 100%),radial-gradient(30% 34% at 18% 80%,#ffb27a45,transparent 100%);--base:-3}
[data-mk-stage=sys]{--glow:radial-gradient(34% 38% at 22% 26%,#b6ea3540,transparent 100%),radial-gradient(34% 34% at 82% 80%,#7dd3fc3d,transparent 100%);--base:3}
[data-mk-stage=portal]{--glow:radial-gradient(34% 36% at 78% 22%,#8b7cf547,transparent 100%),radial-gradient(30% 34% at 20% 80%,#f9a8d438,transparent 100%);--base:-3}
.mk-ads .mk-sheen,.mk-portal .mk-sheen{box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #0000000a;background-image:linear-gradient(112deg,transparent 30%,#ffffff55 48%,transparent 62%)}
.mk-in svg.mk-ic{flex:none}

/* ---------- floats shared ---------- */
.fl-toast{display:flex;align-items:center;gap:1em;white-space:nowrap}
.fl-tx{display:block;min-width:0}.fl-tx b{display:block;font-size:max(var(--mkmin),1.12em);line-height:1.25}.fl-tx small{display:block;opacity:.62;font-size:max(var(--mkmin),.92em)}
.fl-ic{width:3em;height:3em;border-radius:1em;display:grid;place-items:center;flex:none}.fl-ic .mk-ic{width:1.6em;height:1.6em}
.fl-ic.g{background:#dcfce7;color:#16a34a}.fl-ic.r{background:#ffe4dc;color:#ea4a1f}.fl-ic.o{background:#ffe9df;color:#ff4a1c}.fl-ic.b{background:#e6e2fa;color:#5a49d6}
.fl-amt{margin-left:auto;font-size:max(var(--mkmin),1.15em);font-variant-numeric:tabular-nums;color:#15803d}
.fl-nc .fl-h{display:flex;align-items:center;gap:.8em;font-weight:600;font-size:max(var(--mkmin),.98em);white-space:nowrap}.fl-nc .fl-h>em{margin-left:auto;font-style:normal}
.fl-big{display:block;font-size:2.9em;letter-spacing:-.035em;line-height:1.1;font-weight:500;margin:.3em 0 .15em;font-variant-numeric:tabular-nums}
.fl-bars{height:3em;width:100%}
.fl-team{display:flex;align-items:center;gap:1.1em;white-space:nowrap}
.fl-stack{display:flex;flex:none}.fl-stack .mk-pa{width:3em;height:3em;margin-left:-.9em;box-shadow:0 0 0 .22em #fff}.fl-stack .mk-pa:first-child{margin-left:0}
.fl-more{width:3em;height:3em;margin-left:-.9em;border-radius:50%;background:#111;color:#fff;font-style:normal;font-weight:600;font-size:max(var(--mkmin),.9em);display:grid;place-items:center;box-shadow:0 0 0 .22em #fff}
.fl-file{display:grid;grid-template-columns:auto 1fr;gap:.9em 1em;align-items:center;white-space:nowrap}
.fl-ft{width:3em;height:3em;border-radius:1em;background:#ef4444;color:#fff;font-weight:700;font-size:max(var(--mkmin),.8em);display:grid;place-items:center;letter-spacing:.02em}
.fl-m{grid-column:1/-1;margin:0}
.fl-car{display:flex;align-items:center;gap:1em;white-space:nowrap}.fl-car .mk-pa.sm{width:3em;height:3em;margin-left:.4em}
.a-d{display:inline-flex;gap:.6em;align-items:center}
.a-d em{font-style:normal}

/* ===================== 1. ADS ===================== */
.mk-ads{background:#f3f1ed;color:#1a1612;box-shadow:0 0 0 1px #e7e1d9,0 3em 6em -1.6em #ff4a1c4d,0 1.2em 2.6em -1em #3a1d0f26}
.mk-ads .mk-in{flex-direction:column;padding:1.5em 1.7em 1.5em;gap:1em;background:radial-gradient(44em 24em at 100% 0,#ffe9e0 0,transparent 70%),#f3f1ed}
:where(.mk-ads .mk-in *){box-sizing:border-box;margin:0;min-width:0}
.a-nav{display:flex;align-items:center;gap:1em;flex:none;height:2.8em}
.a-logo{display:flex;align-items:center;gap:.65em;font-weight:700;font-size:max(var(--mkmin),1.25em);letter-spacing:-.02em;white-space:nowrap}
.a-logo i{width:1.9em;height:1.9em;border-radius:.6em;background:#1a1612;color:#ff6a3d;display:grid;place-items:center}.a-logo .mk-ic{width:1.1em;height:1.1em;stroke-width:2.2}
.a-tabs{margin:0 auto;display:flex;gap:.15em;padding:.22em;background:#e9e5df;border-radius:1em;color:#6d655a}
.a-tabs>span{padding:.45em 1em;border-radius:.8em;white-space:nowrap}.a-tabs>.on{background:#fff;color:#1a1612;font-weight:600;box-shadow:0 .1em .5em #3a1d0f1a}
.a-sp{margin-left:auto}.a-tabs+.a-sp{margin-left:0}
.a-ib{position:relative;width:2.7em;height:2.7em;border-radius:50%;background:#fff;display:grid;place-items:center;color:#4a4238;box-shadow:0 0 0 1px #e7e1d9;flex:none}.a-ib .mk-ic{width:1.35em;height:1.35em}
.a-ib u{position:absolute;right:.6em;top:.6em;width:.62em;height:.62em;border-radius:50%;background:#ff4a1c;box-shadow:0 0 0 .18em #fff}
.a-nav>.mk-pa{width:2.7em;height:2.7em;box-shadow:0 0 0 .2em #fff,0 0 0 .32em #ff4a1c66}
.a-head{display:flex;align-items:center;gap:.7em;flex:none}
.a-head h4{font-size:2.3em;font-weight:450;letter-spacing:-.03em;line-height:1.1;margin-right:auto;white-space:nowrap}
.a-pill{display:flex;align-items:center;gap:.5em;background:#fff;border-radius:.9em;padding:.55em .95em;font-weight:500;color:#3a332b;box-shadow:0 0 0 1px #e7e1d9;white-space:nowrap}.a-pill .mk-ic{width:1.2em;height:1.2em;color:#8b8277}
.a-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;border-radius:1.6em;padding:1em 0;box-shadow:0 0 0 1px #ece6de,0 1.2em 2.4em -1.6em #3a1d0f55;flex:none}
.a-k{padding:0 1.3em;border-left:1px solid #eee9e2}.a-k:first-child{border:0}
.a-k small{display:block;color:#8b8277;white-space:nowrap}
.a-k>b{display:block;font-size:2.9em;font-weight:450;letter-spacing:-.035em;line-height:1.1;margin:.08em 0 .25em;font-variant-numeric:tabular-nums;white-space:nowrap}
.a-d{font-size:max(var(--mkmin),.88em);color:#8b8277;white-space:nowrap}.a-d i{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.a-d em{font-weight:600;border-radius:.45em;padding:.12em .5em;font-variant-numeric:tabular-nums}.a-d em.up{background:#e4f6e9;color:#15803d}.a-d em.dn{background:#fde7e1;color:#c2410c}
.a-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:1em;flex:1;min-height:0}
.a-row3{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1em;flex:none;height:11.2em}
.a-card{position:relative;background:#fff;border-radius:1.6em;padding:1em 1.15em;display:flex;flex-direction:column;min-height:0;box-shadow:0 0 0 1px #ece6de,0 1.2em 2.4em -1.6em #3a1d0f55}
.a-ch{display:flex;align-items:center;gap:1em;flex:none;white-space:nowrap}.a-ch>b{font-size:max(var(--mkmin),1.15em);font-weight:600;margin-right:auto}
.a-go{width:1.9em;height:1.9em;border-radius:.6em;display:grid;place-items:center;color:#8b8277;background:#f5f2ee}.a-go .mk-ic{width:1.15em;height:1.15em}
.a-fun{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55em;margin-top:.8em}
.a-fcw{display:flex;flex-direction:column;gap:.45em;min-height:0}
.a-fcol{flex:1;min-height:0;position:relative;border-radius:.95em;overflow:visible;background:repeating-linear-gradient(135deg,#1a16120d 0 .28em,transparent .28em .56em)}
.a-fb{position:absolute;left:0;right:0;bottom:0;height:var(--h);border-radius:.95em;background:linear-gradient(#ff5a2e,#ff4a1c);transform-origin:bottom}.a-fb.pk{background:#ffe3d9}
.a-fv{position:absolute;left:0;right:0;bottom:.65em;text-align:center;color:#fff;font-weight:600;font-size:max(var(--mkmin),.95em);font-variant-numeric:tabular-nums;white-space:nowrap}.a-fv.dk{color:#1a1612}
.a-fch{position:absolute;left:50%;bottom:calc(var(--h) + .5em);transform:translateX(-50%);background:#fff;border-radius:.6em;padding:.15em .55em;font-size:max(var(--mkmin),.82em);font-weight:600;color:#c2410c;white-space:nowrap;box-shadow:0 .2em .8em -.2em #3a1d0f66,0 0 0 1px #f1e8de}
.a-fl{font-size:max(var(--mkmin),.88em);color:#8b8277;text-align:center;white-space:nowrap}
.a-pop{position:absolute;right:1.6em;top:3.4em;background:#16a34a;color:#fff;border-radius:2em;padding:.1em .7em;font-size:max(var(--mkmin),.9em);opacity:0;white-space:nowrap}.a-pop.on{animation:kf-pop 2.6s ease-out}
@keyframes kf-pop{0%{opacity:0;transform:translateY(.8em)}12%{opacity:1;transform:none}60%{opacity:1;transform:translateY(-1em)}100%{opacity:0;transform:translateY(-1.6em)}}
.a-lg{display:inline-flex;align-items:center;gap:.45em;font-size:max(var(--mkmin),.88em);color:#6d655a}.a-lg i{width:.8em;height:.8em;border-radius:.25em;background:var(--c)}
.a-plot{position:relative;flex:1;min-height:0;margin-top:.7em}.a-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.a-dot{position:absolute;right:-.4em;top:calc(18% - .4em);width:.8em;height:.8em;border-radius:50%;background:#ff4a1c;box-shadow:0 0 0 .2em #fff}
.a-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#ff4a1c;animation:kf-ring 2.4s ease-out infinite}
@keyframes kf-ring{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(2.8);opacity:0}}
.a-xl{display:flex;justify-content:space-between;color:#8b8277;font-size:max(var(--mkmin),.85em);margin-top:.45em;flex:none;font-variant-numeric:tabular-nums}
.a-chr{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-between;margin-top:.7em}
.a-cr{display:grid;grid-template-columns:2em 1fr auto;gap:.7em;align-items:center}
.a-cr .mk-lgm{width:2em;height:2em}
.a-bt{position:relative;display:block;height:1.05em}.a-bf{display:block;height:100%;width:var(--w);border-radius:.5em;background:#ffb9a3;transform-origin:left}
.a-bf.hl{background:repeating-linear-gradient(135deg,#ff4a1c 0 .35em,#ff7a55 .35em .7em)}
.a-tip{position:absolute;left:var(--w);top:50%;transform:translate(-50%,-50%);background:#1a1612;color:#fff;border-radius:.6em;padding:.2em .6em;font-size:max(var(--mkmin),.86em);font-weight:600;white-space:nowrap;box-shadow:0 .3em .9em -.2em #1a161299}
.a-bv{font-size:max(var(--mkmin),.92em);color:#6d655a;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.a-camps{padding-bottom:.7em}.a-ths{display:flex;gap:0;color:#8b8277;font-size:max(var(--mkmin),.82em);font-weight:500;margin-right:.4em}.a-ths i{font-style:normal;width:5em;text-align:right}
.a-ct{flex:1;min-height:0;display:grid;grid-template-columns:2em 1fr 5em 5em 5em 7em;gap:.7em;align-items:center;border-top:1px solid #f1ece5;font-size:max(var(--mkmin),.98em);white-space:nowrap}
.a-ct .mk-lgm{width:1.8em;height:1.8em}.a-ct>b{font-weight:550;overflow:hidden;text-overflow:ellipsis}.a-ct>span{text-align:right;font-variant-numeric:tabular-nums;color:#4a4238}.a-ro{font-weight:600;color:#15803d!important}
.a-ct .mk-bars2{height:1.5em;gap:.2em;margin-left:.6em}.a-ct .mk-bars2 i{--c:#8fd3a3;border-radius:.2em}
.a-gs{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6em;margin-top:.7em}
.a-g{border-radius:1em;padding:.75em .8em;display:flex;flex-direction:column;justify-content:space-between;min-height:0}.a-g small{font-size:max(var(--mkmin),.9em);font-weight:500;white-space:nowrap}.a-g>b{font-size:2.1em;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.a-g.g1{background:#e3f6e9;color:#166534}.a-g.g2{background:#e4eefc;color:#1d4e9e}.a-g.g3{background:#ff4a1c;color:#fff}

/* ===================== 2. SYSTEM ===================== */
.mk-system{background:#fff;color:#111;box-shadow:0 0 0 1px #e9ebe4,0 3em 6em -1.6em #4b6b2255,0 1.2em 2.6em -1em #0f172a22}
.mk-system .mk-in{flex-direction:column;background:#fafaf8}:where(.mk-system .mk-in *){box-sizing:border-box;margin:0;min-width:0}
.s-top{flex:none;height:4.9em;display:flex;align-items:center;gap:1.1em;padding:0 1.6em;background:#fff;border-bottom:1px solid #efefea}
.s-logo{display:flex;align-items:center;gap:.65em;font-weight:700;font-size:max(var(--mkmin),1.35em);letter-spacing:-.02em;width:7.7em;flex:none;white-space:nowrap}.s-logo .mk-lgm{width:1.8em;height:1.8em;border-radius:.55em}
.s-search{flex:0 1 25em;margin:0 auto;display:flex;align-items:center;gap:.7em;background:#f4f4ef;border-radius:2em;padding:.65em 1.2em;color:#8a8a80;white-space:nowrap;box-shadow:0 0 0 1px #ecece6}.s-search .mk-ic{width:1.3em;height:1.3em}
.s-newb{display:flex;align-items:center;gap:.5em;background:#111;color:#fff;border-radius:2em;padding:.65em 1.2em;font-weight:600;white-space:nowrap}.s-newb .mk-ic{width:1.2em;height:1.2em;color:#b6ea35;stroke-width:2.4}
.s-bell{position:relative;width:2.7em;height:2.7em;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1px #e6e6df;color:#4a4a42;flex:none;background:#fff}.s-bell .mk-ic{width:1.3em;height:1.3em}
.s-bell u{position:absolute;right:.65em;top:.6em;width:.6em;height:.6em;border-radius:50%;background:#ef4444;box-shadow:0 0 0 .18em #fff}
.s-body{flex:1;min-height:0;display:flex}
.s-side{width:12.8em;flex:none;background:#fff;padding:1.2em .9em 1.1em;display:flex;flex-direction:column;gap:.25em;border-right:1px solid #f1f1ec}
.s-n{display:flex;align-items:center;gap:.8em;padding:.68em .85em;border-radius:.95em;color:#4b4b44;position:relative;white-space:nowrap}.s-n .mk-ic{width:1.35em;height:1.35em;color:#80807a}
.s-n.on{background:#111;color:#fff;font-weight:600}.s-n.on .mk-ic{color:#b6ea35}.s-n.on::before{content:"";position:absolute;left:-.9em;top:.5em;bottom:.5em;width:.32em;border-radius:0 .4em .4em 0;background:#b6ea35}
.s-n em{margin-left:auto;font-style:normal;font-size:max(var(--mkmin),.82em);font-weight:600;background:#f1f1ec;color:#5c5c54;border-radius:2em;padding:.05em .6em}
.s-me{margin-top:auto;display:flex;align-items:center;gap:.7em;padding:.8em .5em 0;border-top:1px solid #f1f1ec;white-space:nowrap}.s-me .mk-pa{width:2.7em;height:2.7em}.s-me b{display:block}.s-me small{color:#8a8a80;font-size:max(var(--mkmin),.85em)}
.s-main{flex:1;min-width:0;padding:1.25em 1.5em 1.3em;display:flex;flex-direction:column;gap:1em}
.s-mh{display:flex;align-items:flex-end;justify-content:space-between;flex:none}.s-mh h4{font-size:max(var(--mkmin),1.95em);font-weight:600;letter-spacing:-.03em;line-height:1.1}.s-mh small{color:#8a8a80;display:block;margin-top:.15em;white-space:nowrap}
.s-dr{display:flex;align-items:center;gap:.6em;background:#fff;border-radius:2em;padding:.6em 1.1em;box-shadow:0 0 0 1px #e9e9e2;color:#3a3a34;white-space:nowrap}.s-dr .mk-ic{width:1.25em;height:1.25em;color:#80807a}
.s-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em;flex:none}
.s-kp{background:#fff;border-radius:1.3em;padding:.85em 1.1em .8em;box-shadow:0 0 0 1px #eeeee8,0 1em 2em -1.6em #2f3a1c55}
.s-kl{display:flex;align-items:center;gap:.6em;color:#4b4b44;font-weight:500;white-space:nowrap}.s-ki{width:1.9em;height:1.9em;border-radius:.65em;background:#f1f6e4;color:#5b8a14;display:grid;place-items:center}.s-ki .mk-ic{width:1.15em;height:1.15em}
.s-dots{margin-left:auto;color:#a1a198}.s-dots .mk-ic{width:1.3em;height:1.3em;fill:currentColor;stroke:none}
.s-kp>b{display:block;font-size:2.35em;font-weight:600;letter-spacing:-.035em;line-height:1.1;margin:.25em 0 .15em;white-space:nowrap;font-variant-numeric:tabular-nums}
.s-kd{display:flex;align-items:center;gap:.5em;font-size:max(var(--mkmin),.88em);font-weight:600;white-space:nowrap}.s-kd i{font-style:normal;font-weight:400;color:#8a8a80;overflow:hidden;text-overflow:ellipsis}.s-kd.up{color:#16a34a}.s-kd.dn{color:#dc2626}
.s-grid{flex:1;min-height:0;display:grid;grid-template-columns:17em minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr 1fr;gap:1em}
.s-c{background:#fff;border-radius:1.3em;padding:.95em 1.1em;box-shadow:0 0 0 1px #eeeee8,0 1em 2em -1.6em #2f3a1c55;display:flex;flex-direction:column;min-height:0;position:relative}
.s-ch{display:flex;align-items:center;gap:.7em;flex:none;margin-bottom:.55em;white-space:nowrap}.s-ch>b{font-size:max(var(--mkmin),1.15em);font-weight:600;margin-right:auto}
.s-chip{display:inline-flex;align-items:center;gap:.4em;font-size:max(var(--mkmin),.88em);font-weight:600;background:#f3f3ee;color:#4b4b44;border-radius:2em;padding:.18em .75em}.s-chip .mk-ic{width:1.1em;height:1.1em}.s-chip.up{background:#e4f6e9;color:#15803d}
.s-gauge{grid-row:1/3}
.s-gw{position:relative;margin:.6em 0 0;flex:none}.s-gw svg{display:block;width:100%;height:auto;overflow:visible}
.s-gv{position:absolute;left:0;right:0;bottom:0;text-align:center}.s-gv b{display:block;font-size:4em;font-weight:600;letter-spacing:-.04em;line-height:.95;font-variant-numeric:tabular-nums}.s-gv small{color:#8a8a80;font-size:max(var(--mkmin),.9em)}
.s-gp{color:#6a6a62;font-size:max(var(--mkmin),.92em);line-height:1.45;margin-top:1.1em;white-space:normal}
.s-gx{margin-top:auto;padding-top:.9em;border-top:1px solid #f1f1ec}.s-gx>b{display:block;font-size:max(var(--mkmin),1.08em);margin-bottom:.6em;white-space:nowrap}
.s-grs{display:flex;flex-direction:column;gap:.6em}.s-gr{display:grid;grid-template-columns:4.6em 1fr 2.6em;gap:.6em;align-items:center;font-size:max(var(--mkmin),.92em);color:#4b4b44;white-space:nowrap}.s-gr b{text-align:right;font-variant-numeric:tabular-nums}
.s-bar{display:block;height:.45em;border-radius:1em;background:#f0f0ea;overflow:hidden}.s-bar i{display:block;height:100%;width:var(--w);background:var(--c,#6bbf3b);border-radius:1em;transform-origin:left}
.s-st{display:grid;grid-template-columns:2.4em 1fr auto;gap:.8em;align-items:center;padding:.55em 0;border-top:1px solid #f4f4ef;flex:1;min-height:0}.s-st:first-of-type{border-top:0}
.s-sti{width:2.4em;height:2.4em;border-radius:.8em;background:#f1f6e4;color:#5b8a14;display:grid;place-items:center}.s-sti .mk-ic{width:1.3em;height:1.3em}
.s-stn b{display:block;font-weight:550;font-size:max(var(--mkmin),.98em);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:.35em}
.s-stq{font-size:max(var(--mkmin),.92em);color:#6a6a62;white-space:nowrap;display:flex;align-items:center;gap:.5em}.s-stq b{color:#111;font-variant-numeric:tabular-nums}.s-stq em{font-style:normal;font-weight:700;font-size:max(var(--mkmin),.82em);background:#fff0d6;color:#b45309;border-radius:2em;padding:.05em .6em}
.s-st.low .s-sti{background:#fff0d6;color:#d97706}.s-st.low .s-bar i{background:#f59e0b}
.s-em{display:grid;grid-template-columns:2.8em 1fr auto;gap:.8em;align-items:center;padding:.4em 0;flex:1;min-height:0;border-top:1px solid #f4f4ef}.s-em:first-of-type{border-top:0}
.s-em .mk-pa{width:2.8em;height:2.8em}.s-emn b{display:block;font-weight:550;white-space:nowrap}.s-emn small{color:#8a8a80;font-size:max(var(--mkmin),.88em);white-space:nowrap}.s-ea{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.s-fv{display:flex;align-items:flex-end;justify-content:space-between;flex:none;margin-bottom:.4em}.s-fv small{display:block;color:#8a8a80;font-size:max(var(--mkmin),.9em)}.s-fv b{display:block;font-size:max(var(--mkmin),1.9em);font-weight:600;letter-spacing:-.03em;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.s-lg{display:inline-flex;align-items:center;gap:.4em;font-size:max(var(--mkmin),.82em);color:#6a6a62;white-space:nowrap}.s-lg i{width:.75em;height:.75em;border-radius:.25em;background:var(--c);margin-left:.7em}.s-lg i:first-child{margin-left:0}
.s-bars{flex:1;min-height:0;gap:.9em;padding-top:.3em}.s-bars>span{flex:1;display:flex;align-items:flex-end;gap:.2em;height:100%}.s-bars>span>i{border-radius:.3em .3em .1em .1em}
.s-tk{display:grid;grid-template-columns:1.5em 1fr auto;gap:.8em;align-items:center;padding:.45em 0;border-top:1px solid #f4f4ef;flex:1;min-height:0;white-space:nowrap}.s-tk:first-of-type{border-top:0}
.s-tk>i{width:1.5em;height:1.5em;border-radius:50%;box-shadow:0 0 0 1.5px #d4d4cc inset;display:grid;place-items:center;color:#fff}.s-tk.done>i{background:#111;box-shadow:none}.s-tk>i .mk-ic{width:1em;height:1em;stroke-width:2.6}
.s-tk>span{overflow:hidden;text-overflow:ellipsis}.s-tk.done>span{color:#8a8a80;text-decoration:line-through}
.s-tk em{font-style:normal;font-size:max(var(--mkmin),.8em);font-weight:600;color:var(--c);background:color-mix(in srgb,var(--c) 12%,#fff);border-radius:2em;padding:.12em .7em}

/* ===================== 3. PORTAL ===================== */
.mk-portal{background:#f1effc;color:#1b1840;box-shadow:0 0 0 1px #e1dcf6,0 3em 6em -1.6em #6a5ae066,0 1.2em 2.6em -1em #2a1f7322}
.mk-portal .mk-in{flex-direction:column;background:radial-gradient(44em 26em at 100% 0,#e0dafd 0,transparent 68%),radial-gradient(34em 22em at 0 100%,#fde4f1 0,transparent 70%),#f4f2fd}
:where(.mk-portal .mk-in *){box-sizing:border-box;margin:0;min-width:0}
.p-top{flex:none;height:4.8em;display:flex;align-items:center;gap:1em;padding:0 1.7em}
.p-logo{display:flex;align-items:center;gap:.65em;font-size:max(var(--mkmin),1.3em);font-weight:700;letter-spacing:-.02em;white-space:nowrap}.p-logo .mk-lgm{width:1.9em;height:1.9em;border-radius:.6em}
.p-tabs{margin-left:2.2em;display:flex;gap:.4em;font-size:1em}.p-tabs>span{padding:.5em 1.15em;border-radius:2em;color:#59557f;white-space:nowrap;box-shadow:0 0 0 1px #e1dcf6;background:#ffffffa8}.p-tabs>.on{background:#fff;color:#1b1840;font-weight:600;box-shadow:0 0 0 1.5px #6a5ae0,0 .4em 1em -.4em #6a5ae0aa}
.p-sp{margin-left:auto}.p-tabs+.p-sp{margin-left:auto}
.p-ib{position:relative;width:2.7em;height:2.7em;border-radius:50%;background:#fff;display:grid;place-items:center;color:#4a4670;box-shadow:0 0 0 1px #e1dcf6;flex:none}.p-ib .mk-ic{width:1.3em;height:1.3em}
.p-ib u{position:absolute;right:.65em;top:.6em;width:.6em;height:.6em;border-radius:50%;background:#ff5a7a;box-shadow:0 0 0 .18em #fff}
.p-top>.mk-pa{width:2.8em;height:2.8em;box-shadow:0 0 0 .2em #fff,0 0 0 .34em #6a5ae0}
.p-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 21.5em;gap:1.1em;padding:.3em 1.7em 1.6em}
.p-l,.p-r{display:flex;flex-direction:column;gap:1em;min-height:0;min-width:0}
.p-gr{display:flex;align-items:flex-end;justify-content:space-between;flex:none}.p-gr h4{margin-bottom:.12em;font-size:2em;font-weight:600;letter-spacing:-.03em;line-height:1.15;white-space:nowrap}.p-gr small{color:#6c6896;display:block;margin-top:.2em;white-space:nowrap}
.p-cta{display:flex;align-items:center;gap:.5em;background:linear-gradient(135deg,#7b6cf0,#5a49d6);color:#fff;border-radius:2em;padding:.65em 1.25em;font-weight:600;white-space:nowrap;box-shadow:0 .7em 1.4em -.6em #5a49d6cc}.p-cta .mk-ic{width:1.2em;height:1.2em;stroke-width:2.4}
.p-sec{display:flex;align-items:center;justify-content:space-between;flex:none;margin-top:.1em}.p-sec>b{font-size:max(var(--mkmin),1.2em);font-weight:600}
.p-chips{display:flex;gap:.4em}.p-chips>span{padding:.28em .9em;border-radius:2em;color:#6c6896;font-size:max(var(--mkmin),.92em);box-shadow:0 0 0 1px #e1dcf6;background:#ffffff90;white-space:nowrap}.p-chips>.on{background:#fff;color:#1b1840;font-weight:600}
.p-all{display:flex;align-items:center;gap:.35em;color:#5a49d6;font-weight:600;font-size:max(var(--mkmin),.95em)}.p-all .mk-ic{width:1.1em;height:1.1em}
.p-os{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.9em;flex:none}
.p-o{background:#fff;border-radius:1.5em;padding:.95em 1em;box-shadow:0 0 0 1px #e8e4fb,0 1.2em 2.2em -1.5em #5a49d680;display:flex;flex-direction:column;gap:.6em}
.p-oh{display:flex;align-items:center;gap:.7em}.p-oh .mk-lgm{width:2.6em;height:2.6em;border-radius:.8em}.p-on{min-width:0}.p-on b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}.p-on small{color:#7f7ba6;font-size:max(var(--mkmin),.88em);white-space:nowrap}
.p-st{align-self:flex-start;font-size:max(var(--mkmin),.86em);font-weight:600;border-radius:2em;padding:.18em .8em;white-space:nowrap;background:#e9e5ff;color:#4a39c8}.p-st.st4{background:#dcf5e5;color:#15803d}.p-st.st2{background:#fff0d6;color:#b45309}
.p-trk{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:center;height:1.3em;margin:.1em 0}
.p-trk u{position:absolute;left:12.5%;right:12.5%;top:50%;height:.28em;margin-top:-.14em;border-radius:1em;background:#e8e4fb;text-decoration:none}
.p-trk u.pg{right:auto;width:calc((var(--n) - 1) * 25%);background:linear-gradient(90deg,#8b7cf5,#5a49d6);transform-origin:left}
.p-trk i{position:relative;z-index:1;justify-self:center;width:.95em;height:.95em;border-radius:50%;background:#fff;box-shadow:0 0 0 .22em #e8e4fb}.p-trk i.d{background:#5a49d6;box-shadow:0 0 0 .22em #fff}.p-trk i.c{background:#fff;box-shadow:0 0 0 .3em #5a49d6}
.p-of{display:flex;justify-content:space-between;align-items:flex-end;gap:.5em;border-top:1px solid #f0edfd;padding-top:.6em;white-space:nowrap}.p-of small{display:block;color:#7f7ba6;font-size:max(var(--mkmin),.86em)}.p-of b{font-size:max(var(--mkmin),1.15em);font-variant-numeric:tabular-nums}
.p-ds{display:flex;flex-direction:column;gap:.55em;flex:none}
.p-d{display:grid;grid-template-columns:2.6em 1fr auto 2.4em;gap:.9em;align-items:center;background:#fff;border-radius:1.2em;padding:.6em .8em;box-shadow:0 0 0 1px #e8e4fb;white-space:nowrap}
.p-di{width:2.5em;height:2.5em;border-radius:.8em;background:#ece8ff;color:#5a49d6;display:grid;place-items:center}.p-di .mk-ic{width:1.35em;height:1.35em}
.p-dn b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}.p-dn small{color:#7f7ba6;font-size:max(var(--mkmin),.88em)}
.p-pst{font-size:max(var(--mkmin),.86em);font-weight:600;border-radius:2em;padding:.18em .8em;background:#fff0d6;color:#b45309}.p-pst.ok{background:#dcf5e5;color:#15803d}
.p-dd{width:2.3em;height:2.3em;border-radius:50%;background:#f0edfd;color:#5a49d6;display:grid;place-items:center}.p-dd .mk-ic{width:1.2em;height:1.2em}
.p-r{gap:.9em}
.p-bal{border-radius:1.6em;padding:1.05em 1.2em;color:#fff;background:radial-gradient(14em 9em at 100% 0,#9b8dff 0,transparent 70%),linear-gradient(150deg,#4f3fd0,#2f2494);box-shadow:0 1.2em 2.4em -1.2em #3a2cb0cc;flex:none}
.p-bh{display:flex;justify-content:space-between;align-items:center;opacity:.85}.p-bi{width:2.2em;height:2.2em;border-radius:.7em;background:#ffffff26;display:grid;place-items:center}.p-bi .mk-ic{width:1.2em;height:1.2em}
.p-bn{display:block;font-size:3em;font-weight:550;letter-spacing:-.04em;line-height:1.1;margin:.1em 0 .45em;white-space:nowrap;font-variant-numeric:tabular-nums}
.p-bo{display:flex;align-items:center;gap:.8em;background:#ffffff1f;border-radius:1em;padding:.5em .8em}.p-bn2{display:flex;align-items:center;gap:.6em;flex:none}.p-bn2 .mk-ic{width:1.5em;height:1.5em;color:#ffd166;fill:#ffd166;stroke:none}.p-bn2 small{display:block;opacity:.75;font-size:max(var(--mkmin),.82em);line-height:1.25}.p-bn2 b{display:block;font-variant-numeric:tabular-nums;line-height:1.15}
.p-bm{flex:1;display:block;height:.5em;border-radius:1em;background:#ffffff33;overflow:hidden}.p-bm i{display:block;height:100%;width:var(--w);border-radius:1em;background:linear-gradient(90deg,#ffd166,#ff8a5c);transform-origin:left}
.p-due{display:flex;align-items:center;justify-content:space-between;margin-top:.7em}.p-due small{display:block;opacity:.75;font-size:max(var(--mkmin),.88em)}.p-due b{font-size:max(var(--mkmin),1.5em);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.p-pay{background:#ff6b57;color:#fff;border-radius:.9em;padding:.55em 1.2em;font-weight:650;white-space:nowrap;box-shadow:0 .6em 1.2em -.5em #ff6b57cc}
.p-mg{background:#fff;border-radius:1.5em;padding:.95em 1.05em;box-shadow:0 0 0 1px #e8e4fb,0 1.2em 2.2em -1.5em #5a49d680;display:flex;flex-direction:column;gap:.7em;flex:none}
.p-mh{display:flex;align-items:center;gap:.75em}.p-mh .mk-pa{width:3.2em;height:3.2em;box-shadow:0 0 0 .2em #fff,0 0 0 .34em #8b7cf5}.p-mh small{display:block;color:#7f7ba6;font-size:max(var(--mkmin),.88em)}.p-mh b{font-size:max(var(--mkmin),1.1em)}
.p-on2{margin-left:auto;display:flex;align-items:center;gap:.4em;font-size:max(var(--mkmin),.85em);color:#15803d;font-weight:600}.p-on2 i{width:.6em;height:.6em;border-radius:50%;background:#22c55e}
.p-bub{background:#f0edff;border-radius:1.2em 1.2em 1.2em .3em;padding:.65em .9em;line-height:1.35;color:#2c2760}
.p-inp{display:flex;align-items:center;border-radius:2em;box-shadow:0 0 0 1px #e1dcf6;padding:.35em .4em .35em 1em;color:#9894bd;white-space:nowrap;overflow:hidden}
.p-snd{margin-left:auto;width:2.3em;height:2.3em;border-radius:50%;background:#5a49d6;color:#fff;display:grid;place-items:center;flex:none}.p-snd .mk-ic{width:1.2em;height:1.2em}
.p-nts{background:#ffffffb0;border-radius:1.4em;padding:.85em 1em;box-shadow:0 0 0 1px #e8e4fb;display:flex;flex-direction:column;gap:.5em;flex:1;min-height:0}.p-nts>b{font-size:max(var(--mkmin),1.05em)}
.p-nt{display:grid;grid-template-columns:.7em 1fr auto;gap:.7em;align-items:center;font-size:max(var(--mkmin),.95em);white-space:nowrap}.p-nt i{width:.7em;height:.7em;border-radius:50%;background:var(--c)}.p-nt>span{overflow:hidden;text-overflow:ellipsis}.p-nt small{color:#9894bd}

/* ===================== floats positions ===================== */
[data-mk-stage=ads] .mk-f1{right:2%;bottom:1.5%;width:27em}[data-mk-stage=ads] .mk-f2{left:2%;bottom:3%;width:29em}
[data-mk-stage=sys] .mk-f1{left:2%;bottom:3%;width:29em}[data-mk-stage=sys] .mk-f2{right:2%;bottom:3%;width:32em}
[data-mk-stage=portal] .mk-f1{left:1%;bottom:3%;width:24em}[data-mk-stage=portal] .mk-f2{left:34.6%;bottom:1.5%;width:24em}[data-mk-stage=portal] .mk-f3{right:1%;bottom:3%;width:24em}

/* ===================== 4. SERVICES STACK (bento collage) ===================== */
.mk-stk{aspect-ratio:100/82;margin:0 auto}
.k-wrap{position:absolute;inset:0;z-index:2}
.k-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.k-ln{animation:kf-flow 3s linear infinite}
@keyframes kf-flow{to{stroke-dashoffset:-3.2}}
.k-c{position:absolute;background:#fff;border-radius:2em;box-shadow:0 0 0 1px #e9e6f5,0 2em 3.6em -1.6em #4b3fc866,0 .5em 1.2em #1b184012;color:#1b1840;overflow:hidden;font-size:1em;white-space:nowrap}
.k-c .mk-ic{width:1.4em;height:1.4em}
.k-tag{position:absolute;display:inline-flex;align-items:center;gap:.4em;font-size:max(var(--mkmin),.82em);font-weight:650;background:#ece8ff;color:#4a39c8;border-radius:2em;padding:.25em .8em .25em .6em}.k-tag .mk-ic{width:1.2em;height:1.2em}
.k-tag.r{background:#e8f6d4;color:#4d7c0f}.k-tag.b{background:#dff1ff;color:#0369a1}.k-tag.o{background:#ffe9df;color:#d9380f}
/* site */
.k-site{left:0;top:3em;width:33em;height:24em;background:#fffaf4;box-shadow:0 0 0 1px #f1e6d8,0 2em 3.6em -1.6em #e0783c77,0 .5em 1.2em #7a3b1a14}
.k-bar{display:flex;align-items:center;gap:.45em;padding:.75em 1.1em;border-bottom:1px solid #f3e9dc;background:#fff}.k-bar>i{width:.75em;height:.75em;border-radius:50%;background:#e9ddcc}.k-bar>i:first-child{background:#ff7a59}
.k-url{margin:0 auto;display:flex;align-items:center;gap:.4em;font-size:max(var(--mkmin),.82em);color:#8a7a68;background:#f6efe6;border-radius:2em;padding:.2em 1em}.k-url .mk-ic{width:1em;height:1em}
.k-sb{padding:.9em 1.3em 1em;display:flex;flex-direction:column;gap:.7em;height:calc(100% - 2.9em)}
.k-sn{display:flex;align-items:center;gap:1em;font-size:max(var(--mkmin),.88em)}.k-sn b{font-size:max(var(--mkmin),1.3em);margin-right:auto}.k-sn u{width:3.2em;height:.5em;border-radius:1em;background:#eadfce;text-decoration:none}
.k-hero{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1em}
.k-ht{display:flex;flex-direction:column;gap:.7em;justify-content:center;white-space:normal}.k-ht b{font-size:max(var(--mkmin),1.95em);line-height:1.08;letter-spacing:-.03em}.k-ht small{color:#8a7a68;font-size:max(var(--mkmin),.95em);line-height:1.35}
.k-btn{align-self:flex-start;background:#1b1840;color:#fff;border-radius:2em;padding:.5em 1.2em;font-weight:600;font-size:max(var(--mkmin),.92em);white-space:nowrap}
.k-hv{position:relative;border-radius:1.4em;background:linear-gradient(150deg,#ffd9b3,#ff9d6b 60%,#ff7a59);overflow:hidden}
.k-tile{position:absolute;display:flex;align-items:center;gap:.6em;background:#fff;border-radius:1em;padding:.5em .8em .5em .5em;box-shadow:0 .8em 1.6em -.6em #7a3b1a66;font-size:max(var(--mkmin),.95em)}.k-tile .mk-lgm{width:2.3em;height:2.3em}.k-tile b{font-variant-numeric:tabular-nums}
.k-tile.a{left:.9em;top:1em}.k-tile.b{right:.9em;bottom:1em}
.k-site .k-tag{right:1em;top:.55em;background:#f6efe6;color:#7a3b1a}
/* dashboard */
.k-dash{left:35.5em;top:0;width:42.5em;height:27em;padding:1.3em 1.5em;display:flex;flex-direction:column}
.k-dh{display:flex;align-items:center;gap:.9em}.k-di{width:3em;height:3em;border-radius:1em;background:#ece8ff;color:#5a49d6;display:grid;place-items:center;flex:none}
.k-dl small{display:block;color:#7f7ba6;font-size:max(var(--mkmin),.9em)}.k-dl b{display:block;font-size:2.5em;letter-spacing:-.035em;font-weight:500;line-height:1.1;font-variant-numeric:tabular-nums}
.k-up{font-style:normal;font-weight:650;font-size:max(var(--mkmin),.88em);background:#e4f6e9;color:#15803d;border-radius:.5em;padding:.15em .55em}
.k-dash .k-tag{position:static;margin-left:auto;align-self:flex-start}
.k-chart{position:relative;flex:1;min-height:0;margin-top:.6em}.k-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.k-dot{position:absolute;right:-.4em;top:calc(10% - .4em);width:.8em;height:.8em;border-radius:50%;background:#6a5ae0;box-shadow:0 0 0 .22em #fff}.k-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#6a5ae0;animation:kf-ring 2.4s ease-out infinite}
.k-dx{display:flex;justify-content:space-between;color:#9894bd;font-size:max(var(--mkmin),.82em);margin-top:.5em;flex:none}
/* phone-style bot */
.k-bot{left:2em;top:30em;width:21em;height:34em;border-radius:3em;background:#f5f3ff;padding:1.2em 1em 1em;display:flex;flex-direction:column;gap:.8em;box-shadow:0 0 0 .5em #1b1840,0 2em 3.6em -1.4em #1b1840aa}
.k-bh{display:flex;align-items:center;gap:.7em;padding-top:.4em}.k-bl .mk-lgm{width:2.8em;height:2.8em}.k-bh small{display:block;color:#15803d;font-size:max(var(--mkmin),.82em)}.k-bh b{font-size:max(var(--mkmin),1.05em)}.k-bot .k-tag{position:static;margin-left:auto}
.k-ch2{flex:1;min-height:0;display:flex;flex-direction:column;gap:.6em;justify-content:center;white-space:normal}
.k-m{align-self:flex-start;max-width:86%;background:#fff;border-radius:1.2em 1.2em 1.2em .3em;padding:.55em .85em;font-size:max(var(--mkmin),.95em);line-height:1.3;box-shadow:0 .2em .6em -.3em #1b184033}.k-m.u{align-self:flex-end;background:#5a49d6;color:#fff;border-radius:1.2em 1.2em .3em 1.2em}
.k-trk{width:92%;max-width:none;display:flex;flex-direction:column;gap:.35em}.k-trk b{font-size:max(var(--mkmin),.95em)}.k-trk small{color:#5a49d6;font-weight:650;font-size:max(var(--mkmin),.9em)}
.k-in{display:flex;align-items:center;background:#fff;border-radius:2em;padding:.4em .45em .4em 1em;color:#9894bd;font-size:max(var(--mkmin),.88em);overflow:hidden}
.k-sn2{margin-left:auto;width:2.2em;height:2.2em;border-radius:50%;background:#5a49d6;color:#fff;display:grid;place-items:center;flex:none}.k-sn2 .mk-ic{width:1.15em;height:1.15em}
/* orders */
.k-ord{left:26em;top:30em;width:31em;height:34em;padding:1.3em 1.4em;display:flex;flex-direction:column;gap:.5em}
.k-oh{display:flex;align-items:center;justify-content:space-between;margin-bottom:.3em}.k-oh b{font-size:max(var(--mkmin),1.2em)}
.k-ob{display:inline-flex;align-items:center;gap:.3em;background:#1b1840;color:#fff;border-radius:2em;padding:.28em .9em .28em .6em;font-size:max(var(--mkmin),.88em);font-weight:600}.k-ob .mk-ic{width:1.1em;height:1.1em;stroke-width:2.4}
.k-or{display:grid;grid-template-columns:2.9em 1fr auto;grid-template-rows:auto auto;gap:.1em .8em;align-items:center;padding:.75em 0;border-top:1px solid #f0edfd;flex:1;min-height:0}
.k-or .mk-pa{grid-row:1/3;width:2.9em;height:2.9em}.k-or>b{font-size:max(var(--mkmin),1.02em);overflow:hidden;text-overflow:ellipsis}.k-am{grid-column:3;grid-row:1;font-weight:650;font-variant-numeric:tabular-nums}
.k-p{grid-column:2;grid-row:2;justify-self:start;font-size:max(var(--mkmin),.8em);font-weight:650;border-radius:2em;padding:.08em .7em}.k-p.w{background:#fff0d6;color:#b45309}.k-p.g{background:#dcf5e5;color:#15803d}.k-p.b{background:#e0efff;color:#1d4ed8}.k-p.x{background:#eeeef3;color:#5b5b70}
.k-or:nth-of-type(2){border-top:0}
/* ads + toast */
.k-ads{left:59.5em;top:30em;width:18.5em;height:17em;padding:1.1em 1.2em;display:flex;flex-direction:column;gap:.5em;background:linear-gradient(160deg,#fff,#fff4ee)}
.k-ah{display:flex;align-items:center;justify-content:space-between}.k-ads .k-tag{position:static}
.k-lgs{display:flex}.k-lgs .mk-lgm{width:2.2em;height:2.2em;margin-left:-.5em;box-shadow:0 0 0 .2em #fff;border-radius:.7em}.k-lgs .mk-lgm:first-child{margin-left:0}
.k-ar{display:flex;align-items:baseline;gap:.6em;margin-top:.3em}.k-ar small{color:#8b8277;font-weight:600}.k-ar b{font-size:2.9em;letter-spacing:-.04em;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.k-ab{flex:1;min-height:0;--c:#ff4a1c}
.k-toast{left:59.5em;top:49.5em;width:18.5em;height:14.5em;padding:1.2em;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.7em;background:linear-gradient(160deg,#fff,#eef9f1);animation:kf-nt 7s ease-in-out infinite 2s}
.k-ti .mk-pa{width:3.6em;height:3.6em;box-shadow:0 0 0 .22em #fff,0 0 0 .4em #22c55e}.k-tx b{display:block;font-size:max(var(--mkmin),1.1em)}.k-tx small{display:block;color:#15803d;font-weight:600}.k-ta{font-size:2em;font-weight:550;letter-spacing:-.03em;color:#15803d;font-variant-numeric:tabular-nums}
@keyframes kf-nt{0%,70%{transform:none}78%{transform:translateY(.8em)}86%{transform:translateY(-.4em)}94%,100%{transform:none}}
.mk-stage:not(.mk-inview) *,.mk-stage:not(.mk-inview) *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.mk-stage *,.mk-stage *::after{animation:none!important}.a-pop{opacity:0}}
@media (min-width:1024px){.svc-img .mk-stk{max-width:840px}}

/* ===================== mobile ===================== */
@media(max-width:640px){
  .mk-in{font-size:calc(100cqw/40)}
  .mk-system,.mk-ads,.mk-portal{aspect-ratio:4/5}
  .a-hm,.p-hm,.a-tr,.a-chan{display:none!important}
  /* ads */
  .mk-ads .mk-in{padding:1.4em;gap:1em}
  .a-kpis{grid-template-columns:1fr 1fr;row-gap:1.1em;padding:1.1em 0}.a-k:nth-child(3){border-left:0}.a-k>b{font-size:2.45em}
  .a-row{grid-template-columns:1fr}.a-ch>b{font-size:max(var(--mkmin),1.2em)}
  /* system */
  .s-top{height:4.4em;padding:0 1.2em;gap:.8em}.s-search{display:none}.s-newb{margin-left:auto}.s-logo{width:auto}
  .s-side{width:4.6em;padding:1em .5em;align-items:center}.s-n{padding:.8em;justify-content:center}.s-n>span,.s-n>em,.s-me>span{display:none}.s-n.on::before{left:-.5em}.s-me{padding:.8em 0 0;justify-content:center}
  .s-main{padding:1.1em 1.2em;gap:1em}.s-dr{display:none}.s-mh small{white-space:normal}
  .s-kpis{grid-template-columns:1fr 1fr}.s-kp:nth-child(3){display:none}.s-kp>b{font-size:2.1em}.s-kd i{display:none}
  .s-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr}.s-gauge{grid-row:1}.s-stock{grid-row:1}.s-team{grid-column:1/3}.s-fin,.s-tasks,.s-gx{display:none}
  .s-gv b{font-size:3.2em}.s-st{padding:.4em 0}.s-sti{display:none}.s-st{grid-template-columns:1fr auto}.s-stq em{display:none}
  .s-em{padding:.3em 0}.s-emn small{display:none}
  /* portal */
  .p-top{height:4.4em;padding:0 1.3em}.p-body{grid-template-columns:1fr;padding:.2em 1.3em 1.4em;gap:1em;grid-template-rows:auto auto}
  .p-gr h4{font-size:max(var(--mkmin),1.9em)}.p-gr small{white-space:normal}
  .p-os{grid-template-columns:1fr}.p-body{align-content:start}.p-bub{display:none}
  .p-bn{font-size:2.5em}.p-due{margin-top:.4em}
  /* floats under the window */
  .mk-sheen{display:none}
  .mk-f2,.mk-f3{display:none}
  [data-mk-stage] .mk-f1{top:auto;left:auto;right:2%;bottom:0;font-size:max(var(--mkmin),1.9em);width:19em}
  [data-mk-stage=sys] .mk-f1{left:2%;right:auto;width:21em}.mk-f1 .fl-bars,.mk-f1 .fl-amt{display:none}
  /* stack */
  .mk-stk{aspect-ratio:100/124}.mk-stk .mk-sc{font-size:calc(100cqw/48)}
  .k-links{display:none}.k-ads,.k-toast{display:none}
  .k-dash{left:0;top:0;width:48em;height:19em}
  .k-site{left:0;top:21.5em;width:27em;height:21em}.k-ht b{font-size:max(var(--mkmin),1.5em)}.k-ht small{display:none}.k-hv{display:none}.k-hero{grid-template-columns:1fr}.k-sn u{display:none}
  .k-bot{left:29.5em;top:21.5em;width:18.5em;height:37em}
  .k-ord{left:0;top:44.5em;width:27em;height:14.5em;padding:1em 1.1em}.k-or{padding:.45em 0}.k-or:nth-of-type(n+4){display:none}
}
.mk-stage,.mk-in,.mk-sc{--mkmin:10px}
.mk-in small{font-size:max(var(--mkmin),.83em)}
/* bot: real product photos (Unsplash, see public/mk/products/SOURCES.txt). The photo is a fixed-height box ABOVE the title; it can never overlap it. */
.mk-bot .mk-pi{overflow:hidden;flex:none}
.mk-bot .mk-pi .mk-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.mk-bot .mk-pi.big{height:8.6em}
.mk-bot .mk-mini .mk-pi{height:4.6em;margin-bottom:.45em}
.mk-bot .mk-hit,.mk-bot .mk-fav{z-index:1}
.mk-bot img.mk-bav{object-fit:cover;background:#fff;box-shadow:0 0 0 .2em #fff,0 .2em .8em #1f2a5a2e}
.mk-bot .mk-pinfo,.mk-bot .mk-mini b,.mk-bot .mk-mini .mk-price{position:relative;z-index:1}
.mk-bot img.mk-bav{border-radius:50%!important;width:3.4em;height:3.4em}
/* bot: compact photo list rows so both small cards stay fully visible above the pay button */
.mk-bot .mk-app{gap:.6em}
.mk-bot .mk-pi.big{height:9.8em}.mk-bot .mk-pi.big .mk-photo{object-position:22% 62%}
.mk-bot .mk-minis{gap:.6em}
.mk-bot .mk-mini{display:grid;grid-template-columns:4.2em 1fr;grid-template-rows:auto auto;column-gap:.7em;align-items:center;padding:.5em .7em .5em .5em;min-height:5.1em}
.mk-bot .mk-mini .mk-pi{grid-row:1/3;height:4.2em;width:4.2em;margin:0;border-radius:1.1em}
.mk-bot .mk-mini b{padding:0;align-self:end}
.mk-bot .mk-mini .mk-price{padding:0;align-self:start}
.mk-bot .mk-mini .mk-plus{display:none}
.mk-bot .mk-pi.big{height:8.9em}
.mk-bot .mk-mini{grid-template-columns:3.8em 1fr;min-height:4.6em;column-gap:.6em}
.mk-bot .mk-mini .mk-pi{height:3.8em;width:3.8em}
.mk-bot .mk-mini b{white-space:nowrap}
.k-am{font-size:max(var(--mkmin),1em)}
/* the second line (order count) no longer fits at a readable size: name + amount only */
.s-emn small{display:none}
.s-fv{flex-wrap:wrap;column-gap:.8em}.s-lg{font-size:max(var(--mkmin),.82em)}

/* Text-integrity guard (qa/mockups.mjs): floating cards size to their content so labels never run under avatars/icons
   or past the card edge, even when the font floor (--mkmin) makes em-based widths too narrow. */
.mk-f1{display:flex;justify-content:flex-start}@media(min-width:641px){.mk-f2,.mk-f3{display:flex;justify-content:flex-start}}
.mk-f>.mk-fc{width:max-content;min-width:100%;max-width:none;box-sizing:border-box;flex:none}
[data-mk-stage] .mk-f[style*="right"],[data-mk-stage=bot] .mk-f2,[data-mk-stage=bot] .mk-f1,[data-mk-stage=ai] .mk-f2{justify-content:flex-end}
.fl-tx{flex:1 1 auto}.fl-tx b,.fl-tx small{white-space:nowrap}
.mk-stars{flex:none}.mk-stars svg{flex:none;width:1.5em;height:1.5em}
.mk-rate .mk-row{flex-wrap:nowrap;gap:.8em}
.mk-tl4{gap:.2em}.mk-tl4 span{white-space:nowrap;font-size:max(var(--mkmin),.78em)}
.a-lg,.a-lg>span{white-space:nowrap;flex:none;min-width:max-content!important}
.k-in>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Zoom/laptop-width guard: the 10px font floor does not scale with the stage, so em-based layouts overflowed whenever the
   stage was narrower than ~667px (1024-1200px viewports, browser zoom 125-150%). On desktop the floor now scales with the
   stage (1.5cqw = 10px at the 667px design width), so every width is the same layout at a different scale. */
@media(min-width:641px){.mk-stage:not(.mk-stk) .mk-in,.mk-stage:not(.mk-stk) .mk-sc{--mkmin:1.5cqw}}

/* ===== phones, WebKit-proofing: rows keep their own height (never squeezed under their avatar), AI chat fills from the top ===== */
@media(max-width:640px){
  .mk-system{aspect-ratio:4/6}.mk-portal{aspect-ratio:4/5.9}
  .s-team{min-height:0}
  .s-em{flex:none;min-height:3.6em;padding:.4em 0}
  .s-em .mk-pa{width:2.6em;height:2.6em}
  .s-grid{grid-template-rows:auto auto}
  .mk-ai{aspect-ratio:4/5.2}
  .mk-ai .mk-log{justify-content:flex-start}
  .mk-ai .mk-src{row-gap:.45em}
  .mk-ai .mk-src{column-gap:.2em}
  .mk-ai .mk-src>span{flex:none;padding-inline:.35em}
  .mk-ai .mk-conf em{flex:none}
  .mk-f>.mk-fc{max-width:100%}
  .mk-f .fl-tx{min-width:0}
  .mk-stage:not(.mk-stk){margin-bottom:4.5rem}
}