/* Security page — sibling to CCTV: security logic design */

.msp-security-page {
	--service-accent: #c7a75e;
	--service-accent-rgb: 199, 167, 94;
}

.msp-security-page .msp-service-scenarios {
	padding-bottom: clamp(80px, 9vw, 120px);
}

.msp-security-hero > img {
	object-position: center 45%;
	filter: saturate(.86) contrast(1.04) brightness(.92);
}

/* ---- 3. Zone plan (camera-plan equivalent) ---- */
.msp-security-plan {
	padding: clamp(100px, 11vw, 160px) 0;
	background: #fff;
}

.msp-security-plan__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, .58fr);
	align-items: end;
	gap: clamp(36px, 7vw, 100px);
}

.msp-security-plan__head h2 {
	max-width: 760px;
	margin: 0;
	color: #1f2937;
	font-size: clamp(40px, 5vw, 68px);
	font-weight: 700;
	letter-spacing: -.055em;
	line-height: .98;
}

.msp-security-plan__head > p {
	margin: 0;
	color: var(--msp-muted);
	font-size: 16px;
	line-height: 1.75;
}

.msp-security-plan__media {
	margin: 56px 0 0;
	overflow: hidden;
	background: #f5f3ee;
	border: 1px solid rgba(42, 38, 30, .16);
	box-shadow: 0 28px 70px rgba(33, 29, 21, .09);
}

