/* ==========================================================================
   Kolpolok theme – product mockups (hero console, data stream, eSIM app).
   All colours derive from the palette variables.
   ========================================================================== */

.kpm-stage, .kpm-panel, .kpm-esim, .kpm-mini {
	--m-bg: color-mix(in srgb, var(--kp-text) 4%, var(--kp-bg));
	--m-panel: color-mix(in srgb, var(--kp-text) 7%, var(--kp-bg));
	--m-line: color-mix(in srgb, var(--kp-text) 11%, transparent);
	--m-text: var(--kp-text);
	--m-muted: var(--kp-muted);
	--m-accent: var(--kp-accent);
	--m-accent-rgb: var(--kp-accent-rgb);
	--m-on-accent: var(--kp-accent-ink);
	--m-shadow: 0 30px 60px -24px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .02) inset;
	font-family: var(--kp-font);
	color: var(--m-text);
	line-height: 1.3;
}
.kp-section--light :is(.kpm-stage, .kpm-panel, .kpm-esim, .kpm-mini) {
	--m-bg: #FFFFFF;
	--m-panel: color-mix(in srgb, var(--kp-ink) 4%, #FFFFFF);
	--m-accent: var(--kp-accent-deep);
	--m-accent-rgb: var(--kp-accent-deep-rgb);
	--m-on-accent: #FFFFFF;
	--m-shadow: 0 30px 60px -30px rgb(var(--kp-ink-rgb) / .35);
}
:is(.kpm-stage, .kpm-panel, .kpm-esim, .kpm-mini) b { font-weight: 600; }
:is(.kpm-stage, .kpm-panel, .kpm-esim, .kpm-mini) small { display: block; color: var(--m-muted); font-size: .72em; margin-top: 2px; }
:is(.kpm-stage, .kpm-panel, .kpm-esim, .kpm-mini) em { font-style: normal; }
:is(.kpm-stage, .kpm-panel, .kpm-esim, .kpm-mini) .kp-icon { width: 1em; height: 1em; }

/* Shared bits ------------------------------------------------------------ */
.kpm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.kpm-head small { margin: 0 0 2px; font-size: .78em; }
.kpm-head b { font-size: 1.2em; }
.kpm-live { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: .78em; font-weight: 600; color: var(--m-accent); background: rgb(var(--m-accent-rgb) / .14); white-space: nowrap; }
.kpm-live > i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: kpm-blink 1.6s ease-in-out infinite; }
.kpm-progress { display: block; height: 6px; border-radius: 6px; background: var(--m-line); overflow: hidden; }
.kpm-progress i { display: block; height: 100%; width: 64%; border-radius: inherit; background: var(--m-accent); animation: kpm-progress 6s ease-in-out infinite; }
.kpm-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--m-muted); }
.kpm-dot--go, .kpm-dot--done { background: var(--m-accent); }
.kpm-dot--warn { background: var(--kp-accent-2); }

/* Map -------------------------------------------------------------------- */
.kpm-map__svg { display: block; width: 100%; height: 100%; }
.kpm-map__svg .m-land { fill: color-mix(in srgb, var(--m-text) 5%, var(--m-bg)); }
.kpm-map__svg .m-water { fill: rgb(var(--m-accent-rgb) / .16); }
.kpm-map__svg .m-park { fill: rgb(var(--m-accent-rgb) / .08); }
.kpm-map__svg .m-road { fill: none; stroke: color-mix(in srgb, var(--m-text) 13%, transparent); stroke-width: 8; stroke-linecap: round; }
.kpm-map__svg .m-road--minor { stroke-width: 3; stroke: color-mix(in srgb, var(--m-text) 8%, transparent); }
.kpm-map__svg .m-route { fill: none; stroke: var(--m-accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 10; animation: kpm-dash 1.2s linear infinite; }
.kpm-map__svg .m-route--alt { stroke: var(--kp-accent-2); opacity: .8; }
.kpm-map__svg .m-car { fill: var(--m-accent); }
.kpm-map__svg .m-car--alt { fill: var(--kp-accent-2); }
.kpm-map__svg .m-car__halo { opacity: .25; }
.kpm-map__svg .m-pin { fill: var(--kp-accent-2); }
.kpm-map__svg .m-pin__halo { opacity: .25; transform-box: fill-box; transform-origin: center; animation: kpm-ping 2.4s ease-out infinite; }
.kpm-map__tag { position: absolute; left: 10px; top: 10px; padding: 5px 9px; border-radius: 8px; font-size: .75em; font-weight: 600; background: var(--m-bg); border: 1px solid var(--m-line); box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5); }
.kpm-map__zoom { position: absolute; right: 10px; bottom: 10px; display: grid; border-radius: 8px; overflow: hidden; border: 1px solid var(--m-line); background: var(--m-bg); }
.kpm-map__zoom i { font-style: normal; width: 22px; height: 22px; display: grid; place-items: center; font-size: 13px; color: var(--m-muted); }
.kpm-map__zoom i + i { border-top: 1px solid var(--m-line); }

