/* Animated "1 website + 9 posts" device mockup (see mockup.js) */
.mk { position: relative; width: 100%; height: 100%; min-height: 340px; overflow: hidden; isolation: isolate; font-family: system-ui, "Noto Sans SC", sans-serif; }
.mk-glow { position: absolute; inset: -20%; z-index: -1; background: radial-gradient(circle at 30% 40%, rgba(255,122,69,.55), transparent 45%), radial-gradient(circle at 75% 70%, rgba(108,92,231,.55), transparent 45%); filter: blur(30px); animation: mk-drift 10s ease-in-out infinite alternate; }
@keyframes mk-drift { to { transform: translate(-6%, 4%) scale(1.08); } }

/* Browser window */
.mk-browser { position: absolute; left: 7%; top: 13%; width: 72%; aspect-ratio: 16 / 10.5; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); transform: perspective(1200px) rotateY(-8deg) rotateX(4deg); animation: mk-float 7s ease-in-out infinite; }
@keyframes mk-float { 50% { translate: 0 -8px; } }
.mk-bar { height: 26px; background: #ececf0; display: flex; align-items: center; gap: 5px; padding: 0 10px; }
.mk-bar i { width: 8px; height: 8px; border-radius: 50%; background: #ff5f57; }
.mk-bar i:nth-child(2) { background: #febc2e; }
.mk-bar i:nth-child(3) { background: #28c840; }
.mk-url { margin-left: 10px; flex: 1; max-width: 60%; background: #fff; border-radius: 6px; font-size: 10px; color: #666; padding: 2px 10px; overflow: hidden; white-space: nowrap; }
.mk-screen { position: relative; height: calc(100% - 26px); background: #111; }
.mk-site { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.mk-site.on { opacity: 1; }
.mk-site img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 4s ease-out; }
.mk-site.on img { transform: scale(1); }
.mk-site::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,.15)); }
.mk-nav { position: absolute; z-index: 1; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px; }
.mk-nav b { color: #fff; font-size: 12px; margin-right: auto; }
.mk-nav span { width: 26px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.6); }
.mk-nav em { width: 38px; height: 14px; border-radius: 7px; background: #ff7a45; }
.mk-hero { position: absolute; z-index: 1; left: 14px; bottom: 18%; width: 60%; color: #fff; }
.mk-hero h4 { font-size: clamp(13px, 1.7vw, 20px); line-height: 1.15; margin: 0 0 8px; font-weight: 800; translate: 0 10px; opacity: 0; transition: .6s .2s; }
.mk-hero p { height: 5px; width: 85%; border-radius: 3px; background: rgba(255,255,255,.55); margin: 0 0 5px; }
.mk-hero p.s { width: 60%; }
.mk-hero i { display: inline-block; margin-top: 6px; font-style: normal; font-size: 9px; font-weight: 700; background: #fff; color: #111; padding: 4px 9px; border-radius: 10px; translate: 0 10px; opacity: 0; transition: .6s .35s; }
.mk-site.on .mk-hero h4, .mk-site.on .mk-hero i { translate: 0 0; opacity: 1; }

/* Phone with 9-post grid */
.mk-phone { position: absolute; right: 6%; bottom: 7%; height: 84%; width: auto; max-width: 30%; aspect-ratio: 9 / 18.5; background: #fff; border-radius: 22px; border: 5px solid #1b1b1f; box-shadow: 0 30px 60px rgba(0,0,0,.5); overflow: hidden; padding: 16px 6px 6px; animation: mk-float 7s 1.5s ease-in-out infinite; }
.mk-notch { position: absolute; top: 4px; left: 50%; translate: -50% 0; width: 36%; height: 8px; border-radius: 4px; background: #1b1b1f; }
.mk-profile { display: flex; align-items: center; gap: 6px; padding: 4px 2px 8px; }
.mk-avatar { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(#ff7a45, #ffd166, #6c5ce7, #ff7a45); flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 3px #ff7a45; }
.mk-profile b { display: block; font-size: 9px; color: #111; }
.mk-profile small { font-size: 7px; color: #888; }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.mk-grid span { aspect-ratio: 1; overflow: hidden; background: #eee; opacity: 0; scale: .6; transition: opacity .4s, scale .45s cubic-bezier(.25,.8,.25,1); transition-delay: calc(var(--i) * .12s + .3s); }
.mk-in .mk-grid span { opacity: 1; scale: 1; }
.mk-grid img { width: 100%; height: 100%; object-fit: cover; }

/* Floating chips */
.mk-chip { position: absolute; z-index: 2; background: rgba(255,255,255,.95); color: #111; font-size: 13px; font-weight: 700; padding: 7px 13px; border-radius: 999px; box-shadow: 0 10px 24px rgba(0,0,0,.3); animation: mk-bob 4s ease-in-out infinite; white-space: nowrap; }
.mk-chip.c1 { right: 30%; bottom: 10%; animation-delay: -1s; }
.mk-chip.c2 { left: 4%; top: 6%; }
.mk-chip.c3 { right: 5%; top: 9%; background: #ff7a45; color: #fff; animation-delay: -2s; }
@keyframes mk-bob { 50% { translate: 0 -8px; } }

@media (max-width: 640px) {
  .mk { min-height: 260px; }
  .mk-chip { font-size: 11px; padding: 5px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk *, .mk { animation: none !important; transition: none !important; }
  .mk-grid span { opacity: 1; scale: 1; }
}