.mk-results .mk-section-heading { margin-bottom:clamp(18px,3vw,36px); }
.mk-landing .mk-ad-demo {
  --demo-accent:#d8c8ff;
  --demo-positive:#a2f2bd;
  --demo-ease:cubic-bezier(.22,1,.36,1);
  width:min(100%,980px);
  margin-inline:auto;
}
.mk-ad-demo-stage {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-height:clamp(340px,43vw,500px);
  padding:clamp(14px,4vw,48px);
  overflow:hidden;
  border:1px solid var(--mk-rim);
  border-radius:clamp(16px,3vw,30px);
  background:
    radial-gradient(ellipse at 50% 100%,#34254b 0,transparent 65%),
    radial-gradient(#c9b5f124 1px,transparent 1px) 50% 50% / 22px 22px,
    #0e0c14;
}
.mk-ad-demo-stage::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:radial-gradient(ellipse at center,#a783ed42,transparent 66%);
  opacity:0;
  pointer-events:none;
}
.mk-ad-demo[data-playing][data-step="result"] .mk-ad-demo-stage::before {
  animation:mk-demo-arrival 940ms var(--demo-ease);
}
@keyframes mk-demo-arrival {
  25% { opacity:1; transform:scale(.82); }
  to { opacity:0; transform:scale(1.18); }
}
.mk-ad-demo-stage > :is(.mk-ad-demo-compose,.mk-ad-demo-render,.mk-ad-demo-result) {
  grid-area:1 / 1;
  visibility:hidden;
  opacity:0;
  transform:translateY(18px) scale(.96);
  transition:opacity 280ms ease,transform 550ms var(--demo-ease),visibility 0s 550ms;
}
.mk-ad-demo[data-step="compose"] .mk-ad-demo-compose,
.mk-ad-demo[data-step="render"] .mk-ad-demo-render,
.mk-ad-demo:is([data-step="result"],[data-step="return"]) .mk-ad-demo-result {
  visibility:visible;
  opacity:1;
  transform:none;
  transition-delay:0s;
}
.mk-ad-demo-compose {
  display:grid;
  gap:14px;
  width:min(100%,640px);
  padding:clamp(14px,3vw,28px);
  border:1px solid #d8c8ff50;
  border-radius:20px;
  background:linear-gradient(150deg,#282139,#15121c 75%);
  box-shadow:0 24px 70px #0008;
}
.mk-ad-demo-label { color:var(--demo-accent); font-size:12px; font-weight:650; }
.mk-ad-demo-prompt {
  display:flex;
  align-items:flex-start;
  min-height:clamp(86px,12vw,125px);
  padding:clamp(12px,2vw,20px);
  border:1px solid var(--mk-rim);
  border-radius:12px;
  background:#100e16;
  font-size:clamp(18px,3vw,29px);
  line-height:1.25;
  letter-spacing:-.025em;
}
.mk-ad-demo[data-step="compose"] [data-demo-text]::after {
  content:'';
  display:inline-block;
  width:2px;
  height:.85em;
  margin-inline-start:3px;
  background:var(--demo-accent);
}
.mk-ad-demo-tools,.mk-ad-demo-templates { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.mk-ad-demo-tools { justify-content:space-between; gap:12px; }
.mk-ad-demo-templates span,.mk-ad-demo-generate {
  padding:8px 10px;
  border:1px solid var(--mk-rim);
  border-radius:9px;
  font-size:clamp(10px,1.5vw,13px);
  white-space:nowrap;
}
.mk-ad-demo-templates span { color:var(--mk-copy); }
.mk-ad-demo[data-selected] [data-demo-template] {
  border-color:var(--demo-accent);
  color:var(--demo-accent);
  background:#d8c8ff20;
  animation:mk-demo-select 380ms var(--demo-ease);
}
.mk-ad-demo-generate { color:#1b1526; background:var(--demo-accent); font-weight:750; }
@keyframes mk-demo-select { 40% { transform:scale(1.09); } }
.mk-ad-demo-render {
  display:grid;
  grid-template-columns:clamp(76px,16vw,148px) minmax(0,1fr);
  align-items:center;
  gap:clamp(12px,4vw,42px);
  width:min(100%,520px);
  padding:clamp(10px,2.6vw,24px);
  border:1px solid #d8c8ff50;
  border-radius:20px;
  background:linear-gradient(150deg,#2a223d,#15121c);
  box-shadow:0 24px 65px #0008,0 0 46px #aa80ff25;
  color:var(--demo-accent);
}
.mk-ad-demo-render-preview {
  position:relative;
  aspect-ratio:9 / 16;
  overflow:hidden;
  border:1px solid #d8c8ff48;
  border-radius:12px;
  background:#211732;
}
.mk-ad-demo-render-preview img { display:block; width:100%; height:100%; object-fit:cover; }
.mk-ad-demo-render-preview::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(#e3c7ff26 1px,transparent 1px),linear-gradient(90deg,#e3c7ff26 1px,transparent 1px);
  background-size:14px 14px;
}
.mk-ad-demo-render-preview i {
  position:absolute;
  inset:0 0 auto;
  height:2px;
  z-index:1;
  background:#f3e2ff;
  box-shadow:0 0 18px 5px #b683fa93;
  opacity:0;
}
.mk-ad-demo-render-status { display:grid; gap:8px; min-width:0; }
.mk-ad-demo-render-glyph { justify-self:start; font-size:clamp(30px,6vw,62px); line-height:1; text-shadow:0 0 24px #bb91ff8c; }
.mk-ad-demo-render-status strong { color:var(--text); font-size:clamp(16px,3vw,30px); line-height:1.12; letter-spacing:-.025em; }
.mk-ad-demo-render-status [data-demo-render-status] { color:var(--mk-copy); font-size:clamp(10px,1.6vw,13px); }
.mk-ad-demo-render-track { margin-top:4px; height:4px; overflow:hidden; border-radius:8px; background:#d8c8ff26; }
.mk-ad-demo-render-track i { display:block; width:100%; height:100%; border-radius:inherit; background:var(--demo-accent); transform:scaleX(0); transform-origin:left; }
.mk-ad-demo[data-step="render"] .mk-ad-demo-render-glyph { animation:mk-demo-energy 1.4s var(--demo-ease) both; }
.mk-ad-demo[data-step="render"] .mk-ad-demo-render-track i { animation:mk-demo-progress 2.16s ease-out forwards; }
.mk-ad-demo[data-step="render"] .mk-ad-demo-render-preview img { animation:mk-demo-develop 2.1s var(--demo-ease) both; }
.mk-ad-demo[data-step="render"] .mk-ad-demo-render-preview::after { animation:mk-demo-grid-out 2.12s ease-out both; }
.mk-ad-demo[data-step="render"] .mk-ad-demo-render-preview i { animation:mk-demo-scan 2s ease-in-out both; }
@keyframes mk-demo-develop {
  from { opacity:.16; filter:blur(12px) saturate(.4); transform:scale(1.14); }
  48% { opacity:.74; filter:blur(3px) saturate(.85); }
  to { opacity:1; filter:none; transform:none; }
}
@keyframes mk-demo-grid-out { 55% { opacity:.7; } to { opacity:0; } }
@keyframes mk-demo-scan {
  8% { opacity:1; }
  88% { opacity:1; }
  to { opacity:0; top:100%; }
}
@keyframes mk-demo-energy {
  0% { transform:scale(.4) rotate(-30deg); opacity:.3; }
  55% { transform:scale(1.24) rotate(20deg); }
  100% { transform:scale(1) rotate(0); opacity:1; }
}
@keyframes mk-demo-progress { to { transform:scaleX(1); } }
.mk-ad-demo-result {
  --demo-result-gap:clamp(20px,4vw,44px);
  --demo-payoff-width:clamp(200px,33vw,308px);
  display:grid;
  grid-template-columns:clamp(148px,21vw,210px) var(--demo-payoff-width);
  align-items:center;
  gap:var(--demo-result-gap);
}
.mk-ad-demo-art { overflow:hidden; border:1px solid var(--mk-rim); border-radius:16px; background:var(--mk-surface); box-shadow:0 18px 60px #0008; transition:translate 640ms var(--demo-ease); }
.mk-ad-demo[data-playing]:is([data-step="compose"],[data-step="render"],[data-step="result"]) .mk-ad-demo-art {
  translate:calc((var(--demo-payoff-width) + var(--demo-result-gap)) / 2) 0;
}
.mk-ad-demo-art video { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; }
.mk-ad-demo[data-playing][data-step="result"] .mk-ad-demo-art { animation:mk-demo-materialize 760ms var(--demo-ease) both; }
@keyframes mk-demo-materialize {
  from { transform:scale(.67) rotate(-9deg); clip-path:inset(0 0 100%); filter:blur(8px); }
  72% { transform:scale(1.035) rotate(1deg); clip-path:inset(0); filter:none; }
  to { transform:none; clip-path:inset(0); filter:none; }
}
.mk-ad-demo-profit {
  position:relative;
  overflow:hidden;
  display:grid;
  justify-items:center;
  gap:10px;
  padding:clamp(16px,3vw,32px);
  border:1px solid #a2f2bd68;
  border-radius:20px;
  background:linear-gradient(150deg,#233c36,#121c1d);
  box-shadow:0 20px 60px #0008,0 0 34px #86f5b522;
}
.mk-ad-demo-profit > span { color:#bfe6d3; font-size:clamp(10px,1.5vw,13px); font-weight:650; }
.mk-ad-demo-roas { display:flex; align-items:baseline; justify-content:center; gap:8px; }
.mk-ad-demo-roas > span { color:var(--demo-positive); font-size:clamp(10px,1.5vw,15px); font-weight:750; letter-spacing:.08em; }
.mk-ad-demo-profit strong { color:var(--demo-positive); font-size:clamp(48px,7.2vw,88px); font-variant-numeric:tabular-nums; line-height:.95; letter-spacing:-.065em; }
.mk-ad-demo-breakdown { display:grid; gap:9px; width:100%; margin-top:5px; }
.mk-ad-demo-breakdown > div { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:baseline; color:#cce8db; font-size:clamp(10px,1.5vw,13px); }
.mk-ad-demo-breakdown i { grid-column:1 / -1; width:37.037%; height:4px; border-radius:8px; background:#719c89; transform-origin:left center; }
.mk-ad-demo-breakdown > div:last-child i { width:100%; background:var(--demo-positive); box-shadow:0 0 12px #a2f2bd66; }
.mk-ad-demo[data-playing][data-step="result"] .mk-ad-demo-profit { visibility:hidden; }
.mk-ad-demo[data-playing][data-step="return"] .mk-ad-demo-profit { animation:mk-demo-profit-in 580ms var(--demo-ease) both; }
.mk-ad-demo[data-playing][data-step="return"] .mk-ad-demo-breakdown i { animation:mk-demo-bar-in 660ms var(--demo-ease) 220ms both; }
.mk-ad-demo[data-playing][data-step="return"] .mk-ad-demo-breakdown > div:last-child i { animation-delay:360ms; }
.mk-ad-demo[data-playing][data-step="return"] .mk-ad-demo-profit::after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 33%,#d7ffeb30 50%,transparent 67%);
  pointer-events:none;
  animation:mk-demo-shine 780ms ease-out 430ms both;
}
@keyframes mk-demo-profit-in {
  from { opacity:0; transform:translate(24px,16px) scale(.78); }
  68% { opacity:1; transform:translate(0,-3px) scale(1.045); }
  to { opacity:1; transform:none; }
}
@keyframes mk-demo-bar-in { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes mk-demo-shine { from { transform:translateX(-100%); } to { transform:translateX(100%); } }
.mk-ad-demo-pointer {
  position:absolute;
  inset:0 auto auto 0;
  z-index:2;
  width:25px;
  opacity:0;
  color:#fff;
  translate:12px 12px;
  pointer-events:none;
  filter:drop-shadow(0 2px 3px #0008);
  transition:translate 410ms var(--demo-ease),opacity 170ms ease;
}
.mk-ad-demo-pointer svg { display:block; width:100%; }
.mk-ad-demo[data-step="compose"] .mk-ad-demo-pointer { opacity:1; }
@media (max-width:600px) {
  .mk-ad-demo-stage { min-height:410px; }
  .mk-ad-demo-result { grid-template-columns:minmax(0,200px); justify-items:center; gap:14px; }
  .mk-ad-demo-art { width:122px; }
  .mk-ad-demo[data-playing]:is([data-step="compose"],[data-step="render"],[data-step="result"]) .mk-ad-demo-art { translate:0 68px; }
  .mk-ad-demo-profit { width:100%; padding:13px 18px; gap:6px; }
  .mk-ad-demo-breakdown { gap:7px; }
}
@media (prefers-reduced-motion:reduce) {
  .mk-ad-demo *, .mk-ad-demo *::after { animation:none!important; transition:none!important; }
}