/* ==========================================================================
   Componentes animados: mockups de "O que desenvolvemos", fundo e ícones do
   Diferencial e as seções de cases (uma por categoria, navegação e dispositivos).
   ========================================================================== */

/* ====================================================== mockups (O que desenvolvemos) */
.mock {
	position: relative;
	aspect-ratio: 6 / 5;
	margin-bottom: 20px;
	border-radius: 12px;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 100% 0%, #ece4ff 0%, transparent 60%),
		#f6f4fc;
	font-family: var(--body);
	color: var(--ink);
	-webkit-user-select: none;
	user-select: none;
}
.mk-win {
	position: absolute;
	inset: 9% 7% 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e1f3;
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	box-shadow: 0 18px 40px -20px rgba(60, 20, 140, .35);
	overflow: hidden;
}
.mk-bar { display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-bottom: 1px solid #efebf8; background: #faf9fe; }
.mk-bar > i { width: 7px; height: 7px; border-radius: 50%; background: #e2dcf1; }
.mk-url { margin-left: 10px; padding: 2px 10px; border-radius: 99px; background: #f1edfa; color: #8a83a3; font-size: 9px; font-weight: 500; }

/* ---- sistemas: painel */
.mk-body { flex: 1; display: grid; grid-template-columns: 30px 1fr; min-height: 0; }
.mk-side { display: flex; flex-direction: column; gap: 8px; padding: 10px 7px; border-right: 1px solid #f1edfa; }
.mk-side b { height: 16px; border-radius: 5px; background: #f1edfa; }
.mk-side b.on { background: var(--brand); animation: mk-pulse 2.4s ease-in-out infinite; }
.mk-main { display: flex; flex-direction: column; gap: 9px; padding: 10px; min-width: 0; }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mk-kpi { padding: 7px 8px; border: 1px solid #efebf8; border-radius: 8px; }
.mk-kpi small { display: block; color: #8a83a3; font-size: 8px; font-weight: 500; }
.mk-kpi strong { display: block; font-family: var(--display); font-size: 15px; font-weight: 700; line-height: 1.2; }
.mk-kpi--up strong { color: #16956f; }
@property --n { syntax: "<integer>"; inherits: false; initial-value: 0; }
.mk-count { --n: var(--to); counter-reset: n var(--n); animation: mk-count 8s cubic-bezier(.2, .8, .2, 1) infinite; }
.mk-count::after { content: counter(n); }
.mk-count--pct::after { content: counter(n) "%"; }
@keyframes mk-count { 0% { --n: 0; } 28%, 100% { --n: var(--to); } }
.mk-chart {
	flex: 1;
	display: flex;
	align-items: flex-end;
	gap: 6%;
	min-height: 0;
	padding: 8px 8px 0;
	border: 1px solid #efebf8;
	border-radius: 8px;
	background: repeating-linear-gradient(0deg, transparent 0 22%, #f4f1fb 22% calc(22% + 1px));
}
.mk-chart span {
	flex: 1;
	height: var(--h);
	border-radius: 4px 4px 0 0;
	background: linear-gradient(180deg, var(--brand), #b48cff);
	transform-origin: bottom;
	animation: mk-grow 8s cubic-bezier(.2, .8, .2, 1) infinite;
	animation-delay: calc(var(--i) * 70ms);
}
.mk-chart span:last-child { background: linear-gradient(180deg, #16c08f, #8de1c0); }
@keyframes mk-grow { 0% { transform: scaleY(.05); } 30%, 92% { transform: scaleY(1); } 100% { transform: scaleY(.05); } }
.mk-rows { display: flex; flex-direction: column; gap: 5px; }
.mk-row { display: flex; align-items: center; gap: 7px; height: 20px; padding: 0 7px; border-radius: 6px; background: #faf9fe; }
.mk-row i { width: 10px; height: 10px; border-radius: 50%; background: #e2dcf1; flex: none; }
.mk-row b { height: 5px; border-radius: 3px; background: #e6e1f3; }
.mk-row em { margin-left: auto; padding: 1px 7px; border-radius: 99px; background: #f0e9ff; color: var(--brand); font-size: 8px; font-style: normal; font-weight: 700; }
.mk-row em.ok { background: #e3f7ef; color: #16956f; }
.mk-row--new { animation: mk-row 8s ease infinite; }
@keyframes mk-row {
	0%, 45% { opacity: 0; transform: translateY(-8px); background: #faf9fe; }
	52% { opacity: 1; transform: none; background: #f0e9ff; }
	80% { background: #f0e9ff; }
	92%, 100% { opacity: 1; background: #faf9fe; }
}
@keyframes mk-pulse { 50% { box-shadow: 0 0 0 4px rgba(128, 12, 251, .18); } }

/* ---- aplicativos: celular + cartão flutuante */
.mock--app { display: grid; place-items: center; }
.mk-phone {
	position: relative;
	width: 52%;
	height: 92%;
	margin-top: 14%;
	margin-right: 34%;
	padding: 26px 10px 0;
	border: 5px solid var(--ink);
	border-bottom: 0;
	border-radius: 26px 26px 0 0;
	background: #fff;
	box-shadow: 0 20px 40px -18px rgba(23, 15, 46, .45);
	overflow: hidden;
}
.mk-notch { position: absolute; top: 6px; left: 50%; width: 34%; height: 10px; border-radius: 99px; background: var(--ink); transform: translateX(-50%); }
.mk-app-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mk-app-head strong { font-family: var(--display); font-size: 15px; font-weight: 800; }
.mk-progress { width: 42%; height: 5px; border-radius: 99px; background: #f1edfa; overflow: hidden; }
.mk-progress i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--brand); animation: mk-progress 9s ease infinite; }
@keyframes mk-progress { 0%, 8% { width: 0; } 20% { width: 25%; } 32% { width: 50%; } 44% { width: 75%; } 56%, 90% { width: 100%; } 100% { width: 0; } }
.mk-tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-tasks li { display: flex; align-items: center; gap: 7px; padding: 7px; border: 1px solid #efebf8; border-radius: 8px; font-size: 9px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.mk-chk { flex: none; display: grid; place-items: center; width: 14px; height: 14px; border: 1.5px solid #d6cdee; border-radius: 4px; animation: mk-chk-box 9s ease infinite; animation-delay: calc(var(--i) * 1.08s); }
.mk-chk svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14; stroke-dashoffset: 14; animation: mk-chk-tick 9s ease infinite; animation-delay: calc(var(--i) * 1.08s); }
.mk-txt { position: relative; color: var(--ink); animation: mk-done 9s ease infinite; animation-delay: calc(var(--i) * 1.08s); }
@keyframes mk-chk-box { 0%, 10% { background: transparent; border-color: #d6cdee; } 13%, 88% { background: var(--brand); border-color: var(--brand); } 96%, 100% { background: transparent; border-color: #d6cdee; } }
@keyframes mk-chk-tick { 0%, 11% { stroke-dashoffset: 14; } 16%, 88% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 14; } }
@keyframes mk-done { 0%, 13% { color: var(--ink); text-decoration-color: transparent; } 16%, 88% { color: #a7a1bd; text-decoration: line-through; text-decoration-color: #a7a1bd; } 96%, 100% { color: var(--ink); } }
.mk-toast {
	position: absolute;
	top: 24px;
	left: 6px;
	right: 6px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 7px 8px;
	border-radius: 10px;
	background: var(--ink);
	color: #fff;
	box-shadow: 0 10px 24px -8px rgba(23, 15, 46, .5);
	animation: mk-toast 9s cubic-bezier(.2, .8, .2, 1) infinite;
}
.mk-toast strong { display: block; font-size: 9px; }
.mk-toast small { display: block; color: #c3bcdc; font-size: 8px; }
.mk-spark { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--brand); font-size: 10px; }
@keyframes mk-toast { 0%, 60% { opacity: 0; transform: translateY(-140%); } 66%, 84% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-140%); } }
.mk-float {
	position: absolute;
	right: 5%;
	bottom: 12%;
	width: 38%;
	padding: 10px 12px;
	border: 1px solid #e6e1f3;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 34px -16px rgba(60, 20, 140, .4);
	animation: mk-float 6s ease-in-out infinite;
}
.mk-float small { display: block; color: #8a83a3; font-size: 8.5px; font-weight: 500; }
.mk-float strong { display: block; font-family: var(--display); font-size: 15px; font-weight: 800; }
.mk-spark-line { width: 100%; height: auto; margin-top: 4px; }
.mk-spark-line path { fill: none; stroke: #16c08f; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; animation: mk-draw 6s ease infinite; }
@keyframes mk-draw { 0% { stroke-dashoffset: 140; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -140; } }
@keyframes mk-float { 50% { transform: translateY(-6px); } }

/* ---- websites: navegador + cursor + contato */
.mk-page { flex: 1; padding: 10px 12px; }
.mk-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.mk-nav span { width: 9%; height: 4px; border-radius: 3px; background: #e6e1f3; }
.mk-logo { width: 18%; height: 9px; margin-right: auto; border-radius: 3px; background: var(--ink); }
.mk-navbtn { width: 14%; height: 10px; border-radius: 99px; background: var(--brand); }
.mk-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; align-items: center; }
.mk-copy b { display: block; height: 10px; margin-bottom: 6px; border-radius: 3px; background: var(--ink); }
.mk-copy span { display: block; height: 4px; margin: 0 0 5px; border-radius: 3px; background: #e6e1f3; }
.mk-cta {
	position: relative;
	display: inline-block;
	margin-top: 8px;
	padding: 6px 12px;
	border-radius: 99px;
	background: var(--brand);
	color: #fff;
	font-size: 9px;
	font-style: normal;
	font-weight: 700;
	animation: mk-cta 7s ease infinite;
}
.mk-ripple { position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--brand); opacity: 0; animation: mk-ripple 7s ease-out infinite; }
@keyframes mk-cta { 0%, 40% { transform: none; } 43% { transform: scale(.94); } 47%, 100% { transform: none; } }
@keyframes mk-ripple { 0%, 42% { opacity: 0; transform: scale(1); } 44% { opacity: .9; } 60%, 100% { opacity: 0; transform: scale(1.6, 2.2); } }
.mk-img { aspect-ratio: 1; border-radius: 10px; background: linear-gradient(135deg, #b48cff, var(--brand)); position: relative; overflow: hidden; }
.mk-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-100%); animation: mk-shine 7s ease infinite; }
@keyframes mk-shine { 0%, 10% { transform: translateX(-100%); } 30%, 100% { transform: translateX(100%); } }
.mk-cursor {
	position: absolute;
	left: 0;
	top: 0;
	width: 18px;
	height: 18px;
	fill: var(--ink);
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linejoin: round;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25));
	animation: mk-cursor 7s cubic-bezier(.45, .05, .25, 1) infinite;
}
@keyframes mk-cursor {
	0% { transform: translate(560%, 560%); opacity: 0; }
	8% { opacity: 1; }
	36%, 46% { transform: translate(185%, 400%); opacity: 1; }
	40% { transform: translate(185%, 400%) scale(.85); }
	70% { transform: translate(450%, 330%); opacity: 1; }
	80%, 100% { transform: translate(450%, 330%); opacity: 0; }
}
.mk-wa {
	position: absolute;
	right: 6%;
	bottom: 8%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 8px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid #e6e1f3;
	box-shadow: 0 14px 30px -12px rgba(23, 15, 46, .4);
	animation: mk-wa 7s cubic-bezier(.2, .8, .2, 1) infinite;
}
.mk-wa__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #25d366; }
.mk-wa__icon svg { width: 14px; height: 14px; fill: #fff; }
.mk-wa strong { display: block; font-size: 9.5px; }
.mk-wa small { display: block; color: #8a83a3; font-size: 8.5px; }
@keyframes mk-wa { 0%, 50% { opacity: 0; transform: translateY(14px) scale(.9); } 56%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(8px); } }

/* ====================================================== mockups (O que conecta tudo isso) */

/* ---- SEO: a busca é digitada e o site sobe para o 1º lugar */
.mk-serp { flex: 1; display: flex; flex-direction: column; gap: 9px; min-height: 0; padding: 10px 12px; }
.mk-search {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 24px;
	padding: 0 10px;
	border: 1px solid #e6e1f3;
	border-radius: 99px;
	box-shadow: 0 6px 14px -10px rgba(60, 20, 140, .4);
	font-size: 9.5px;
	font-weight: 500;
	white-space: nowrap;
}
.mk-search svg { flex: none; width: 11px; height: 11px; fill: none; stroke: #8a83a3; stroke-width: 2.4; stroke-linecap: round; }
.mk-query { display: inline-block; width: 0; overflow: hidden; animation: mk-type 9s steps(19) infinite; }
.mk-caret { flex: none; width: 1px; height: 11px; margin-left: -4px; background: var(--brand); animation: mk-blink 1s steps(1) infinite; }
@keyframes mk-type { 0%, 4% { width: 0; } 22%, 94% { width: 19ch; } 100% { width: 0; } }
@keyframes mk-blink { 50% { opacity: 0; } }
.mk-results { flex: 1; display: grid; grid-template-rows: repeat(3, 1fr); gap: 6px; min-height: 0; }
.mk-result {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	min-height: 0;
	padding: 0 9px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #faf9fe;
	animation: mk-rank-down 9s cubic-bezier(.65, 0, .25, 1) infinite;
}
.mk-result small { display: flex; align-items: center; gap: 5px; color: #8a83a3; font-size: 7.5px; font-weight: 500; line-height: 1; }
.mk-result b { height: 6px; border-radius: 3px; background: #9d95c4; }
.mk-result span { height: 4px; border-radius: 3px; background: #e6e1f3; }
.mk-result--you { z-index: 1; border-color: #e2d8fb; background: #fff; animation-name: mk-rank-up; }
.mk-result--you b { background: var(--brand); }
.mk-result--you em { padding: 2px 5px; border-radius: 99px; background: #16a77c; color: #fff; font-size: 7px; font-style: normal; font-weight: 700; animation: mk-badge 9s ease infinite; }
@keyframes mk-rank-down { 0%, 30% { transform: none; } 42%, 92% { transform: translateY(calc(100% + 6px)); } 100% { transform: none; } }
@keyframes mk-rank-up {
	0%, 30% { transform: none; box-shadow: none; }
	42%, 92% { transform: translateY(calc(-200% - 12px)); box-shadow: 0 10px 22px -12px rgba(128, 12, 251, .55); }
	100% { transform: none; box-shadow: none; }
}
@keyframes mk-badge { 0%, 42% { opacity: 0; transform: scale(.4); } 47%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mk-traffic {
	position: absolute;
	right: 4%;
	bottom: 6%;
	width: 36%;
	padding: 8px 10px 6px;
	border: 1px solid #e6e1f3;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 16px 34px -16px rgba(60, 20, 140, .45);
	animation: mk-float 6s ease-in-out infinite;
}
.mk-traffic small { display: block; color: #8a83a3; font-size: 8.5px; font-weight: 500; }
.mk-traffic svg { display: block; width: 100%; height: auto; margin-top: 4px; }
.mk-traffic__line { fill: none; stroke: #16c08f; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 140; stroke-dashoffset: 140; animation: mk-traffic 9s ease infinite; }
.mk-traffic__area { fill: rgba(22, 192, 143, .14); opacity: 0; animation: mk-traffic-area 9s ease infinite; }
@keyframes mk-traffic { 0%, 40% { stroke-dashoffset: 140; } 70%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 140; } }
@keyframes mk-traffic-area { 0%, 55% { opacity: 0; } 72%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* ---- APIs: sistemas ligados por um hub, com dados indo e voltando */
.mk-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-links__base path { fill: none; stroke: #d9cff3; stroke-width: 1.5; stroke-dasharray: 3 4; }
.mk-links__packets path {
	fill: none;
	stroke: var(--brand);
	stroke-width: 3;
	stroke-linecap: round;
	stroke-dasharray: 14 100;
	stroke-dashoffset: 14;
	animation: mk-packet 3.2s cubic-bezier(.5, 0, .5, 1) infinite both;
	animation-delay: calc(var(--i) * .8s);
}
@keyframes mk-packet { 0% { stroke-dashoffset: 14; opacity: 0; } 8% { opacity: 1; } 62% { stroke-dashoffset: -100; opacity: 1; } 63%, 100% { stroke-dashoffset: -100; opacity: 0; } }
.mk-node {
	position: absolute;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 4px 9px 4px 4px;
	border: 1px solid #e6e1f3;
	border-radius: 99px;
	background: #fff;
	box-shadow: 0 10px 22px -12px rgba(60, 20, 140, .45);
	font-size: 9.5px;
	font-weight: 700;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}
.mk-node__ico { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); animation: mk-ping 3.2s ease-out infinite both; animation-delay: calc(var(--i) * .8s); }
.mk-node__ico svg { width: 11px; height: 11px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mk-node__ico--crm { background: #2a8fe0; --ping: rgba(42, 143, 224, .35); }
.mk-node__ico--wa { background: #25d366; --ping: rgba(37, 211, 102, .35); }
.mk-node__ico--n8n { background: #ea4b71; --ping: rgba(234, 75, 113, .35); }
.mk-node__ico--ai { --ping: rgba(128, 12, 251, .35); }
@keyframes mk-ping { 0% { box-shadow: 0 0 0 0 var(--ping); } 30%, 100% { box-shadow: 0 0 0 7px transparent; } }
.mk-hub {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 9px 13px;
	border-radius: 14px;
	background: var(--ink);
	color: #fff;
	font: 800 12px/1 var(--display);
	transform: translate(-50%, -50%);
	animation: mk-hub 1.6s ease-out infinite;
}
.mk-hub svg { width: 14px; height: 14px; fill: none; stroke: var(--lilac); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@keyframes mk-hub {
	0% { box-shadow: 0 14px 30px -12px rgba(23, 15, 46, .55), 0 0 0 0 rgba(128, 12, 251, .3); }
	100% { box-shadow: 0 14px 30px -12px rgba(23, 15, 46, .55), 0 0 0 10px rgba(128, 12, 251, 0); }
}
.mk-log {
	position: absolute;
	left: 50%;
	bottom: 5%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 9px;
	border-radius: 8px;
	background: var(--ink);
	color: #c3bcdc;
	font: 500 8.5px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
	white-space: nowrap;
	transform: translateX(-50%);
	box-shadow: 0 12px 24px -12px rgba(23, 15, 46, .6);
}
.mk-log em { color: var(--lilac); font-style: normal; font-weight: 700; }
.mk-log b { color: #5df2b0; animation: mk-ok 1.6s ease infinite; }
@keyframes mk-ok { 0%, 40% { opacity: .35; } 55%, 100% { opacity: 1; } }

/* ---- consultoria: mapa do processo, o diagnóstico marca o manual e vira automático */
.mock--flow {
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(128, 12, 251, .4) 0%, transparent 60%),
		var(--ink-2);
	color: var(--text-light);
}
.card--media:hover .mock--flow { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.mk-board {
	position: absolute;
	inset: 9% 7% 0;
	display: flex;
	flex-direction: column;
	padding: 11px 12px;
	border: 1px solid rgba(255, 255, 255, .1);
	border-bottom: 0;
	border-radius: 12px 12px 0 0;
	background: #1b1336;
	box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .6);
	overflow: hidden;
}
.mk-board__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.mk-board__head strong { font: 700 11px/1 var(--display); }
.mk-board__head span { padding: 2px 8px; border-radius: 99px; background: rgba(180, 140, 255, .16); color: var(--lilac); font-size: 8px; font-weight: 700; }
.mk-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mk-steps li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 6px 7px;
	border: 1px solid rgba(255, 255, 255, .06);
	border-radius: 8px;
	background: rgba(255, 255, 255, .05);
	font-size: 9px;
	font-weight: 600;
	white-space: nowrap;
	animation: mk-step 10s ease infinite both;
	animation-delay: calc(var(--i) * .45s);
}
.mk-step__n { display: grid; place-items: center; flex: none; width: 15px; height: 15px; border-radius: 50%; background: rgba(255, 255, 255, .1); font-size: 8px; }
.mk-step__txt { overflow: hidden; text-overflow: ellipsis; }
.mk-flag { display: grid; margin-left: auto; }
.mk-flag em { grid-area: 1 / 1; padding: 1px 6px; border-radius: 99px; font-size: 7.5px; font-style: normal; font-weight: 700; text-align: center; opacity: 0; animation: 10s ease infinite both; animation-delay: calc(var(--i) * .45s); }
.mk-flag em:first-child { background: rgba(242, 106, 27, .2); color: #ff9a5c; animation-name: mk-flag-manual; }
.mk-flag em:last-child { background: rgba(22, 167, 124, .22); color: #5df2b0; animation-name: mk-flag-auto; }
@keyframes mk-step { 0%, 10% { border-color: rgba(255, 255, 255, .06); } 13% { border-color: rgba(180, 140, 255, .6); } 20%, 100% { border-color: rgba(255, 255, 255, .06); } }
@keyframes mk-flag-manual { 0%, 11% { opacity: 0; transform: scale(.6); } 14%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; transform: scale(.6); } }
@keyframes mk-flag-auto { 0%, 47% { opacity: 0; transform: scale(.6); } 51%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
.mk-scan {
	position: absolute;
	left: 0;
	right: 0;
	top: 12%;
	height: 26px;
	border-bottom: 1.5px solid var(--lilac);
	background: linear-gradient(180deg, transparent, rgba(180, 140, 255, .18));
	opacity: 0;
	animation: mk-scan 10s ease-in-out infinite;
}
@keyframes mk-scan { 0%, 6% { top: 12%; opacity: 0; } 9% { opacity: 1; } 34% { top: 82%; opacity: 1; } 38%, 100% { top: 82%; opacity: 0; } }
.mk-saved {
	position: absolute;
	right: 6%;
	bottom: 7%;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px 8px 8px;
	border-radius: 12px;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .6);
	animation: mk-saved 10s cubic-bezier(.2, .8, .2, 1) infinite;
}
.mk-saved__ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #16a77c; }
.mk-saved__ico svg { width: 13px; height: 13px; fill: #fff; }
.mk-saved strong { display: block; font-size: 9.5px; }
.mk-saved small { display: block; color: #6b6585; font-size: 8.5px; }
@keyframes mk-saved { 0%, 56% { opacity: 0; transform: translateY(14px) scale(.9); } 62%, 92% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: translateY(8px); } }

/* ====================================================== diferencial: fundo e ícones */
.purple { position: relative; isolation: isolate; overflow: hidden; }
.purple__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.purple__bg::before {
	content: "";
	position: absolute;
	inset: -56px;
	background-image:
		linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 80% at 70% 30%, #000 0%, transparent 75%);
	animation: pb-grid 14s linear infinite;
}
.purple__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .12) 50%, transparent 60%);
	transform: translateX(-100%);
	animation: pb-sweep 9s ease-in-out infinite;
}
.pb-blob { position: absolute; border-radius: 50%; }
.pb-blob--a { width: 620px; height: 620px; top: -260px; right: -120px; background: radial-gradient(circle, rgba(194, 160, 255, .55), transparent 65%); animation: pb-drift-a 18s ease-in-out infinite alternate; }
.pb-blob--b { width: 520px; height: 520px; bottom: -280px; left: -160px; background: radial-gradient(circle, rgba(60, 0, 140, .55), transparent 65%); animation: pb-drift-b 22s ease-in-out infinite alternate; }
.pb-node { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .5; animation: pb-blink 4s ease-in-out infinite; }
@keyframes pb-grid { to { transform: translate(56px, 56px); } }
@keyframes pb-sweep { 0%, 55% { transform: translateX(-100%); } 85%, 100% { transform: translateX(100%); } }
@keyframes pb-drift-a { to { transform: translate(-140px, 120px) scale(1.15); } }
@keyframes pb-drift-b { to { transform: translate(160px, -90px) scale(1.1); } }
@keyframes pb-blink { 50% { opacity: 1; transform: scale(1.6); box-shadow: 0 0 0 6px rgba(255, 255, 255, .12); } }

.tile__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 18px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .14);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.tile__icon svg { width: 26px; height: 26px; overflow: visible; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* desenhar → código */
.ti-design .ti-a, .ti-design .ti-b { transform-box: fill-box; transform-origin: center; animation: ti-swap 6s ease-in-out infinite; }
.ti-design .ti-b { animation-delay: -3s; }
.ti-design .ti-line { stroke-dasharray: 20; animation: ti-draw 6s ease-in-out infinite; }
@keyframes ti-swap { 0%, 40% { opacity: 1; transform: none; } 50%, 90% { opacity: 0; transform: scale(.6) rotate(-20deg); } 100% { opacity: 1; transform: none; } }
@keyframes ti-draw { 0% { stroke-dashoffset: 20; } 30%, 45% { stroke-dashoffset: 0; } 50%, 100% { stroke-dashoffset: 20; } }
/* produção: batimento + status online */
.ti-prod .ti-pulse { stroke-dasharray: 48; stroke-dashoffset: 48; animation: ti-beat 2.6s linear infinite; }
.ti-prod .ti-dot { fill: #5df2b0; stroke: none; transform-box: fill-box; transform-origin: center; animation: ti-online 2s ease-in-out infinite; }
@keyframes ti-beat { 0% { stroke-dashoffset: 48; } 60% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -48; } }
@keyframes ti-online { 50% { transform: scale(1.5); opacity: .55; } }
/* IA: brilhos */
.ti-ai path { transform-box: fill-box; transform-origin: center; animation: ti-twinkle 3s ease-in-out infinite; }
.ti-ai path:nth-child(2) { animation-delay: .6s; }
.ti-ai path:nth-child(3) { animation-delay: 1.2s; }
@keyframes ti-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(45deg); opacity: .6; } }
/* conversa: digitando */
.ti-chat circle { fill: #fff; stroke: none; animation: ti-typing 1.4s ease-in-out infinite; }
.ti-chat circle:nth-of-type(2) { animation-delay: .18s; }
.ti-chat circle:nth-of-type(3) { animation-delay: .36s; }
@keyframes ti-typing { 0%, 60%, 100% { transform: translateY(0); opacity: .55; } 30% { transform: translateY(-2.2px); opacity: 1; } }
.ti-chat circle { transform-box: fill-box; }
.tile:hover .tile__icon { background: rgba(255, 255, 255, .22); }

/* ====================================================== cases: uma seção por categoria */
.cases { padding: clamp(72px, 9vw, 112px) 0; background: var(--ink); position: relative; overflow: hidden; }
.cases::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(900px 500px at 85% 0%, rgba(110, 40, 230, .28), transparent 70%);
	pointer-events: none;
}
.cases + .cases { border-top: 1px solid var(--line-dark); }
.cases--apps { background: #1b1239; }
.cases--apps::before { background: radial-gradient(900px 500px at 12% 6%, rgba(110, 40, 230, .3), transparent 70%); }
.cases > .wrap { position: relative; }
.cases__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(36px, 5vw, 56px); }
.cases__head h2 { margin: 0; max-width: 18ch; }
.cases__sub { max-width: 520px; margin: 14px 0 0; color: var(--muted-light); font-size: 1.08rem; }
.cases__pill:focus-visible, .cases__arrow:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }

/* barra de navegação dos cases da categoria */
.cases__nav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cases__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cases__pill {
	position: relative;
	padding: 9px 16px;
	border: 1px solid var(--line-dark);
	border-radius: 999px;
	background: transparent;
	color: var(--muted-light);
	font: 600 14px/1 var(--body);
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.cases__pill:hover { color: #fff; border-color: rgba(255, 255, 255, .25); }
.cases__pill[aria-selected="true"] { color: var(--ink); background: #fff; border-color: #fff; }
.cases__ctrl { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cases__count { min-width: 42px; text-align: center; color: var(--muted-light); font-size: 14px; font-variant-numeric: tabular-nums; }
.cases__arrow {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid var(--line-dark);
	border-radius: 50%;
	background: var(--ink-2);
	color: #fff;
	cursor: pointer;
	transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.cases__arrow:hover { background: var(--brand); border-color: var(--brand); }
.cases__arrow:active { transform: scale(.94); }
.cases__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* sem JS: cases empilhados, sem controles */
.cases-group:not(.is-enhanced) .cases__nav { display: none; }

/* painel do case */
.case { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.case + .case { margin-top: 96px; } /* sem JS os cases aparecem empilhados */
.is-enhanced .case + .case { margin-top: 0; }
.is-enhanced .case[hidden] { display: none; }
.is-enhanced .case.is-entering .case__text > * { animation: case-in .6s cubic-bezier(.2, .8, .2, 1) both; }
.is-enhanced .case.is-entering .case__text > :nth-child(2) { animation-delay: .05s; }
.is-enhanced .case.is-entering .case__text > :nth-child(3) { animation-delay: .1s; }
.is-enhanced .case.is-entering .case__text > :nth-child(4) { animation-delay: .15s; }
.is-enhanced .case.is-entering .case__text > :nth-child(5) { animation-delay: .2s; }
.is-enhanced .case.is-entering .case__visual { animation: case-visual .8s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes case-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes case-visual { from { opacity: 0; transform: translateX(30px) scale(.97); } to { opacity: 1; transform: none; } }
.case__title { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.case__lead { font-size: 1.15rem; color: var(--muted-light); }
.case .ticks li { color: var(--text-light); }
.case__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.case__link { color: var(--lilac); font-weight: 700; text-decoration: none; }
.case__link:hover { text-decoration: underline; }
/* aplicativos em espelho: o palco à esquerda, para variar o ritmo entre as seções */
@media (min-width: 901px) {
	.cases--apps .case { grid-template-columns: 7fr 5fr; }
	.cases--apps .case__visual { order: -1; }
	.cases--apps .dv-chip--ml { left: -2%; }
}
@media (max-width: 900px) {
	.case { grid-template-columns: 1fr; }
	.case__visual { order: -1; }
	.cases__nav { width: 100%; }
}

/* ====================================================== dispositivos dos cases */
.dv-stage { position: relative; padding: 4% 6% 10% 0; }
.dv-browser {
	position: relative;
	border-radius: 14px;
	background: #1b1336;
	border: 1px solid rgba(255, 255, 255, .1);
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .2);
	overflow: hidden;
}
.dv-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #241a46; }
.dv-bar > i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.dv-bar > i:nth-child(1) { background: #ff6159; } .dv-bar > i:nth-child(2) { background: #ffbd2e; } .dv-bar > i:nth-child(3) { background: #28c941; }
.dv-url { margin: 0 auto; padding: 4px 14px; border-radius: 99px; background: rgba(255, 255, 255, .08); color: var(--muted-light); font-size: 11px; display: inline-flex; align-items: center; gap: 6px; }
.dv-url svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.dv-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #0f0a20; }
.dv-screen img { position: absolute; display: block; max-width: none; }
/* app: imagem preenche e "passeia" devagar pela tela */
.dv-screen--pan img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 0%; animation: dv-pan 18s ease-in-out infinite alternate; }
@keyframes dv-pan { 0%, 10% { object-position: 0% 0%; transform: scale(1.02); } 90%, 100% { object-position: 100% 100%; transform: scale(1.08); } }
/* site: print inteiro rola dentro da tela */
.dv-screen--scroll img { left: 0; top: 0; width: 100%; height: auto; animation: dv-scroll var(--dur, 22s) cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes dv-scroll {
	0%, 8% { transform: translateY(0); }
	46%, 54% { transform: translateY(calc(-100% + var(--frame-h, 360px))); }
	92%, 100% { transform: translateY(0); }
}
.dv-phone {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 25%;
	padding: 7px;
	border-radius: 26px;
	background: #0b0718;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(255, 255, 255, .12);
	animation: dv-bob 7s ease-in-out infinite;
}
.dv-phone .dv-screen { aspect-ratio: 9 / 19; border-radius: 20px; }
.dv-phone .dv-screen img { animation-delay: -6s; }
.dv-phone::before { content: ""; position: absolute; top: 12px; left: 50%; z-index: 2; width: 30%; height: 6px; border-radius: 99px; background: #0b0718; transform: translateX(-50%); }
@keyframes dv-bob { 50% { transform: translateY(-8px); } }

/* aplicativos: dois iPhones com as telas reais trocando sozinhas (cases.js) */
.dv-stage--phone { padding: 2% 0 9%; }
.dv-phones {
	position: relative;
	display: grid;
	place-items: center;
	container-type: inline-size;
}
.dv-phones::before {
	content: "";
	position: absolute;
	inset: 8% 14%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(128, 12, 251, .45), transparent);
	filter: blur(30px);
	pointer-events: none;
}
.dv-iphone {
	grid-area: 1 / 1;
	position: relative;
	width: 37cqw;
	padding: 1.2cqw;
	border-radius: 6.2cqw;
	background: linear-gradient(150deg, #4c4566 0%, #1d1830 28%, #0c0916 68%, #3b3454 100%);
	box-shadow:
		inset 0 0 0 .22cqw rgba(255, 255, 255, .24),
		inset 0 0 0 .7cqw #08060f,
		0 40px 80px -28px rgba(0, 0, 0, .8);
}
.dv-iphone::before, .dv-iphone::after {
	content: "";
	position: absolute;
	width: .55cqw;
	border-radius: 2px;
	background: linear-gradient(90deg, #2c2640, #4c4566);
}
.dv-iphone::before { left: -.45cqw; top: 22%; height: 15%; background: linear-gradient(180deg, #4c4566 0 44%, transparent 44% 56%, #4c4566 56%); }
.dv-iphone::after { right: -.45cqw; top: 26%; height: 11%; }
/* posição com translate/scale/rotate: o transform fica livre para o balanço (dv-bob) */
.dv-iphone--front { z-index: 1; translate: 30% 0; animation: dv-bob 7s ease-in-out infinite; }
.dv-iphone--back { translate: -62% 5%; scale: .86; rotate: -5deg; filter: brightness(.72) saturate(.9); animation: dv-bob 7s ease-in-out -3.5s infinite; }
.dv-iphone__screen {
	position: relative;
	aspect-ratio: 600 / 1303;
	border-radius: 5.2cqw;
	overflow: hidden;
	background: #05060c;
	container-type: inline-size;
}
.dv-iphone__screen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.dv-iphone__screen img.is-on { opacity: 1; transform: none; }
.dv-iphone__status {
	position: absolute;
	inset: 0 0 auto;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 14cqw;
	padding: 0 7.5cqw 0 12cqw;
	color: #fff;
	font: 600 4.3cqw/1 -apple-system, "SF Pro Text", var(--body);
	letter-spacing: -.01em;
}
.dv-iphone__status svg { width: 19cqw; height: auto; fill: #fff; }
.dv-iphone__screen::before {
	/* Dynamic Island */
	content: "";
	position: absolute;
	top: 2.9cqw;
	left: 50%;
	z-index: 3;
	width: 31cqw;
	height: 9.2cqw;
	border-radius: 99px;
	background: #000;
	transform: translateX(-50%);
}
.dv-iphone__screen::after {
	/* indicador de início */
	content: "";
	position: absolute;
	bottom: 2.2cqw;
	left: 50%;
	z-index: 3;
	width: 34cqw;
	height: 1.3cqw;
	border-radius: 99px;
	background: rgba(255, 255, 255, .78);
	transform: translateX(-50%);
}
.dv-dots { position: absolute; left: 50%; bottom: -2px; z-index: 2; display: flex; gap: 6px; transform: translate(-50%, 100%); }
.dv-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: width .3s ease, background .3s ease;
}
.dv-dot:hover { background: rgba(255, 255, 255, .5); }
.dv-dot[aria-current="true"] { width: 22px; background: var(--lilac); }
.dv-dot:focus-visible { outline: 2px solid var(--lilac); outline-offset: 3px; }
.cases-group:not(.is-enhanced) .dv-dots { display: none; }

/* chips flutuantes */
.dv-chip {
	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px 10px 10px;
	border-radius: 14px;
	background: #fff;
	color: var(--ink);
	box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55);
	white-space: nowrap;
	animation: dv-chip 9s cubic-bezier(.2, .8, .2, 1) infinite;
	animation-delay: var(--delay, 0s);
}
.dv-chip strong { display: block; font-size: 13px; line-height: 1.25; }
.dv-chip small { display: block; color: #6b6585; font-size: 11.5px; }
.dv-chip__ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; }
.dv-chip__ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.dv-chip--orange .dv-chip__ico { background: #f26a1b; }
.dv-chip--green .dv-chip__ico { background: #16a77c; }
.dv-chip--blue .dv-chip__ico { background: #2a8fe0; }
.dv-chip--solid { background: var(--brand); color: #fff; }
.dv-chip--solid small { color: rgba(255, 255, 255, .8); }
.dv-chip--tl { top: 0; left: -4%; }
.dv-chip--tr { top: 8%; right: 2%; }
.dv-chip--ml { top: 52%; left: -8%; }
.dv-chip--bl { bottom: 4%; left: 4%; }
.dv-chip--br { bottom: 14%; right: 4%; }
@keyframes dv-chip {
	0% { opacity: 0; transform: translateY(14px) scale(.92); }
	8%, 88% { opacity: 1; transform: none; }
	48% { transform: translateY(-6px); }
	96%, 100% { opacity: 0; transform: translateY(-6px) scale(.96); }
}
.dv-meter { width: 150px; height: 6px; margin-top: 6px; border-radius: 99px; background: #eee9fa; overflow: hidden; }
.dv-meter i { display: block; height: 100%; width: var(--to, 78%); border-radius: inherit; background: var(--brand); transform-origin: left; animation: dv-meter 9s cubic-bezier(.2, .8, .2, 1) infinite; animation-delay: var(--delay, 0s); }
@keyframes dv-meter { 0%, 6% { transform: scaleX(0); } 30%, 100% { transform: scaleX(1); } }
.dv-note { position: absolute; right: 0; bottom: -26px; color: var(--muted-light); font-size: 12px; }
@media (max-width: 900px) {
	.dv-stage { padding: 6% 4% 12% 0; }
	.dv-chip { padding: 8px 10px 8px 8px; gap: 8px; }
	.dv-chip strong { font-size: 11.5px; }
	.dv-chip small { font-size: 10.5px; }
	.dv-chip__ico { width: 26px; height: 26px; }
	.dv-chip--ml { left: -2%; }
	.dv-chip--tl { left: 0; }
	.dv-meter { width: 110px; }
	.dv-phone { width: 32%; padding: 5px; border-radius: 20px; }
	.dv-phone .dv-screen { border-radius: 15px; }
	.dv-iphone { width: 44cqw; padding: 1.4cqw; border-radius: 7.4cqw; }
	.dv-iphone__screen { border-radius: 6.2cqw; }
	.dv-iphone--front { translate: 26% 0; }
	.dv-iphone--back { translate: -56% 5%; }
}

@media (prefers-reduced-motion: reduce) {
	.mock *, .mock *::before, .mock *::after,
	.purple__bg::before, .purple__bg::after, .pb-blob, .pb-node,
	.tile__icon *, .dv-screen img, .dv-phone, .dv-iphone, .dv-chip, .dv-meter i { animation: none !important; }
	.dv-iphone__screen img { transition: none; }
	.mk-toast, .mk-wa { opacity: 1; transform: none; }
	.mk-cursor, .mk-scan, .mk-links__packets { display: none; }
	.mk-query { width: auto; }
	.mk-result--you { order: -1; }
	.mk-traffic__line { stroke-dashoffset: 0; }
	.mk-traffic__area, .mk-flag em:last-child, .mk-saved { opacity: 1; }
}

/* ====================================================== home: aplicativos em fundo claro (alterna com as seções escuras) */
.home .cases--apps { background: var(--paper); color: var(--text-dark); border-top: 0; }
.home .cases--apps::before { background: radial-gradient(900px 500px at 12% 6%, rgba(180, 140, 255, .28), transparent 70%); }
.home .cases--apps + .cases { border-top: 0; }
.home .cases--apps .eyebrow { color: var(--brand); }
.home .cases--apps .cases__sub, .home .cases--apps .case__lead { color: var(--muted-dark); }
.home .cases--apps .case .ticks li { color: var(--text-dark); }
.home .cases--apps .cases__pill { border-color: #dcd6ec; color: var(--muted-dark); }
.home .cases--apps .cases__pill:hover { border-color: #b9addf; color: var(--ink); }
.home .cases--apps .cases__pill[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: #fff; }
.home .cases--apps .cases__count { color: var(--muted-dark); }
.home .cases--apps .cases__arrow { border-color: #dcd6ec; background: #fff; color: var(--ink); }
.home .cases--apps .cases__arrow:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.home .cases--apps .pill { background: var(--lilac-soft); color: var(--text-dark); }
.home .cases--apps .dv-phones::before { background: radial-gradient(closest-side, rgba(128, 12, 251, .3), transparent); }
.home .cases--apps .dv-dot { background: rgba(23, 15, 46, .18); }
.home .cases--apps .dv-dot:hover { background: rgba(23, 15, 46, .35); }
.home .cases--apps .dv-dot[aria-current="true"] { background: var(--brand); }
.home .cases--apps .dv-note { color: var(--muted-dark); }
.home .cases--apps .case__link { color: var(--brand); }

/* ====================================================== home: Vamos conversar com o formulário */
.contact__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.contact .contact__intro h2 { margin-bottom: 20px; }
.contact__intro .lead { margin: 0 0 24px; }
.contact__alt { margin: 0; color: var(--muted-light); }
.contact__alt a { color: var(--lilac); font-weight: 700; text-decoration: none; }
.contact__alt a:hover { text-decoration: underline; }
.contact__form { padding: clamp(22px, 3vw, 34px); border-radius: 26px; background: #fff; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .7); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* ====================================================== home: quem faz em fundo claro */
.about.light .timeline div { background: #fff; border: 1px solid var(--line-light); }
.about.light .timeline small { color: var(--brand); }
.about.light .timeline strong { color: var(--text-dark); }
.about.light .timeline span { color: var(--muted-dark); }
.about .card__more::before { display: none; }