/* Hero console ----------------------------------------------------------- */
.kpm-stage { position: relative; padding: 0 56px 40px; perspective: 2000px; font-size: 13.5px; }
.kpm-window {
	position: relative; border-radius: 18px; overflow: hidden; background: var(--m-bg); border: 1px solid var(--m-line); box-shadow: var(--m-shadow), 0 60px 120px -60px rgb(var(--m-accent-rgb) / .35);
	transform: rotateX(var(--rx, 7deg)) rotateY(var(--ry, 0deg)); transform-origin: 50% 0; transition: transform .6s var(--kp-ease);
}
.kpm-bar { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-bottom: 1px solid var(--m-line); }
.kpm-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--m-line); }
.kpm-bar span { margin: 0 auto; padding: 4px 40px; border-radius: 6px; background: var(--m-panel); color: var(--m-muted); font-size: .82em; }
.kpm-body { display: grid; grid-template-columns: 168px 1fr; }
.kpm-side { display: flex; flex-direction: column; gap: 3px; padding: 14px 10px; border-right: 1px solid var(--m-line); }
.kpm-logo { width: 26px; height: 26px; border-radius: 8px; background: var(--m-accent); margin: 0 0 14px 6px; box-shadow: inset 0 0 0 7px rgb(0 0 0 / .18); }
.kpm-nav { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--m-muted); font-size: .9em; }
.kpm-nav em { white-space: nowrap; }
.kpm-nav.is-active { color: var(--m-accent); background: rgb(var(--m-accent-rgb) / .14); font-weight: 600; }
.kpm-main { padding: 18px 20px 20px; min-width: 0; }
.kpm-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.kpm-kpi { position: relative; padding: 10px 12px; border-radius: 10px; background: var(--m-panel); border: 1px solid var(--m-line); overflow: hidden; }
.kpm-kpi > span { display: block; color: var(--m-muted); font-size: .8em; }
.kpm-kpi > b { display: block; font-size: 1.75em; letter-spacing: -.02em; margin: 2px 0 1px; }
.kpm-kpi em { font-size: .76em; font-weight: 600; color: var(--m-accent); }
.kpm-kpi em.is-warn { color: var(--kp-accent-2); }
.kpm-spark { position: absolute; right: 10px; bottom: 10px; width: 46%; height: 22px; }
.kpm-spark path { fill: none; stroke: var(--m-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 120; stroke-dashoffset: 120; animation: kpm-draw 2s .3s var(--kp-ease) forwards; }
.kpm-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 10px; }
.kpm-map { position: relative; height: 300px; border-radius: 10px; overflow: hidden; border: 1px solid var(--m-line); }
.kpm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; align-content: start; }
.kpm-list li { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 9px; background: var(--m-panel); border: 1px solid transparent; min-width: 0; }
.kpm-list li:first-child { border-color: rgb(var(--m-accent-rgb) / .45); }
.kpm-list li > div { min-width: 0; flex: 1; }
.kpm-list b { display: block; font-size: .92em; }
.kpm-list small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpm-ava { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: .72em; font-weight: 700; color: var(--m-accent); background: rgb(var(--m-accent-rgb) / .14); }
.kpm-status { flex: none; font-size: .7em; font-weight: 600; padding: 3px 7px; border-radius: 999px; color: var(--m-muted); background: var(--m-line); }
.kpm-status--go { color: var(--m-accent); background: rgb(var(--m-accent-rgb) / .14); }
.kpm-status--done { color: var(--m-on-accent); background: var(--m-accent); }