.msp-security-editor {
	display: grid;
	grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
	align-items: stretch;
	background: #fff;
	border-bottom: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-editor .msp-plan-editor__intro {
	display: grid;
	align-content: center;
	gap: 5px;
	min-height: 92px;
	padding: 18px 20px;
	border-right: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-editor .msp-plan-editor__intro small {
	color: #a9853d;
	font-family: "Jura", Arial, sans-serif;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.msp-security-editor .msp-plan-editor__intro strong {
	color: #1f2937;
	font-size: 13px;
	font-weight: 600;
}

.msp-security-editor .msp-plan-editor__intro span {
	color: #8a857d;
	font-size: 10px;
}

.msp-security-editor .msp-plan-editor__tools {
	display: grid;
	grid-template-columns: repeat(var(--tool-count, 7), minmax(0, 1fr));
}

.msp-security-editor .msp-plan-editor__tools button {
	display: grid;
	min-height: 92px;
	place-items: center;
	align-content: center;
	gap: 7px;
	padding: 10px 6px;
	color: #514b41;
	background: #fff;
	border: 0;
	border-right: 1px solid rgba(42, 38, 30, .12);
	cursor: pointer;
	transition: color .2s ease, background .2s ease;
}

.msp-security-editor .msp-plan-editor__tools button:last-child { border-right: 0; }
.msp-security-editor .msp-plan-editor__tools button:hover,
.msp-security-editor .msp-plan-editor__tools button:focus-visible {
	color: #161914;
	background: #f5f2ea;
	outline: 0;
}

.msp-security-editor .msp-plan-editor__tools i {
	display: grid;
	min-width: 32px;
	height: 26px;
	place-items: center;
	padding: 0 6px;
	color: #9a7632;
	border: 1px solid rgba(169, 133, 61, .45);
	font-family: "Jura", Arial, sans-serif;
	font-size: 8px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .04em;
}

.msp-security-editor .msp-plan-editor__tools button > span {
	font-family: "Jura", Arial, sans-serif;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.msp-security-editor .msp-plan-editor__reset i {
	color: #5f5a52;
	border-color: rgba(42, 38, 30, .22);
	font-size: 14px;
}

.msp-security-editor .msp-plan-editor__save {
	color: #fff !important;
	background: #151813 !important;
}

.msp-security-editor .msp-plan-editor__save i {
	color: #d9bc76;
	border-color: rgba(217, 188, 118, .5);
	font-size: 13px;
}

.msp-security-editor .msp-plan-editor__save:disabled {
	cursor: wait;
	opacity: .55;
}

.msp-security-editor .msp-plan-editor__selection {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	min-height: 54px;
	align-items: center;
	gap: 14px;
	padding: 8px 14px 8px 20px;
	background: #151813;
	color: #fff;
}

.msp-security-editor .msp-plan-editor__selection[hidden] { display: none; }

.msp-security-editor .msp-plan-editor__selection > strong {
	min-width: 110px;
	font-family: "Jura", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
}

.msp-security-editor .msp-plan-editor__model {
	display: grid;
	gap: 4px;
	min-width: min(240px, 100%);
}

.msp-security-editor .msp-plan-editor__model > span {
	color: rgba(255, 255, 255, .55);
	font-family: "Jura", Arial, sans-serif;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.msp-security-editor .msp-plan-editor__model select {
	min-height: 34px;
	padding: 0 10px;
	color: #fff;
	background: #22261f;
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: 12px;
}

.msp-security-editor .msp-plan-editor__group {
	display: inline-flex;
	align-items: stretch;
	min-height: 34px;
	border: 1px solid rgba(255, 255, 255, .14);
}

.msp-security-editor .msp-plan-editor__group button,
.msp-security-editor .msp-plan-editor__remove {
	min-height: 34px;
	padding: 0 12px;
	color: #fff;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: "Jura", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
}

.msp-security-editor .msp-plan-editor__group button:hover,
.msp-security-editor .msp-plan-editor__group button:focus-visible,
.msp-security-editor .msp-plan-editor__remove:hover,
.msp-security-editor .msp-plan-editor__remove:focus-visible {
	color: #151813;
	background: #d9bc76;
	outline: 0;
}

.msp-security-editor .msp-plan-editor__group small {
	display: grid;
	min-width: 88px;
	place-items: center;
	padding: 0 8px;
	color: rgba(255, 255, 255, .7);
	border-inline: 1px solid rgba(255, 255, 255, .14);
	font-family: "Jura", Arial, sans-serif;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.msp-security-editor .msp-plan-editor__group small b {
	color: #d9bc76;
	font-weight: 700;
}

.msp-security-editor .msp-plan-editor__remove {
	margin-left: auto;
	border: 1px solid rgba(255, 255, 255, .14);
}

.msp-security-plan__visual {
	position: relative;
	overflow: hidden;
	background: #ece8e0;
	touch-action: none;
}

.msp-security-plan__visual--cad {
	background: #f3f4f6;
}

.msp-security-plan__visual > img {
	display: block;
	width: 100%;
	height: auto;
	user-select: none;
	pointer-events: none;
}

.msp-security-plan__visual--cad > img {
	width: 100%;
	height: auto;
	object-fit: contain;
	background: #f3f4f6;
}

.msp-security-plan__status {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	color: #fff;
	background: rgba(8, 10, 11, .72);
	border: 1px solid rgba(255, 255, 255, .12);
	font-family: "Jura", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
	pointer-events: none;
}

.msp-security-plan__status span {
	width: 7px;
	height: 7px;
	background: #c7a75e;
	border-radius: 50%;
	box-shadow: 0 0 12px rgba(199, 167, 94, .8);
}

.msp-security-plan__markers {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.msp-sec-device {
	--s: 1;
	position: absolute;
	left: var(--x);
	top: var(--y);
	z-index: 2;
	display: grid;
	justify-items: center;
	gap: 3px;
	transform: translate(-50%, -50%) scale(var(--s));
	cursor: grab;
	touch-action: none;
	user-select: none;
}

.msp-sec-device:active { cursor: grabbing; }

.msp-sec-device i {
	display: grid;
	width: 22px;
	height: 22px;
	place-items: center;
	color: #fff;
	background: #2a3138;
	border: 1px solid rgba(255, 255, 255, .38);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
}

.msp-sec-device i svg {
	width: 13px;
	height: 13px;
	display: block;
}

.msp-sec-device b {
	padding: 1px 4px;
	color: #1f2937;
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(42, 38, 30, .12);
	font-family: "Jura", Arial, sans-serif;
	font-size: 7px;
	font-weight: 700;
	letter-spacing: .05em;
	line-height: 1.2;
}

.msp-sec-device small {
	padding: 1px 4px;
	color: #fff;
	background: #3b4a5a;
	font-family: "Jura", Arial, sans-serif;
	font-size: 6px;
	font-weight: 700;
	letter-spacing: .08em;
	line-height: 1.2;
}

.msp-sec-device.is-link-wireless small { background: #2f4f46; }
.msp-sec-device.is-link-hub small { background: #8a6a2f; }

.msp-sec-device:focus-visible { outline: 0; }

.msp-sec-device.is-selected i,
.msp-sec-device:focus-visible i {
	outline: 2px solid #c7a75e;
	outline-offset: 2px;
	box-shadow: 0 0 0 4px rgba(199, 167, 94, .22), 0 6px 16px rgba(0, 0, 0, .28);
}

.msp-sec-device--contact i { background: #3b4a5a; }
.msp-sec-device--motion i { background: #2f4f46; }
.msp-sec-device--shock i { background: #4a5560; }
.msp-sec-device--combi i { background: #3a5a48; border-color: rgba(199, 167, 94, .4); }
.msp-sec-device--water i { background: #2f4f66; }
.msp-sec-device--smoke i { background: #5a4030; }
.msp-sec-device--hub i,
.msp-sec-device--keypad i {
	background: #8a6a2f;
	border-color: rgba(255, 230, 170, .45);
}
.msp-sec-device--siren i { background: #5a3030; }

.msp-sec-device.is-triggered i {
	animation: msp-sec-pulse 0.9s ease-in-out infinite;
}

.msp-sec-device.is-shaking {
	animation: msp-sec-shake-device 0.45s ease-in-out 3;
	z-index: 5;
}

.msp-sec-device.is-shaking i {
	animation: msp-sec-pulse 0.35s ease-in-out infinite;
	box-shadow: 0 0 0 4px rgba(74, 85, 96, .28), 0 0 18px rgba(180, 200, 220, .45);
}

.msp-sec-device.is-flooding {
	z-index: 5;
}

.msp-sec-device.is-flooding i {
	animation: msp-sec-pulse 0.7s ease-in-out infinite;
	box-shadow: 0 0 0 5px rgba(94, 176, 224, .22), 0 0 22px rgba(94, 176, 224, .55);
}

.msp-sec-device.is-scanning {
	z-index: 5;
}

.msp-sec-device.is-scanning i {
	box-shadow: 0 0 0 5px rgba(63, 111, 96, .2), 0 0 20px rgba(63, 111, 96, .45);
}

.msp-sec-device.is-cracking i {
	box-shadow: 0 0 0 5px rgba(199, 167, 94, .2), 0 0 18px rgba(58, 90, 72, .5);
}

.msp-sec-device.is-opening i {
	animation: msp-sec-pulse 0.55s ease-in-out infinite;
	box-shadow: 0 0 0 5px rgba(59, 74, 90, .25), 0 0 18px rgba(199, 167, 94, .35);
}

.msp-sec-device.is-relay i {
	animation: msp-sec-pulse 1.1s ease-in-out infinite;
	background: #8a6a2f;
}

.msp-sec-device.is-alarming i {
	animation: msp-sec-siren 0.45s steps(2) infinite;
	background: #b42318;
}

.msp-security-plan__status[data-mode="alarm"],
.msp-security-plan__status[data-mode="fire"],
.msp-security-plan__status[data-mode="shock"],
.msp-security-plan__status[data-mode="combi"] {
	background: rgba(120, 24, 18, .88);
	border-color: rgba(255, 180, 160, .35);
}

.msp-security-plan__status[data-mode="water"] {
	background: rgba(20, 52, 78, .9);
	border-color: rgba(120, 180, 220, .35);
}

.msp-security-plan__status[data-mode="alarm"] span,
.msp-security-plan__status[data-mode="fire"] span,
.msp-security-plan__status[data-mode="shock"] span,
.msp-security-plan__status[data-mode="combi"] span {
	background: #ff6b4a;
	animation: msp-sec-blink 0.55s steps(2) infinite;
}

.msp-security-plan__status[data-mode="water"] span {
	background: #5eb0e0;
	animation: msp-sec-blink 0.55s steps(2) infinite;
}

.msp-security-plan__status[data-mode="code"] {
	background: rgba(28, 36, 48, .88);
}

.msp-security-plan__status[data-mode="idle"] span {
	background: #7d8790;
	box-shadow: none;
}

.msp-security-plan__visual.is-sim-motion::after,
.msp-security-plan__visual.is-sim-shock::after,
.msp-security-plan__visual.is-sim-combi::after,
.msp-security-plan__visual.is-sim-water::after,
.msp-security-plan__visual.is-sim-smoke::after,
.msp-security-plan__visual.is-sim-contact::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.msp-security-plan__visual.is-sim-motion::after {
	background: radial-gradient(circle at 56% 52%, rgba(47, 79, 70, .08), transparent 34%);
}

.msp-security-plan__visual.is-sim-contact::after {
	background: radial-gradient(circle at 48% 74%, rgba(199, 167, 94, .12), transparent 28%);
}

.msp-security-plan__visual.is-sim-shock::after {
	background: radial-gradient(circle at 40% 20%, rgba(74, 85, 96, .14), transparent 28%);
}

.msp-security-plan__visual.is-sim-combi::after {
	background: radial-gradient(circle at 42% 38%, rgba(58, 90, 72, .14), transparent 30%);
}

.msp-security-plan__visual.is-sim-water::after {
	background: radial-gradient(circle at 20% 32%, rgba(47, 111, 150, .16), transparent 28%);
}

.msp-security-plan__visual.is-sim-smoke::after {
	background: radial-gradient(circle at 44% 28%, rgba(255, 120, 40, .1), transparent 26%);
	animation: msp-sec-fireglow 1.4s ease-in-out infinite alternate;
}

.msp-security-plan__visual.is-sim-alarm {
	box-shadow: inset 0 0 0 1px rgba(180, 35, 24, .12);
}

.msp-security-sim__topo,
.msp-security-sim__active,
.msp-security-sim__fx {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: visible;
}

.msp-security-sim__hub-ring {
	fill: none;
	stroke: rgba(138, 106, 47, .55);
	stroke-width: 0.18;
	stroke-dasharray: 0.5 0.45;
}

.msp-security-sim__run-path {
	fill: none;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.msp-security-sim__run.is-wired .msp-security-sim__run-path {
	stroke: rgba(59, 74, 90, .42);
	stroke-width: 0.22;
}

.msp-security-sim__run.is-wireless .msp-security-sim__run-path {
	stroke: rgba(47, 79, 70, .38);
	stroke-width: 0.16;
	stroke-dasharray: 0.7 0.55;
}

.msp-security-sim__run-label {
	fill: rgba(42, 38, 30, .45);
	font-family: "Jura", Arial, sans-serif;
	font-size: 1.35px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-anchor: middle;
}

.msp-security-sim__run.is-live .msp-security-sim__run-path {
	stroke-opacity: 1;
}

.msp-security-sim__run.is-wired.is-live .msp-security-sim__run-path {
	stroke: #3b4a5a;
	stroke-width: 0.3;
}

.msp-security-sim__run.is-wireless.is-live .msp-security-sim__run-path {
	stroke: #2f4f46;
	stroke-width: 0.24;
	animation: msp-sec-rf-dash 0.8s linear infinite;
}

.msp-security-sim__run.is-live .msp-security-sim__run-label {
	fill: #8a6a2f;
}

.msp-security-sim__live-path {
	fill: none;
	stroke-linecap: square;
	stroke-linejoin: miter;
	opacity: .9;
}

.msp-security-sim__live-path.is-wired {
	stroke-width: 0.34;
	stroke: #3b4a5a;
	stroke-dasharray: 1.1 0.7;
	animation: msp-sec-cable-flow 0.7s linear infinite;
}

.msp-security-sim__live-path.is-wireless {
	stroke-width: 0.22;
	stroke: #2f4f46;
	stroke-dasharray: 0.55 0.55;
	animation: msp-sec-rf-dash 0.65s linear infinite;
}

.msp-security-sim__live-path.is-motion.is-wireless,
.msp-security-sim__live-packet.is-motion { stroke: #3f6f60; fill: #3f6f60; color: #3f6f60; }
.msp-security-sim__live-path.is-smoke.is-wireless,
.msp-security-sim__live-packet.is-smoke { stroke: #d9773a; fill: #d9773a; color: #d9773a; }
.msp-security-sim__live-path.is-alarm,
.msp-security-sim__live-packet.is-alarm { stroke: #d6453d; fill: #d6453d; color: #d6453d; }
.msp-security-sim__live-path.is-keypad,
.msp-security-sim__live-packet.is-keypad { stroke: #c7a75e; fill: #c7a75e; color: #c7a75e; }

.msp-security-sim__live-packet {
	fill: currentColor;
	filter: drop-shadow(0 0 1px currentColor);
}

.msp-security-sim__rf-arc {
	fill: none;
	stroke: currentColor;
	stroke-width: 0.22;
	stroke-linecap: round;
	opacity: 0;
	animation: msp-sec-wifi 1.2s ease-out infinite;
	animation-delay: calc(var(--i, 0) * 0.14s);
}

.msp-security-sim__rf.is-motion { color: #3f6f60; }
.msp-security-sim__rf.is-smoke { color: #d9773a; }
.msp-security-sim__rf.is-alarm { color: #d6453d; }
.msp-security-sim__rf.is-keypad { color: #c7a75e; }

.msp-security-sim__puff {
	position: absolute;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(180, 180, 180, .55), rgba(80, 80, 80, 0));
	transform: translate(-50%, -50%);
	animation: msp-sec-puff 2.2s ease-out forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim__radar {
	position: absolute;
	width: 28px;
	height: 28px;
	border: 1.5px solid rgba(63, 111, 96, .55);
	border-radius: 50%;
	border-bottom-color: transparent;
	border-left-color: transparent;
	transform: translate(-50%, -50%) rotate(-20deg);
	animation: msp-sec-radar 1.5s ease-out forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim__scan {
	position: absolute;
	width: 36px;
	height: 18px;
	background: conic-gradient(from 200deg, transparent 0 55%, rgba(63, 111, 96, .28) 55% 78%, transparent 78% 100%);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: msp-sec-scan 1.3s ease-out forwards;
	pointer-events: none;
}

.msp-security-sim__door {
	position: absolute;
	width: 14px;
	height: 22px;
	border: 1.5px solid rgba(199, 167, 94, .75);
	border-radius: 2px;
	transform: translate(-70%, -50%) rotate(0deg);
	transform-origin: left center;
	animation: msp-sec-door 1.1s ease-out forwards;
	pointer-events: none;
}

.msp-security-sim__gap {
	position: absolute;
	width: 4px;
	height: 24px;
	background: linear-gradient(180deg, rgba(199, 167, 94, .1), rgba(199, 167, 94, .85), rgba(199, 167, 94, .1));
	transform: translate(-50%, -50%);
	animation: msp-sec-gap 1.2s ease-out forwards;
	pointer-events: none;
}

.msp-security-sim__gap-ring {
	position: absolute;
	width: 18px;
	height: 18px;
	border: 1.5px solid rgba(199, 167, 94, .55);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: msp-sec-quake 1.3s ease-out forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim__glass {
	position: absolute;
	width: 26px;
	height: 20px;
	border: 1.5px solid rgba(220, 230, 240, .55);
	background: linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(120, 160, 180, .08));
	transform: translate(-50%, -50%);
	animation: msp-sec-glass .9s ease-out forwards;
	pointer-events: none;
}

.msp-security-sim__crack {
	position: absolute;
	width: 16px;
	height: 1.5px;
	background: linear-gradient(90deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0));
	transform: translate(-50%, -50%) rotate(var(--a, 0deg));
	transform-origin: left center;
	animation: msp-sec-crack .85s ease-out forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim__heat {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 120, 40, .35), rgba(255, 80, 20, 0) 70%);
	transform: translate(-50%, -50%);
	animation: msp-sec-heat 2s ease-out forwards;
	pointer-events: none;
}

.msp-security-sim__ember {
	position: absolute;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #ffb060;
	box-shadow: 0 0 8px rgba(255, 140, 60, .8);
	transform: translate(-50%, -50%);
	animation: msp-sec-ember 1.7s ease-out forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim__impact {
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(160, 180, 200, 0) 70%);
	transform: translate(-50%, -50%);
	animation: msp-sec-impact .55s ease-out forwards;
	pointer-events: none;
}

.msp-security-sim__quake {
	position: absolute;
	width: 22px;
	height: 14px;
	border: 1.5px solid rgba(120, 140, 160, .75);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: msp-sec-quake 1.5s ease-out forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim__shard {
	position: absolute;
	width: 7px;
	height: 2px;
	background: linear-gradient(90deg, rgba(210, 220, 230, .95), rgba(210, 220, 230, 0));
	transform: translate(-50%, -50%) rotate(var(--a, 0deg));
	transform-origin: left center;
	animation: msp-sec-shard .9s ease-out forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim__pool {
	position: absolute;
	width: 34px;
	height: 18px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(94, 176, 224, .45), rgba(47, 111, 150, .08) 62%, transparent 72%);
	transform: translate(-50%, -40%) scale(.4);
	animation: msp-sec-pool 2.2s ease-out forwards;
	pointer-events: none;
}

.msp-security-sim__ripple-water {
	position: absolute;
	width: 16px;
	height: 10px;
	border: 1.5px solid rgba(94, 176, 224, .7);
	border-radius: 50%;
	transform: translate(-50%, -40%);
	animation: msp-sec-water-ripple 1.8s ease-out forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim__drop {
	position: absolute;
	width: 7px;
	height: 10px;
	border-radius: 50% 50% 50% 50% / 35% 35% 65% 65%;
	background: radial-gradient(circle at 35% 28%, rgba(200, 236, 255, .95), rgba(47, 120, 170, .35));
	box-shadow: 0 0 8px rgba(94, 176, 224, .45);
	transform: translate(-50%, -50%);
	animation: msp-sec-drop 1.7s ease-in forwards;
	animation-delay: var(--d, 0ms);
	pointer-events: none;
}

.msp-security-sim {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
	background: #121511;
	color: #fff;
	border-top: 1px solid rgba(255, 255, 255, .08);
}

.msp-security-sim__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 12px;
	padding: 14px 16px;
	border-right: 1px solid rgba(255, 255, 255, .08);
}

.msp-security-sim__bar > small {
	grid-column: 1;
	color: #c7a75e;
	font-family: "Jura", Arial, sans-serif;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.msp-security-sim__bar > strong {
	grid-column: 1;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.01em;
}

.msp-security-sim__bar > em,
.msp-security-sim__scenes {
	grid-column: 1 / -1;
}

.msp-security-sim__bar > em {
	color: rgba(255, 255, 255, .42);
	font-family: "Jura", Arial, sans-serif;
	font-size: 8px;
	font-style: normal;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.msp-security-sim__toggle {
	grid-column: 2;
	grid-row: 1 / 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: start;
	min-height: 38px;
	padding: 0 14px;
	color: #151813;
	background: #d9bc76;
	border: 0;
	cursor: pointer;
	font-family: "Jura", Arial, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.msp-security-sim__toggle i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #151813;
	box-shadow: 0 0 0 3px rgba(21, 24, 19, .12);
	animation: msp-sec-blink 1.1s steps(2) infinite;
}

.msp-security-sim.is-paused .msp-security-sim__toggle {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
}

.msp-security-sim.is-paused .msp-security-sim__toggle i {
	background: #7d8790;
	animation: none;
	box-shadow: none;
}

.msp-security-sim__scenes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.msp-security-sim__scenes button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 0 11px;
	color: #d7d2c8;
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	cursor: pointer;
	font-family: "Jura", Arial, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.msp-security-sim__scenes button i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #7d8790;
	box-shadow: 0 0 0 3px rgba(125, 135, 144, .15);
}

.msp-security-sim__scenes button[data-sim="motion"] i { background: #3f6f60; }
.msp-security-sim__scenes button[data-sim="shock"] i { background: #4a5560; }
.msp-security-sim__scenes button[data-sim="combi"] i { background: #3a5a48; }
.msp-security-sim__scenes button[data-sim="water"] i { background: #5eb0e0; }
.msp-security-sim__scenes button[data-sim="smoke"] i { background: #d9773a; }
.msp-security-sim__scenes button[data-sim="keypad"] i { background: #c7a75e; }
.msp-security-sim__scenes button[data-sim="idle"] i { background: #7d8790; }

.msp-security-sim__scenes button:hover,
.msp-security-sim__scenes button:focus-visible,
.msp-security-sim__scenes button.is-active {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border-color: rgba(199, 167, 94, .55);
	outline: 0;
}

.msp-security-sim__scenes button.is-active i {
	box-shadow: 0 0 0 4px rgba(199, 167, 94, .2);
	animation: msp-sec-blink .8s steps(2) infinite;
}

.msp-security-sim__keys button.is-demo-key {
	color: #151813;
	background: #d9bc76;
	border-color: #d9bc76;
	transform: scale(.96);
}

.msp-security-sim__console {
	display: grid;
	gap: 12px;
	padding: 14px 16px;
	min-height: 150px;
}

.msp-security-sim__log {
	display: grid;
	gap: 8px;
	align-content: start;
}

.msp-security-sim__row {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 2px 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	animation: msp-sec-log-in .35s ease;
}

.msp-security-sim__row small {
	grid-row: span 2;
	align-self: center;
	color: rgba(255, 255, 255, .4);
	font-family: "Jura", Arial, sans-serif;
	font-size: 9px;
	font-weight: 700;
}

.msp-security-sim__row strong {
	font-size: 12px;
	font-weight: 600;
}

.msp-security-sim__row span {
	color: rgba(255, 255, 255, .55);
	font-size: 11px;
}

.msp-security-sim__row.is-motion strong { color: #8fbfb0; }
.msp-security-sim__row.is-shock strong { color: #a8b4c0; }
.msp-security-sim__row.is-combi strong { color: #9fc4ad; }
.msp-security-sim__row.is-water strong { color: #7ec4e8; }
.msp-security-sim__row.is-smoke strong { color: #f0a46a; }
.msp-security-sim__row.is-alarm strong { color: #ff8d84; }
.msp-security-sim__row.is-keypad strong,
.msp-security-sim__row.is-hub strong { color: #d9bc76; }

.msp-security-sim__keypad {
	padding: 14px;
	background: linear-gradient(180deg, #1b211c, #141814);
	border: 1px solid rgba(199, 167, 94, .35);
	box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

.msp-security-sim__keypad[hidden] { display: none; }

.msp-security-sim__keypad.is-shake {
	animation: msp-sec-shake .4s ease;
}

.msp-security-sim__keypad header {
	display: grid;
	gap: 4px;
	margin-bottom: 12px;
}

.msp-security-sim__keypad small {
	color: #c7a75e;
	font-family: "Jura", Arial, sans-serif;
	font-size: 8px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.msp-security-sim__keypad strong {
	font-size: 13px;
	font-weight: 600;
}

.msp-security-sim__pin {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 12px;
}

.msp-security-sim__pin i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, .35);
	background: transparent;
}

.msp-security-sim__pin i.is-on {
	background: #c7a75e;
	border-color: #c7a75e;
	box-shadow: 0 0 10px rgba(199, 167, 94, .55);
}

.msp-security-sim__keys {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.msp-security-sim__keys button {
	min-height: 38px;
	color: #fff;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	cursor: pointer;
	font-family: "Jura", Arial, sans-serif;
	font-size: 14px;
	font-weight: 700;
	transition: background .15s ease, transform .15s ease;
}

.msp-security-sim__keys button:hover,
.msp-security-sim__keys button:focus-visible {
	background: rgba(199, 167, 94, .18);
	outline: 0;
}

.msp-security-sim__keys button:active {
	transform: scale(.96);
}

@keyframes msp-sec-pulse {
	0%, 100% { transform: scale(1); filter: brightness(1); }
	50% { transform: scale(1.08); filter: brightness(1.25); }
}

@keyframes msp-sec-siren {
	0% { background: #b42318; }
	100% { background: #f3c623; }
}

@keyframes msp-sec-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

@keyframes msp-sec-wifi {
	0% { opacity: 0; }
	25% { opacity: .85; }
	100% { opacity: 0; }
}

@keyframes msp-sec-cable-flow {
	to { stroke-dashoffset: -1.8; }
}

@keyframes msp-sec-rf-dash {
	to { stroke-dashoffset: -1.1; }
}

@keyframes msp-sec-puff {
	0% { opacity: .55; transform: translate(-50%, -40%) scale(.6); }
	100% { opacity: 0; transform: translate(-50%, -180%) scale(2.2); }
}

@keyframes msp-sec-drop {
	0% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), -70%) scale(.4); }
	18% { opacity: 1; }
	100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), 110%) scale(1.05); }
}

@keyframes msp-sec-impact {
	0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(2.6); }
}

@keyframes msp-sec-quake {
	0% { opacity: .85; transform: translate(-50%, -50%) scale(.35); }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(4.2); }
}

@keyframes msp-sec-shard {
	0% { opacity: .95; width: 4px; }
	100% { opacity: 0; width: 18px; transform: translate(-50%, -50%) rotate(var(--a, 0deg)) translateX(14px); }
}

@keyframes msp-sec-pool {
	0% { opacity: .2; transform: translate(-50%, -40%) scale(.35); }
	35% { opacity: .85; }
	100% { opacity: 0; transform: translate(-50%, -40%) scale(2.4); }
}

@keyframes msp-sec-water-ripple {
	0% { opacity: .8; transform: translate(-50%, -40%) scale(.5); }
	100% { opacity: 0; transform: translate(-50%, -40%) scale(3.6); }
}

@keyframes msp-sec-shake-device {
	0%, 100% { transform: translate(-50%, -50%) scale(var(--s, 1)) translateX(0); }
	20% { transform: translate(-50%, -50%) scale(var(--s, 1)) translateX(-2px) rotate(-1.5deg); }
	40% { transform: translate(-50%, -50%) scale(var(--s, 1)) translateX(2px) rotate(1.5deg); }
	60% { transform: translate(-50%, -50%) scale(var(--s, 1)) translateX(-1.5px) rotate(-1deg); }
	80% { transform: translate(-50%, -50%) scale(var(--s, 1)) translateX(1.5px) rotate(1deg); }
}

@keyframes msp-sec-radar {
	0% { opacity: .85; transform: translate(-50%, -50%) rotate(-20deg) scale(.35); }
	100% { opacity: 0; transform: translate(-50%, -50%) rotate(40deg) scale(2.8); }
}

@keyframes msp-sec-scan {
	0% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(-10deg); }
	30% { opacity: .8; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6) rotate(25deg); }
}

@keyframes msp-sec-door {
	0% { opacity: .3; transform: translate(-70%, -50%) rotate(0deg); }
	40% { opacity: 1; }
	100% { opacity: 0; transform: translate(-70%, -50%) rotate(-42deg); }
}

@keyframes msp-sec-gap {
	0% { opacity: 0; transform: translate(-50%, -50%) scaleY(.4); }
	35% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -50%) scaleY(1.2); }
}

@keyframes msp-sec-glass {
	0% { opacity: .2; transform: translate(-50%, -50%) scale(.8); filter: blur(0); }
	40% { opacity: .9; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15); filter: blur(1px); }
}

@keyframes msp-sec-crack {
	0% { opacity: 0; width: 2px; }
	30% { opacity: 1; }
	100% { opacity: 0; width: 22px; }
}

@keyframes msp-sec-heat {
	0% { opacity: .2; transform: translate(-50%, -50%) scale(.5); }
	40% { opacity: .85; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
}

@keyframes msp-sec-ember {
	0% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), 10%) scale(.6); }
	20% { opacity: 1; }
	100% { opacity: 0; transform: translate(calc(-50% + var(--x, 0px)), -120%) scale(1.1); }
}

@keyframes msp-sec-fireglow {
	from { opacity: .75; }
	to { opacity: 1; }
}

@keyframes msp-sec-log-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes msp-sec-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

.msp-security-plan__media figcaption {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	background: #fff;
	border-top: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-plan__media figcaption span {
	padding: 16px 14px;
	color: #6b655c;
	border-right: 1px solid rgba(42, 38, 30, .12);
	font-family: "Jura", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
}

.msp-security-plan__media figcaption span:last-child { border-right: 0; }

.msp-security-plan__legend {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.msp-security-plan__legend li {
	display: grid;
	grid-template-columns: auto auto 1fr;
	align-items: center;
	gap: 8px;
	padding: 12px 12px;
	background: #f8f6f1;
	border: 1px solid rgba(42, 38, 30, .1);
}

.msp-security-plan__legend i {
	width: 10px;
	height: 10px;
	background: #1f2937;
}

.msp-security-plan__legend i.is-contact { background: #3b4a5a; }
.msp-security-plan__legend i.is-motion { background: #2f4f46; }
.msp-security-plan__legend i.is-shock { background: #4a5560; }
.msp-security-plan__legend i.is-combi { background: #3a5a48; }
.msp-security-plan__legend i.is-water { background: #2f4f66; }
.msp-security-plan__legend i.is-smoke { background: #5a4030; }
.msp-security-plan__legend i.is-hub,
.msp-security-plan__legend i.is-keypad { background: #8a6a2f; }
.msp-security-plan__legend i.is-siren { background: #5a3030; }
.msp-security-plan__legend i.is-wire {
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1px #3b4a5a;
	background-image: linear-gradient(#3b4a5a, #3b4a5a);
	background-size: 100% 2px;
	background-position: center;
	background-repeat: no-repeat;
}
.msp-security-plan__legend i.is-rf {
	background: transparent;
	border: 0;
	box-shadow: inset 0 0 0 1px #2f4f46;
	background-image: repeating-linear-gradient(90deg, #2f4f46 0 3px, transparent 3px 6px);
	background-size: 100% 2px;
	background-position: center;
	background-repeat: no-repeat;
}

.msp-security-plan__legend strong {
	color: #1f2937;
	font-family: "Jura", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
}

.msp-security-plan__legend span {
	color: #746f66;
	font-size: 11px;
}

/* ---- 4. Real case ---- */
.msp-security-case {
	padding: clamp(100px, 11vw, 155px) 0;
	background: #f8f6f1;
}

.msp-security-case__grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(36px, 6vw, 80px);
	align-items: start;
}

.msp-security-case__copy h2 {
	max-width: 560px;
	margin: 0 0 18px;
	color: #1f2937;
	font-size: clamp(36px, 4.4vw, 56px);
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: 1;
}

.msp-security-case__copy > p {
	max-width: 460px;
	margin: 0 0 28px;
	color: var(--msp-muted);
	font-size: 16px;
	line-height: 1.75;
}

.msp-security-case__panel {
	background: #fff;
	border: 1px solid rgba(42, 38, 30, .14);
	box-shadow: 0 18px 50px rgba(33, 29, 21, .06);
}

.msp-security-case__panel ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.msp-security-case__panel li {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 8px 18px;
	padding: 22px 24px;
	border-bottom: 1px solid rgba(42, 38, 30, .1);
}

.msp-security-case__panel li:last-child { border-bottom: 0; }

.msp-security-case__panel small {
	color: #c7a75e;
	font-family: "Jura", Arial, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
}

.msp-security-case__panel strong {
	display: block;
	margin-bottom: 6px;
	color: #1f2937;
	font-size: 17px;
	font-weight: 600;
}

.msp-security-case__panel span {
	display: block;
	color: #746f66;
	font-size: 14px;
	line-height: 1.6;
}

/* ---- 5. Architecture ---- */
.msp-security-arch {
	padding: clamp(100px, 11vw, 160px) 0;
	color: #1f2937;
	background:
		radial-gradient(circle at 78% 12%, rgba(199, 167, 94, .12), transparent 30%),
		linear-gradient(135deg, #f5f3ee 0%, #ece9e1 100%);
}

.msp-security-arch__head,
.msp-security-handover__head,
.msp-security-proof__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, .58fr);
	align-items: end;
	gap: clamp(28px, 5vw, 72px);
}

.msp-security-arch__head h2,
.msp-security-handover__head h2,
.msp-security-proof__head h2 {
	margin: 0;
	color: #1f2937;
	font-size: clamp(38px, 4.8vw, 64px);
	font-weight: 700;
	letter-spacing: -.05em;
	line-height: .98;
}

.msp-security-arch__head > p,
.msp-security-handover__head > p,
.msp-security-proof__head > p {
	margin: 0;
	color: #746f66;
	font-size: 16px;
	line-height: 1.75;
}

.msp-security-arch__map {
	margin-top: 56px;
	padding: clamp(24px, 3.5vw, 44px);
	background:
		linear-gradient(rgba(55, 48, 34, .035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(55, 48, 34, .035) 1px, transparent 1px),
		rgba(255, 255, 255, .88);
	background-size: 28px 28px, 28px 28px, auto;
	border: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-arch__core {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr);
	align-items: stretch;
}

.msp-security-arch__core article {
	min-height: 230px;
	padding: 24px;
	background: rgba(255, 255, 255, .96);
	border: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-arch__core article.is-core {
	border-color: rgba(199, 167, 94, .5);
	background: #fffdf8;
}

.msp-security-arch__core small {
	display: block;
	color: #a9853d;
	font-family: "Jura", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
}

.msp-security-arch__core b {
	display: grid;
	width: 72px;
	height: 48px;
	place-items: center;
	margin: 22px 0 18px;
	color: #1f2937;
	background: rgba(42, 38, 30, .05);
	border: 1px solid rgba(42, 38, 30, .12);
	font-family: "Jura", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
}

.msp-security-arch__core .is-core b {
	background: rgba(199, 167, 94, .14);
	border-color: rgba(199, 167, 94, .4);
}

.msp-security-arch__core h3 {
	margin: 0 0 10px;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.03em;
}

.msp-security-arch__core p {
	margin: 0;
	color: #746f66;
	font-size: 14px;
	line-height: 1.6;
}

.msp-security-arch__link {
	position: relative;
	display: grid;
	align-content: center;
	justify-items: center;
	gap: 8px;
	color: #a9853d;
	font-family: "Jura", Arial, sans-serif;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.msp-security-arch__link i {
	display: block;
	width: 100%;
	height: 1px;
	background: rgba(199, 167, 94, .55);
}

.msp-security-arch__link i::after {
	content: "";
	position: absolute;
	top: calc(50% - 12px);
	right: 8px;
	width: 7px;
	height: 7px;
	border-top: 1px solid #c7a75e;
	border-right: 1px solid #c7a75e;
	transform: rotate(45deg);
}

.msp-security-arch__layers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-top: 18px;
	border-top: 1px solid rgba(42, 38, 30, .12);
}

.msp-security-arch__layers article {
	padding: 22px 20px;
	border-right: 1px solid rgba(42, 38, 30, .12);
}

.msp-security-arch__layers article:last-child { border-right: 0; }

.msp-security-arch__layers small {
	display: block;
	margin-bottom: 10px;
	color: #a9853d;
	font-family: "Jura", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
}

.msp-security-arch__layers strong {
	display: block;
	margin-bottom: 8px;
	color: #1f2937;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.msp-security-arch__layers span {
	display: block;
	color: #746f66;
	font-size: 13px;
	line-height: 1.65;
}

.msp-security-arch__layers a {
	color: #1f2937;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.msp-security-arch__note {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 28px;
	align-items: start;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-arch__note span {
	color: #a9853d;
	font-family: "Jura", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.msp-security-arch__note p {
	margin: 0;
	color: #6b675f;
	font-size: 14px;
	line-height: 1.7;
}

/* ---- 6. Handover ---- */
.msp-security-handover {
	padding: clamp(90px, 10vw, 145px) 0;
	background: #fff;
}

.msp-security-handover__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: 56px;
	border-top: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-handover__grid article {
	min-height: 220px;
	padding: 28px 22px;
	border-right: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-handover__grid article:first-child { padding-left: 0; }
.msp-security-handover__grid article:last-child { border-right: 0; }

.msp-security-handover__grid small {
	color: #a9853d;
	font-family: "Jura", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
}

.msp-security-handover__grid h3 {
	margin: 36px 0 10px;
	color: #1f2937;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.msp-security-handover__grid p {
	margin: 0;
	color: #746f66;
	font-size: 14px;
	line-height: 1.65;
}

/* ---- 7. Proof / objects ---- */
.msp-security-proof {
	padding: clamp(90px, 10vw, 145px) 0;
	background: #f8f6f1;
}

.msp-security-proof__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 52px;
}

.msp-security-proof__card {
	margin: 0;
	background: #fff;
	border: 1px solid rgba(42, 38, 30, .12);
}

.msp-security-proof__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background:
		linear-gradient(135deg, rgba(42, 38, 30, .06), rgba(199, 167, 94, .1)),
		#e8e4dc;
}

.msp-security-proof__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msp-security-proof__card.is-empty .msp-security-proof__media {
	display: grid;
	place-items: center;
}

.msp-security-proof__card.is-empty .msp-security-proof__media span {
	color: #8a8478;
	font-family: "Jura", Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.msp-security-proof__card figcaption {
	padding: 20px 18px 22px;
}

.msp-security-proof__card small {
	display: block;
	margin-bottom: 8px;
	color: #a9853d;
	font-family: "Jura", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.msp-security-proof__card strong {
	display: block;
	margin-bottom: 8px;
	color: #1f2937;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.3;
}

.msp-security-proof__card figcaption > span {
	display: block;
	color: #746f66;
	font-size: 13px;
	line-height: 1.5;
}

/* ---- 8. Process ---- */
.msp-security-process {
	padding: clamp(90px, 10vw, 140px) 0;
	background: #fff;
}

.msp-security-process ol {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 58px 0 0;
	padding: 0;
	border-top: 1px solid rgba(42, 38, 30, .14);
	list-style: none;
}

.msp-security-process li {
	min-height: 220px;
	padding: 26px 22px;
	border-right: 1px solid rgba(42, 38, 30, .14);
}

.msp-security-process li:first-child { padding-left: 0; }
.msp-security-process li:last-child { border-right: 0; }

.msp-security-process li > span {
	color: #a9853d;
	font-family: "Jura", Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
}

.msp-security-process h3 {
	margin: 40px 0 10px;
	color: #1f2937;
	font-size: 22px;
	font-weight: 600;
	letter-spacing: -.02em;
}

.msp-security-process p {
	margin: 0;
	color: #746f66;
	font-size: 14px;
	line-height: 1.65;
}

.msp-security-faq { background: #f8f6f1; }

@media (max-width: 1100px) {
	.msp-security-plan__head,
	.msp-security-case__grid,
	.msp-security-arch__head,
	.msp-security-handover__head,
	.msp-security-proof__head {
		grid-template-columns: 1fr;
	}

	.msp-security-arch__core {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.msp-security-arch__core article {
		flex: 0 0 min(78vw, 280px);
	}

	.msp-security-arch__link {
		flex: 0 0 48px;
	}

	.msp-security-arch__layers {
		grid-template-columns: 1fr;
	}

	.msp-security-handover__grid,
	.msp-security-proof__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.msp-security-arch__layers article {
		border-right: 0;
		border-bottom: 1px solid rgba(42, 38, 30, .12);
	}

	.msp-security-arch__layers article:last-child { border-bottom: 0; }

	.msp-security-handover__grid article:nth-child(2) { border-right: 0; }
	.msp-security-handover__grid article:nth-child(-n+2) {
		border-bottom: 1px solid rgba(42, 38, 30, .12);
	}

	.msp-security-handover__grid article:first-child {
		padding-left: 22px;
	}

	.msp-security-arch__note {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.msp-security-editor {
		grid-template-columns: 1fr;
	}

	.msp-security-editor .msp-plan-editor__intro {
		min-height: auto;
		border-right: 0;
		border-bottom: 1px solid rgba(42, 38, 30, .14);
	}

	.msp-security-editor .msp-plan-editor__tools {
		display: flex;
		overflow-x: auto;
	}

	.msp-security-editor .msp-plan-editor__tools button {
		flex: 0 0 96px;
		min-height: 84px;
	}

	.msp-security-plan__legend {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.msp-security-process ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.msp-security-process li:nth-child(2) { border-right: 0; }
}

@media (max-width: 820px) {
	.msp-sec-device b { display: none; }

	.msp-security-sim {
		grid-template-columns: 1fr;
	}

	.msp-security-sim__bar {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .08);
	}

	.msp-security-editor .msp-plan-editor__selection {
		gap: 10px;
	}

	.msp-security-editor .msp-plan-editor__remove {
		margin-left: 0;
	}

	.msp-security-plan__media figcaption {
		grid-template-columns: 1fr 1fr;
	}

	.msp-security-plan__media figcaption span:nth-child(2) { border-right: 0; }

	.msp-security-plan__legend {
		grid-template-columns: 1fr 1fr;
	}

	.msp-security-handover__grid,
	.msp-security-proof__grid {
		grid-template-columns: 1fr;
	}

	.msp-security-handover__grid article {
		border-right: 0;
		border-bottom: 1px solid rgba(42, 38, 30, .12);
		padding-left: 0;
		padding-right: 0;
	}

	.msp-security-handover__grid article:last-child { border-bottom: 0; }

	.msp-security-process ol {
		grid-template-columns: 1fr;
	}

	.msp-security-process li,
	.msp-security-process li:first-child {
		padding: 22px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(42, 38, 30, .14);
	}

	.msp-security-process li:last-child { border-bottom: 0; }

	.msp-security-process h3 { margin-top: 24px; }
}