.kpm-toast {
	position: absolute; left: 0; top: 96px; display: flex; align-items: center; gap: 10px; padding: 11px 16px 11px 11px; border-radius: 12px;
	background: color-mix(in srgb, var(--m-bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--m-line); box-shadow: 0 20px 40px -18px rgb(0 0 0 / .6); font-size: 1em; z-index: 3;
	animation: kpm-toast 9s var(--kp-ease) infinite;
}
.kpm-toast__icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--m-on-accent); background: var(--m-accent); }

.kpm-phone { position: absolute; right: 0; bottom: 0; width: 178px; height: 350px; padding: 7px; border-radius: 30px; background: color-mix(in srgb, var(--m-text) 18%, var(--m-bg)); box-shadow: 0 30px 50px -20px rgb(0 0 0 / .65); z-index: 2; animation: kpm-float 7s ease-in-out infinite; font-size: 11.5px; }
.kpm-phone__screen { position: relative; height: 100%; border-radius: 24px; overflow: hidden; background: var(--m-bg); padding: 10px 10px 0; display: flex; flex-direction: column; gap: 8px; }
.kpm-phone__status { display: flex; justify-content: space-between; align-items: center; font-size: .8em; font-weight: 600; padding: 0 4px; }
.kpm-phone__status i { width: 16px; height: 8px; border-radius: 2px; border: 1.5px solid currentColor; opacity: .6; }
.kpm-phone__title { margin: 2px 4px 0; font-weight: 600; font-size: 1.05em; }
.kpm-phone__map { position: relative; height: 112px; border-radius: 12px; overflow: hidden; }
.kpm-phone__card { padding: 10px; border-radius: 12px; background: var(--m-panel); }
.kpm-phone__card small { margin-bottom: 8px; }
.kpm-phone__btn { display: block; text-align: center; padding: 9px; border-radius: 10px; font-weight: 600; font-size: .92em; color: var(--m-on-accent); background: var(--m-accent); }

/* Data stream ------------------------------------------------------------ */
.kpm-panel { position: relative; padding: 16px; border-radius: 16px; background: var(--m-bg); border: 1px solid var(--m-line); box-shadow: var(--m-shadow); font-size: 12.5px; }
.kpm-stream__body { display: grid; grid-template-columns: 1fr 48px 1.25fr; height: 264px; }
.kpm-devices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: space-between; }
.kpm-devices li { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 10px; background: var(--m-panel); border: 1px solid var(--m-line); }
.kpm-devices__icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; color: var(--m-accent); background: rgb(var(--m-accent-rgb) / .14); font-size: 16px; }
.kpm-devices b { display: block; font-size: .95em; }
.kpm-flow { width: 100%; height: 100%; }
.kpm-flow path { fill: none; stroke: var(--m-line); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.kpm-flow circle { fill: var(--m-accent); }
.kpm-log { position: relative; overflow: hidden; border-radius: 12px; background: var(--m-panel); border: 1px solid var(--m-line); -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.kpm-log__track { list-style: none; margin: 0; padding: 0 10px; animation: kpm-scroll 16s linear infinite; }
.kpm-log li { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--m-line); }
.kpm-log li > div { flex: 1; min-width: 0; }
.kpm-log b { display: block; font-size: .92em; }
.kpm-log small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpm-log time { font-size: .72em; color: var(--m-muted); }

/* eSIM ------------------------------------------------------------------- */
.kpm-esim { position: relative; min-height: 400px; border-radius: 16px; background: radial-gradient(circle at 30% 40%, rgb(var(--m-accent-rgb) / .14), transparent 60%); font-size: 12.5px; }
.kpm-phone--static { left: 14%; right: auto; top: 22px; bottom: auto; width: 200px; height: 384px; animation: none; font-size: 12.5px; }
.kpm-country { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0 4px; padding: 5px 10px; border-radius: 999px; background: var(--m-panel); font-size: .82em; font-weight: 500; }
.kpm-plans { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.kpm-plans li { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: 11px; border: 1px solid var(--m-line); background: var(--m-bg); }
.kpm-plans li.is-selected { border-color: var(--m-accent); background: rgb(var(--m-accent-rgb) / .1); box-shadow: 0 0 0 3px rgb(var(--m-accent-rgb) / .12); }
.kpm-plans b { display: block; font-size: 1.05em; }
.kpm-plans em { font-weight: 700; }
.kpm-plans li.is-selected em { color: var(--m-accent); }
.kpm-esim .kpm-phone__btn { margin-top: auto; margin-bottom: 12px; }
.kpm-qr { position: absolute; right: 8%; top: 64px; width: 168px; padding: 16px; border-radius: 16px; background: var(--m-bg); border: 1px solid var(--m-line); box-shadow: var(--m-shadow); text-align: center; animation: kpm-float 8s ease-in-out infinite; animation-delay: -2s; }
.kpm-qr__code { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; padding: 10px; margin-bottom: 12px; border-radius: 10px; background: #FFFFFF; }
.kpm-qr__code i { aspect-ratio: 1; border-radius: 2px; }
.kpm-qr__code i.on { background: #111111; }
.kpm-qr b { display: block; }
.kpm-badge { position: absolute; right: 12%; bottom: 52px; display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border-radius: 999px; font-weight: 600; color: var(--m-on-accent); background: var(--m-accent); box-shadow: 0 16px 30px -12px rgb(var(--m-accent-rgb) / .8); animation: kpm-pop 6s var(--kp-ease) infinite; }

/* Product cards ---------------------------------------------------------- */
.kpm-mini { position: relative; height: 180px; overflow: hidden; background: var(--m-panel); font-size: 12px; }
.kpm-mini--course { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; align-content: center; }
.kpm-course { padding: 10px; border-radius: 12px; background: var(--m-bg); border: 1px solid var(--m-line); }
.kpm-course__thumb { display: grid; place-items: center; height: 62px; border-radius: 8px; margin-bottom: 8px; color: var(--m-on-accent); background: var(--m-accent); }
.kpm-course--alt .kpm-course__thumb { background: var(--kp-accent-2); color: var(--kp-ink); }
.kpm-course small { margin-bottom: 8px; }
.kpm-course .kpm-progress i { animation: none; }
.kpm-mini--esim { display: grid; align-content: center; padding: 18px 24px; }

/* Animations ------------------------------------------------------------- */
@keyframes kpm-blink { 50% { opacity: .35; } }
@keyframes kpm-dash { to { stroke-dashoffset: -22; } }
@keyframes kpm-ping { from { transform: scale(.6); opacity: .5; } to { transform: scale(1.8); opacity: 0; } }
@keyframes kpm-draw { to { stroke-dashoffset: 0; } }
@keyframes kpm-float { 50% { transform: translateY(-10px); } }
@keyframes kpm-progress { 0% { width: 30%; } 60% { width: 82%; } 100% { width: 30%; } }
@keyframes kpm-scroll { to { transform: translateY(-50%); } }
@keyframes kpm-toast {
	0%, 6% { opacity: 0; transform: translate(20px, 0) scale(.96); }
	12%, 70% { opacity: 1; transform: none; }
	78%, 100% { opacity: 0; transform: translate(0, -10px); }
}
@keyframes kpm-pop {
	0%, 10% { opacity: 0; transform: scale(.8); }
	18%, 80% { opacity: 1; transform: none; }
	90%, 100% { opacity: 0; transform: scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
	.kpm-stage *, .kpm-panel *, .kpm-esim *, .kpm-esim, .kpm-mini * { animation: none !important; }
	.kpm-toast, .kpm-badge { opacity: 1; }
	.kpm-spark path { stroke-dashoffset: 0; }
}

/* Responsive ------------------------------------------------------------- */
@media (max-width: 1200px) {
	.kpm-body { grid-template-columns: 46px 1fr; }
	.kpm-nav em { display: none; }
	.kpm-logo { margin-left: 0; }
}
@media (max-width: 960px) {
	.kpm-window { transform: none; }
	.kpm-stage { padding: 0 24px 32px; }
}
@media (max-width: 640px) {
	.kpm-stage { padding: 0 0 24px; font-size: 11px; }
	.kpm-grid { grid-template-columns: 1fr; }
	.kpm-list li:nth-child(n+3) { display: none; }
	.kpm-kpis { gap: 6px; }
	.kpm-spark { display: none; }
	.kpm-phone:not(.kpm-phone--static) { display: none; }
	.kpm-toast { left: 6px; top: -14px; font-size: .95em; }
	.kpm-stream__body { grid-template-columns: 1fr; height: auto; gap: 10px; }
	.kpm-flow { display: none; }
	.kpm-log { height: 200px; }
	.kpm-phone--static { left: 4%; transform: scale(.9); transform-origin: top left; }
	.kpm-qr { right: 2%; width: 140px; }
	.kpm-badge { right: 4%; }
}