/* ==========================================================================
   caixaLabs "Ligado" — styles for the effects in assets/js/cxl-effects.js.
   The brand's power ring is the protagonist: things light up, orbit and switch on.
   States that hide content before an effect runs are scoped to classes the script adds
   (.is-armed, .is-ready…), so the page still reads fine without JavaScript.
   ========================================================================== */

:root {
	--cxl-accent-2: #3ECF98;
	--cxl-night: #070B14;
	--cxl-blue-on-dark: #6AA6FF;
}

@property --cxl-vapour {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}
@property --cxl-beam-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

/* ---------- 1. hero: energy ring ---------- */
.cxl-hero-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}
.cxl-hero > .container {
	z-index: 1;
}
/* Static ring when WebGL is not available. */
.cxl-ring-fallback {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	width: min(76vmin, 720px);
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: conic-gradient(from 18deg, var(--base-color), var(--cxl-accent-2) 160deg, var(--base-color) 324deg, transparent 324deg);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
	opacity: 0.45;
	pointer-events: none;
}
.cxl-ring-static .cxl-ring-fallback {
	display: block;
}

/* ---------- 2. hero: word that turns into vapour ---------- */
.cxl-vapour {
	display: inline-block;
	white-space: nowrap;
}
.cxl-vapour.is-vaporizing {
	-webkit-mask-image: linear-gradient(90deg, transparent var(--cxl-vapour), #000 calc(var(--cxl-vapour) + 14%));
	mask-image: linear-gradient(90deg, transparent var(--cxl-vapour), #000 calc(var(--cxl-vapour) + 14%));
	animation: cxl-vapour-out 0.46s linear forwards;
}
.cxl-vapour.is-condensing {
	animation: cxl-vapour-in 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes cxl-vapour-out {
	from {
		--cxl-vapour: -14%;
	}
	to {
		--cxl-vapour: 100%;
	}
}
@keyframes cxl-vapour-in {
	from {
		opacity: 0;
		filter: blur(14px);
		transform: translateY(0.12em) scale(0.96);
	}
	to {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}
.cxl-vapour-canvas {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	pointer-events: none;
}

/* ---------- 3. universe of solutions (orbit) ---------- */
.cxl-universe {
	position: relative;
}
/* Room for the spinning badge that hangs over the "projetos" word right below. */
@media (min-width: 992px) {
	.cxl-universe {
		padding-bottom: 200px;
	}
}
.cxl-orbit {
	position: relative;
	width: 100%;
	max-width: 640px;
	aspect-ratio: 1;
	margin: 0 auto;
	user-select: none;
}
.cxl-orbit-track {
	position: absolute;
	inset: 10%;
	border-radius: 50%;
	border: 1px dashed rgba(28, 29, 31, 0.16);
	pointer-events: none;
}
.cxl-orbit-track--inner {
	inset: 27%;
	border: 1px solid rgba(1, 101, 255, 0.12);
	background: radial-gradient(circle, rgba(1, 101, 255, 0.06), transparent 70%);
}
.cxl-orbit-core {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
	width: 26%;
	aspect-ratio: 1;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 25px 60px rgba(1, 101, 255, 0.2), 0 0 0 1px rgba(1, 101, 255, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--base-color);
}
.cxl-orbit-logo {
	position: relative;
	z-index: 1;
	width: 58%;
	height: auto;
}
.cxl-orbit-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 2px solid var(--base-color);
	opacity: 0;
	animation: cxl-pulse 3.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
.cxl-orbit-pulse--late {
	animation-delay: 1.7s;
}
@keyframes cxl-pulse {
	0% {
		transform: scale(1);
		opacity: 0.45;
	}
	100% {
		transform: scale(2.4);
		opacity: 0;
	}
}
.cxl-orbit-nodes {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Each node is a zero-size point placed on the track (the template writes its resting spot;
   the script moves it from the center with transform). */
.cxl-orbit-node {
	position: absolute;
	width: 0;
	height: 0;
	transition: opacity 0.4s;
}
.cxl-orbit-node.is-active {
	z-index: 50 !important;
}
.cxl-orbit-node > button {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%, -32px) scale(var(--s, 1));
	transform-origin: 50% 32px;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: var(--alt-font);
}
.cxl-orbit-dot {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: #fff;
	color: var(--dark-gray);
	font-size: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 12px 30px rgba(7, 11, 20, 0.12), 0 0 0 1px rgba(1, 101, 255, 0.1);
	transition: background 0.3s, color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.cxl-orbit-label {
	padding: 7px 14px;
	border-radius: 30px;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 6px 18px rgba(7, 11, 20, 0.06);
	color: var(--dark-gray);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
}
.cxl-orbit-node > button:hover .cxl-orbit-dot,
.cxl-orbit-node > button:focus-visible .cxl-orbit-dot,
.cxl-orbit-node.is-active .cxl-orbit-dot {
	background: var(--base-color);
	color: #fff;
	transform: scale(1.08);
	box-shadow: 0 0 0 7px var(--base-color-pale), 0 14px 34px rgba(1, 101, 255, 0.4);
}
.cxl-orbit-node > button:focus-visible {
	outline: none;
}
.cxl-orbit-card {
	position: absolute;
	left: 0;
	top: 96px;
	width: 300px;
	transform: translateX(-50%);
	padding: 24px 26px 22px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 30px 70px rgba(7, 11, 20, 0.2), 0 0 0 1px rgba(1, 101, 255, 0.08);
	text-align: left;
	animation: cxl-card-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cxl-orbit-card[hidden] {
	display: none;
}
.cxl-orbit-card::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	background: #fff;
	transform: rotate(45deg);
	box-shadow: -1px -1px 0 rgba(1, 101, 255, 0.08);
}
@keyframes cxl-card-in {
	from {
		opacity: 0;
		transform: translate(-50%, 14px) scale(0.96);
	}
	to {
		opacity: 1;
		transform: translateX(-50%);
	}
}
.cxl-orbit-card-num {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1px;
	color: var(--base-color);
}
.cxl-orbit-card h3 {
	margin: 4px 0 8px;
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.5px;
	color: var(--dark-gray);
}
.cxl-orbit-card p {
	margin-bottom: 14px;
	font-size: 15px;
	line-height: 24px;
}
.cxl-orbit-related {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: -4px 0 14px;
	font-size: 12px;
	line-height: 1;
	color: var(--medium-gray);
}
.cxl-orbit-chip {
	padding: 5px 10px;
	border: 1px solid rgba(62, 207, 152, 0.45);
	border-radius: 30px;
	background: rgba(62, 207, 152, 0.08);
	color: var(--dark-gray);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background 0.25s, border-color 0.25s;
}
.cxl-orbit-chip:hover,
.cxl-orbit-chip:focus-visible {
	background: rgba(62, 207, 152, 0.2);
	border-color: var(--cxl-accent-2);
	outline: none;
}
/* Solutions that combine with the open one pulse in the accent green. */
.cxl-orbit-node.is-related .cxl-orbit-dot {
	color: var(--base-color);
	animation: cxl-related 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes cxl-related {
	0%,
	100% {
		box-shadow: 0 0 0 1px var(--cxl-accent-2), 0 12px 30px rgba(7, 11, 20, 0.12);
	}
	50% {
		box-shadow: 0 0 0 7px rgba(62, 207, 152, 0.25), 0 12px 30px rgba(62, 207, 152, 0.3);
	}
}
.cxl-orbit-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--dark-gray);
}
.cxl-orbit-card-link:hover {
	color: var(--base-color);
}
.cxl-orbit-hint {
	color: var(--medium-gray);
}

/* ---------- 4. showcase: the screen that straightens up ---------- */
.cxl-device-section {
	background: linear-gradient(180deg, #fff 0%, var(--base-color-pale) 50%, #fff 100%);
}
.cxl-device-head {
	position: relative;
	z-index: 1;
	will-change: transform;
}
.cxl-device-stage {
	margin-top: 70px;
}
.cxl-device {
	position: relative;
	max-width: 1080px;
	margin: 0 auto;
	padding: 14px;
	border-radius: 30px;
	background: #15171c;
	/* Layered shadow (as in Aceternity's Container Scroll) + a blue under-glow. */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 9px 20px rgba(0, 0, 0, 0.29), 0 37px 37px rgba(0, 0, 0, 0.26), 0 84px 50px rgba(0, 0, 0, 0.15), 0 149px 60px rgba(0, 0, 0, 0.04), 0 30px 70px -40px rgba(1, 101, 255, 0.55);
	transform-origin: 50% 20%;
	will-change: transform;
}
.cxl-device::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 5px;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: #3a3d45;
}
.cxl-device-screen {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 18px;
	background: #0b0d12;
}
.cxl-device-screen img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 0.9s ease, transform 3.6s ease;
}
.cxl-device-screen img.is-active {
	opacity: 1;
	transform: scale(1);
}

/* ---------- 5. project images trailing the cursor over "projetos" ---------- */
.cxl-trail-img {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 8;
	width: 200px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 24px 50px rgba(7, 11, 20, 0.28);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0.6);
}
/* Pops to 1.2x, then shrinks to nothing, like a light switching off (0.6 s). */
.cxl-trail-img.is-on {
	animation: cxl-trail 0.6s forwards;
}
@keyframes cxl-trail {
	0% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1);
		animation-timing-function: cubic-bezier(0, 0.55, 0.45, 1);
	}
	16.667% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(1.2);
		animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) rotate(var(--rot, 0deg)) scale(0);
	}
}

/* ---------- 6. living testimonials ---------- */
.cxl-testi-stack {
	position: relative;
	width: 300px;
	max-width: 100%;
	aspect-ratio: 1;
}
.cxl-testi-stack::before {
	content: "";
	position: absolute;
	inset: 12%;
	border-radius: 50%;
	background: var(--base-color);
	filter: blur(60px);
	opacity: 0.35;
}
.cxl-testi-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	transform-origin: 50% 125%;
	transform: rotate(var(--rot, 0deg)) scale(0.84);
	opacity: 0.5;
	filter: grayscale(0.7) brightness(0.65);
	/* z-index swaps at the top of the jump: the new photo rises from behind and lands in front. */
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.6s, filter 0.6s, z-index 0s 0.2s;
}
.cxl-testi-photo.is-active {
	transform: rotate(0deg) scale(1);
	opacity: 1;
	filter: none;
}
.cxl-testi-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--base-color);
	color: #fff;
	font-size: 110px;
	font-weight: 700;
}
.cxl-testi-items {
	display: grid;
}
/* The old quote leaves quickly (upwards) before the new one writes itself in. */
.cxl-testi-item {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.2s, transform 0.2s, visibility 0s 0.2s;
}
.cxl-testi-item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.3s 0.15s;
}
.cxl-testi-quote {
	margin: 0 0 35px;
	padding: 0;
	border: 0;
	font-size: 30px;
	line-height: 44px;
	letter-spacing: -0.5px;
}
.cxl-testi-quote .cxl-w {
	display: inline-block;
	opacity: 0;
	filter: blur(8px);
	transform: translateY(10px);
}
.cxl-testi-item.is-active .cxl-w {
	animation: cxl-word-in 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
	animation-delay: var(--d, 0s);
}
@keyframes cxl-word-in {
	to {
		opacity: 1;
		filter: blur(0);
		transform: none;
	}
}
.cxl-testi-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.22);
	background: transparent;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s, border-color 0.3s;
}
.cxl-testi-btn:hover,
.cxl-testi-btn:focus-visible {
	background: var(--base-color);
	border-color: var(--base-color);
	outline: none;
}
.cxl-testi-btn i {
	display: inline-block;
	transition: transform 0.3s;
}
.cxl-testi-btn[data-cxl-prev]:hover i {
	transform: rotate(12deg);
}
.cxl-testi-btn[data-cxl-next]:hover i {
	transform: rotate(-12deg);
}

/* ---------- 7. timeline with a beam of light ---------- */
.cxl-tl {
	position: relative;
	max-width: 1060px;
	margin: 0 auto;
}
.cxl-tl-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.cxl-tl-line {
	position: absolute;
	left: 21px;
	top: 10px;
	bottom: 40px;
	width: 2px;
	background: linear-gradient(to bottom, transparent, var(--extra-medium-gray) 5%, var(--extra-medium-gray) 95%, transparent);
}
.cxl-tl-beam {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 0;
	border-radius: 2px;
	/* Short green tip, blue body fading out behind it. */
	background: linear-gradient(to top, var(--cxl-accent-2), var(--base-color) 160px, rgba(1, 101, 255, 0.3) 60%, rgba(1, 101, 255, 0));
}
.cxl-tl-beam::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border-radius: 50%;
	background: var(--cxl-accent-2);
	box-shadow: 0 0 0 4px rgba(62, 207, 152, 0.2), 0 0 24px 6px rgba(62, 207, 152, 0.55);
}
.cxl-tl-item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding-bottom: 120px;
}
.cxl-tl-year {
	position: sticky;
	top: 150px;
	z-index: 2;
	flex: 0 0 42%;
	display: flex;
	align-items: center;
	gap: 28px;
}
.cxl-tl-dot {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 1px var(--extra-medium-gray);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--medium-gray);
	transition: background 0.5s, color 0.5s, box-shadow 0.5s;
}
.cxl-tl-dot::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--extra-medium-gray);
	transition: background 0.5s, box-shadow 0.5s;
}
.cxl-tl-item.is-active .cxl-tl-dot::before {
	background: var(--base-color);
	box-shadow: 0 0 0 5px var(--base-color-pale), 0 0 16px rgba(1, 101, 255, 0.6);
}
.cxl-tl-year-text {
	font-size: clamp(44px, 6vw, 92px);
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.045em;
	color: var(--dark-gray);
	transition: color 0.5s;
}
.cxl-tl-body {
	flex: 1;
	padding-top: 4px;
	transition: opacity 0.6s, transform 0.6s;
}
.cxl-tl-body h4 {
	font-size: 30px;
	line-height: 38px;
}
.cxl-tl-caption {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	padding: 8px 18px;
	border-radius: 30px;
	background: var(--very-light-gray);
	color: var(--dark-gray);
	font-size: 15px;
	line-height: 24px;
	font-weight: 500;
}
.cxl-tl.is-armed .cxl-tl-item:not(.is-active) .cxl-tl-year-text {
	color: var(--extra-medium-gray);
}
.cxl-tl.is-armed .cxl-tl-item:not(.is-active) .cxl-tl-body {
	opacity: 0.25;
	transform: translateY(24px);
}
.cxl-tl-item--future {
	padding-bottom: 20px;
}
/* The beam ends on the power button, so the button must not slide away with sticky positioning. */
.cxl-tl-item--future .cxl-tl-year {
	position: relative;
	top: auto;
}
.cxl-tl-item--future .cxl-tl-year-text {
	font-size: clamp(34px, 4.2vw, 60px);
}
.cxl-tl-dot--power::before {
	display: none;
}
.cxl-tl-dot--power svg {
	width: 22px;
	height: 22px;
}
.cxl-tl-item--future.is-active .cxl-tl-dot--power {
	background: var(--base-color);
	color: #fff;
	box-shadow: 0 0 0 7px var(--base-color-pale), 0 0 34px 8px rgba(1, 101, 255, 0.45);
	animation: cxl-power-on 1s linear;
}
@keyframes cxl-power-on {
	0% {
		opacity: 0.3;
	}
	12% {
		opacity: 1;
	}
	20% {
		opacity: 0.35;
	}
	32% {
		opacity: 1;
	}
	40% {
		opacity: 0.6;
	}
	52%,
	100% {
		opacity: 1;
	}
}

/* ---------- 8. expansion globe ---------- */
.cxl-globe {
	position: relative;
	width: 100%;
	max-width: 560px;
	aspect-ratio: 1;
	margin: 0 auto;
}
.cxl-globe::before {
	content: "";
	position: absolute;
	inset: 18%;
	border-radius: 50%;
	background: var(--base-color);
	filter: blur(70px);
	opacity: 0.16;
}
.cxl-globe canvas {
	position: relative;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: grab;
	touch-action: pan-y;
	transition: opacity 1.4s ease;
	contain: layout paint size;
}
/* COBE could not be loaded: a still sphere keeps the composition. */
.cxl-globe-off::before {
	inset: 10%;
	filter: none;
	opacity: 1;
	background: radial-gradient(circle at 35% 30%, #fff 0%, var(--base-color-pale) 55%, var(--base-color-soft) 100%);
	box-shadow: inset -20px -30px 60px rgba(1, 101, 255, 0.18);
}
.cxl-globe-off canvas {
	display: none;
}
.cxl-globe-legend {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cxl-globe-legend li {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--dark-gray);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
}
.cxl-globe-pin {
	position: relative;
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--base-color);
}
.cxl-globe-pin.is-main::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--base-color);
	animation: cxl-ping 2s ease-out infinite;
}
@keyframes cxl-ping {
	from {
		transform: scale(0.5);
		opacity: 0.9;
	}
	to {
		transform: scale(1.7);
		opacity: 0;
	}
}
.cxl-globe-hint {
	margin-top: 8px;
	color: var(--medium-gray);
}
/* Arcs, pulses and place labels drawn over COBE with its own projection. */
.cxl-globe .cxl-globe-arcs {
	position: absolute;
	inset: 0;
	opacity: 1;
	pointer-events: none;
}
.cxl-globe-label {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	margin-top: -12px;
	padding: 4px 9px;
	border-radius: 6px;
	background: var(--dark-gray);
	color: #fff;
	font: 600 11px/1.2 var(--alt-font);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	filter: blur(8px);
	transition: opacity 0.8s, filter 0.8s; /* shuding: opacity/filter 0.8s, blur((1 - visible) * 8px) */
}
.cxl-globe-label::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-top-color: var(--dark-gray);
}
.cxl-globe-label.is-main {
	background: var(--base-color);
}
.cxl-globe-label.is-main::after {
	border-top-color: var(--base-color);
}
.cxl-globe-label.is-front {
	opacity: 1;
	filter: blur(0);
}
@media (max-width: 767px) {
	.cxl-globe-label {
		padding: 3px 7px;
		font-size: 10px;
	}
}

/* ---------- 9. the lamp that switches on (closing call to action) ---------- */
/* Bar width and height drive the whole lamp, so phones get a smaller lamp, not a cropped one. */
.cxl-lamp {
	--lamp-w: 30rem;
	--lamp-y: 140px;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 240px 40px 110px;
	border-radius: 32px;
	background: var(--cxl-night);
}
.cxl-lamp::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
	mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
}
.cxl-lamp-light {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.cxl-lamp-bar {
	position: absolute;
	left: 50%;
	top: var(--lamp-y);
	width: var(--lamp-w);
	height: 2px;
	margin-left: calc(var(--lamp-w) / -2);
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--cxl-blue-on-dark) 18%, #fff 50%, var(--cxl-blue-on-dark) 82%, transparent);
	box-shadow: 0 0 14px 2px rgba(1, 101, 255, 0.85);
	transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s, opacity 0.6s 0.2s;
}
/* Two mirrored cones (apex in the middle of each half, brightest toward the centre), faded at
   the sides and bottom; the halves overlap by 2% and add up with plus-lighter, so there is no seam. */
.cxl-lamp-cone {
	position: absolute;
	left: 50%;
	top: calc(var(--lamp-y) + 1px);
	width: calc(var(--lamp-w) * 2);
	height: calc(var(--lamp-w) * 0.6);
	margin-left: calc(var(--lamp-w) * -1);
	isolation: isolate;
	transform-origin: 50% 0;
	transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s, opacity 0.8s 0.2s;
}
.cxl-lamp-cone::before,
.cxl-lamp-cone::after {
	content: "";
	position: absolute;
	inset: 0;
	--cxl-cone-fade: linear-gradient(#000 25%, transparent 85%), linear-gradient(90deg, transparent, #000 17%, #000 83%, transparent);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
.cxl-lamp-cone::before {
	background: conic-gradient(from 70deg at 25% 0, rgba(1, 101, 255, 0.95), transparent 50%);
	-webkit-mask-image: var(--cxl-cone-fade), linear-gradient(90deg, #000 49%, transparent 51%);
	mask-image: var(--cxl-cone-fade), linear-gradient(90deg, #000 49%, transparent 51%);
}
.cxl-lamp-cone::after {
	background: conic-gradient(from 290deg at 75% 0, transparent 50%, rgba(1, 101, 255, 0.95));
	-webkit-mask-image: var(--cxl-cone-fade), linear-gradient(90deg, transparent 49%, #000 51%);
	mask-image: var(--cxl-cone-fade), linear-gradient(90deg, transparent 49%, #000 51%);
	mix-blend-mode: plus-lighter;
}
/* Bright pool of light just under the bar. */
.cxl-lamp-light::before {
	content: "";
	position: absolute;
	left: 50%;
	top: calc(var(--lamp-y) + 1px);
	width: calc(var(--lamp-w) * 0.62);
	height: 6rem;
	margin-left: calc(var(--lamp-w) * -0.31);
	background: radial-gradient(50% 100% at 50% 0, rgba(106, 166, 255, 0.85), rgba(1, 101, 255, 0.3) 50%, transparent);
	transform-origin: 50% 0;
	transition: transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s, opacity 0.6s 0.2s;
}
/* Soft glow centred just below the bar, so the panel stays dark above it. */
.cxl-lamp-glow {
	position: absolute;
	left: 50%;
	top: calc(var(--lamp-y) - 2rem);
	width: calc(var(--lamp-w) * 1.1);
	height: 9rem;
	margin-left: calc(var(--lamp-w) * -0.55);
	border-radius: 50%;
	background: var(--base-color);
	filter: blur(70px);
	opacity: 0.55;
	transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s, opacity 1s 0.2s;
}
.cxl-lamp-content {
	position: relative;
	z-index: 1;
	transition: opacity 1s 0.45s, transform 1s 0.45s;
}
.cxl-lamp.is-on .cxl-lamp-light {
	animation: cxl-flicker 0.9s linear 0.1s both;
}
@keyframes cxl-flicker {
	0% {
		opacity: 0.35;
	}
	10% {
		opacity: 1;
	}
	18% {
		opacity: 0.4;
	}
	28% {
		opacity: 1;
	}
	36% {
		opacity: 0.7;
	}
	46%,
	100% {
		opacity: 1;
	}
}
.cxl-lamp.is-armed:not(.is-on) .cxl-lamp-bar {
	transform: scaleX(0.3);
	opacity: 0.35;
}
.cxl-lamp.is-armed:not(.is-on) .cxl-lamp-cone {
	transform: scaleX(0.35);
	opacity: 0.2;
}
.cxl-lamp.is-armed:not(.is-on) .cxl-lamp-glow {
	transform: scale(0.45);
	opacity: 0.15;
}
.cxl-lamp.is-armed:not(.is-on) .cxl-lamp-light::before {
	transform: scaleX(0.5);
	opacity: 0.3;
}
.cxl-lamp.is-armed:not(.is-on) .cxl-lamp-content {
	opacity: 0.2;
	transform: translateY(30px);
}
.cxl-lamp-kicker {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
}
.cxl-lamp .text-base-color {
	color: var(--cxl-blue-on-dark) !important;
}
.cxl-lamp-text {
	color: rgba(255, 255, 255, 0.72);
}
.cxl-lamp .btn.btn-base-color {
	box-shadow: 0 0 0 0 rgba(1, 101, 255, 0.5);
}
.cxl-lamp .btn.btn-base-color:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--dark-gray);
	box-shadow: 0 0 40px 4px rgba(1, 101, 255, 0.55);
}

/* ---------- 10. footer: giant word lit by the cursor + button with an energy border ---------- */
.cxl-footer-word {
	padding-top: 10px;
	padding-bottom: 34px;
	user-select: none;
}
.cxl-footer-word svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
.cxl-footer-word text {
	font-family: var(--alt-font);
	font-size: 200px;
	font-weight: 700;
	letter-spacing: -8px;
}
/* The white fill is painted over the stroke so glyph overlaps (the "x" crossing) don't show. */
.cxl-fw-outline {
	fill: #fff;
	stroke: rgba(28, 29, 31, 0.2);
	stroke-width: 2.6;
	paint-order: stroke;
}
.cxl-fw-stop-1 {
	stop-color: var(--base-color);
}
.cxl-fw-stop-2 {
	stop-color: var(--cxl-accent-2);
}
/* Letter by letter (70 ms apart), drawn in brand blue that then cools to grey. */
.cxl-footer-word.is-armed .cxl-fw-outline,
.cxl-footer-word.is-armed .cxl-fw-outline tspan {
	stroke-dasharray: 900;
	stroke-dashoffset: 900;
}
.cxl-footer-word.is-armed.is-visible .cxl-fw-outline,
.cxl-footer-word.is-armed.is-visible .cxl-fw-outline tspan {
	animation: cxl-draw 2.4s cubic-bezier(0.65, 0, 0.35, 1) calc(var(--i, 0) * 70ms) forwards;
}
@keyframes cxl-draw {
	0% {
		stroke: var(--base-color);
	}
	70% {
		stroke: var(--base-color);
		stroke-dashoffset: 0;
	}
	100% {
		stroke: rgba(28, 29, 31, 0.2);
		stroke-dashoffset: 0;
	}
}
.cxl-footer-word.is-static .cxl-fw-fill {
	mask: none;
}

.btn.cxl-beam {
	position: relative;
	isolation: isolate;
}
.btn.cxl-beam::before,
.btn.cxl-beam::after {
	content: "";
	position: absolute;
	border-radius: inherit;
	pointer-events: none;
	animation: cxl-beam-spin 3.4s linear infinite, cxl-beam-in 0.6s ease 0.8s backwards;
}
/* Stroke (border-beam "sm"): brand colours pinned around the pill, seen through a soft rotating window
   intersected with the 2px ring, plus a white head (peak .75 at 66%). */
.btn.cxl-beam::before {
	inset: -2px;
	z-index: 1;
	padding: 2px;
	background:
		conic-gradient(from var(--cxl-beam-angle), transparent 0 54%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.3) 72%, transparent 78%),
		conic-gradient(from 90deg, var(--base-color), var(--cxl-accent-2), var(--base-color));
	-webkit-mask:
		conic-gradient(from var(--cxl-beam-angle), transparent 30%, rgba(0, 0, 0, 0.35) 44%, #000 52% 80%, rgba(0, 0, 0, 0.35) 86%, transparent 95%),
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: source-in, xor;
	mask:
		conic-gradient(from var(--cxl-beam-angle), transparent 30%, rgba(0, 0, 0, 0.35) 44%, #000 52% 80%, rgba(0, 0, 0, 0.35) 86%, transparent 95%),
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask-composite: intersect, exclude;
}
/* Inner light: the lit stretch of the rim spills into the dark pill, under the label (isolation keeps z -1 inside). */
.btn.cxl-beam::after {
	inset: 0;
	z-index: -1;
	box-shadow: inset 0 0 6px 1px var(--cxl-accent-2), inset 0 0 12px 2px rgba(1, 101, 255, 0.7);
	-webkit-mask: conic-gradient(from var(--cxl-beam-angle), transparent 22%, rgba(0, 0, 0, 0.4) 36%, #000 46% 82%, rgba(0, 0, 0, 0.4) 88%, transparent 97%);
	mask: conic-gradient(from var(--cxl-beam-angle), transparent 22%, rgba(0, 0, 0, 0.4) 36%, #000 46% 82%, rgba(0, 0, 0, 0.4) 88%, transparent 97%);
	opacity: 0.35;
	transition: opacity 0.4s;
}
.btn.cxl-beam:hover::after,
.btn.cxl-beam:focus-visible::after {
	opacity: 1;
}
.btn.cxl-beam.is-paused::before,
.btn.cxl-beam.is-paused::after {
	animation-play-state: paused;
}
@keyframes cxl-beam-in {
	from {
		opacity: 0;
	}
}
@media (forced-colors: active) {
	.btn.cxl-beam::before,
	.btn.cxl-beam::after {
		display: none;
	}
}
@keyframes cxl-beam-spin {
	to {
		--cxl-beam-angle: 360deg;
	}
}

/* ---------- 11. "voltar ao topo": the power ring fills with the scroll ---------- */
.cxl-power-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 90;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 10px 30px rgba(7, 11, 20, 0.14), 0 0 0 1px rgba(1, 101, 255, 0.08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.9);
	transition: opacity 0.35s, transform 0.35s, visibility 0s 0.35s, box-shadow 0.4s;
}
.cxl-power-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.35s, transform 0.35s, box-shadow 0.4s;
}
.cxl-power-top svg {
	width: 40px;
	height: 40px;
	overflow: visible;
}
.cxl-pt-track,
.cxl-pt-ring {
	fill: none;
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dashoffset: -6;
}
/* 88% arc starting 6% after the top: the gap where the power bar sits. */
.cxl-pt-track {
	stroke: rgba(28, 29, 31, 0.12);
	stroke-dasharray: 88 12;
}
.cxl-pt-ring {
	stroke: url(#cxl-pt-ink);
	stroke-dasharray: 0 100;
}
.cxl-pt-bar {
	stroke: rgba(28, 29, 31, 0.35);
	stroke-width: 3.5;
	stroke-linecap: round;
	transition: stroke 0.3s;
}
.cxl-power-top:hover .cxl-pt-bar,
.cxl-power-top:focus-visible .cxl-pt-bar {
	stroke: var(--base-color);
}
.cxl-power-top:focus-visible {
	outline: 2px solid var(--base-color);
	outline-offset: 3px;
}
.cxl-power-top.is-on {
	box-shadow: 0 0 0 6px var(--base-color-pale), 0 10px 30px rgba(1, 101, 255, 0.35);
}
.cxl-power-top.is-on .cxl-pt-bar {
	stroke: var(--base-color);
	filter: drop-shadow(0 0 4px rgba(1, 101, 255, 0.8));
	animation: cxl-power-on 1s linear;
}
.cxl-pt-pct {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	padding: 3px 8px;
	border-radius: 20px;
	background: var(--dark-gray);
	color: #fff;
	font-size: 11px;
	line-height: 1.4;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s;
}
.cxl-power-top:hover .cxl-pt-pct,
.cxl-power-top:focus-visible .cxl-pt-pct {
	opacity: 1;
}
@media (max-width: 767px) {
	.cxl-power-top {
		right: 16px;
		bottom: 16px;
		width: 46px;
		height: 46px;
	}
	.cxl-power-top svg {
		width: 34px;
		height: 34px;
	}
}

/* ---------- 12. 404: a neon sign with a bad contact ---------- */
.cxl-404 {
	padding-top: 20px;
	padding-bottom: 40px;
}
.cxl-neon-panel {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 90px 40px 90px;
	border-radius: 32px;
	background: var(--cxl-night);
	text-align: center;
}
.cxl-neon-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 24px 24px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
	mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 70%);
}
/* Light spilling on the "wall" behind the sign. */
.cxl-neon-panel::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 38%;
	z-index: -1;
	width: min(640px, 90%);
	height: 260px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--base-color);
	filter: blur(90px);
	opacity: 0.28;
}
.cxl-neon-kicker {
	color: var(--cxl-blue-on-dark);
}
.cxl-neon {
	margin: 0 0 18px;
	color: #dbe9ff;
	font-size: clamp(120px, 20vw, 240px);
	line-height: 0.9;
	font-weight: 700;
	letter-spacing: -0.04em;
}
.cxl-neon-ch {
	display: inline-block;
	text-shadow: 0 0 0.08em rgba(106, 166, 255, 0.55), 0 0 0.22em rgba(1, 101, 255, 0.4), 0 0 0.5em rgba(1, 101, 255, 0.25);
}
.cxl-neon-ch.is-dim {
	text-shadow: none;
}
.cxl-neon.is-lit .cxl-neon-ch {
	text-shadow: 0 0 0.06em rgba(219, 233, 255, 0.9), 0 0 0.16em rgba(106, 166, 255, 0.65), 0 0 0.4em rgba(1, 101, 255, 0.45), 0 0 0.9em rgba(1, 101, 255, 0.28);
}
.cxl-neon-ch.is-blip {
	animation: cxl-neon-blip 0.38s steps(1, end);
}
@keyframes cxl-neon-blip {
	0% {
		opacity: 1;
	}
	20% {
		opacity: 0.25;
		text-shadow: none;
	}
	45% {
		opacity: 1;
	}
	62% {
		opacity: 0.55;
		text-shadow: none;
	}
	80%,
	100% {
		opacity: 1;
	}
}
.cxl-neon-text {
	color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 767px) {
	.cxl-neon-panel {
		padding: 60px 22px 60px;
		border-radius: 24px;
	}
}

/* ---------- 13. living form: floating labels, energy line, morphing button ---------- */
.cxl-field {
	position: relative;
}
.cxl-float {
	position: absolute;
	left: 0;
	top: 12px;
	z-index: 1;
	margin: 0;
	color: var(--medium-gray);
	font-size: 16px;
	line-height: 32px;
	white-space: nowrap;
	pointer-events: none;
	transform-origin: 0 50%;
	transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s, background-color 0.2s;
}
/* Focused or filled: the label rises above the field (placeholder=" " marks an empty field). */
.cxl-field .form-control:focus + .cxl-float,
.cxl-field .form-control:not(:placeholder-shown) + .cxl-float {
	color: var(--dark-gray);
	transform: translateY(-30px) scale(0.8);
}
.cxl-field .form-control:focus + .cxl-float {
	color: var(--base-color);
}
/* Underlined fields (contact page): a blue→green line runs across the focused field. */
.cxl-field--line .form-control {
	background-image: linear-gradient(90deg, var(--base-color), var(--cxl-accent-2));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.3s;
}
.cxl-field--line .form-control:focus {
	background-size: 100% 2px;
}
/* Boxed fields (modal): the label sits on the top border once raised. */
.cxl-field--box .cxl-float {
	left: 49px;
	padding: 0 6px;
	border-radius: 4px;
}
.cxl-field--box .form-control:focus + .cxl-float,
.cxl-field--box .form-control:not(:placeholder-shown) + .cxl-float {
	background-color: #fff;
	transform: translateY(-27px) scale(0.8);
}
.cxl-field--box .form-control:focus {
	border-color: var(--base-color);
	box-shadow: 0 0 0 4px var(--base-color-pale);
}
.cxl-field .form-control:user-invalid {
	border-color: #e5484d;
}
.cxl-field .form-control:user-invalid + .cxl-float {
	color: #e5484d;
}
.cxl-morph {
	position: relative;
}
.cxl-morph .cxl-morph-label,
.cxl-morph .cxl-morph-state {
	transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.cxl-morph .cxl-morph-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.cxl-morph .cxl-morph-state {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
}
.cxl-morph .cxl-morph-state svg {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.cxl-morph--icon .cxl-morph-state svg {
	width: 16px;
	height: 16px;
}
.cxl-morph:not([data-state="idle"]) .cxl-morph-label {
	opacity: 0;
	transform: translateY(-8px);
}
.cxl-morph[data-state="loading"] .cxl-morph-state--loading,
.cxl-morph[data-state="success"] .cxl-morph-state--success,
.cxl-morph[data-state="error"] .cxl-morph-state--error {
	opacity: 1;
	transform: none;
}
/* Loading: the brand ring (an open arc) spinning. */
.cxl-morph-spin {
	animation: cxl-spin 0.8s linear infinite;
}
.cxl-morph-spin circle {
	stroke-dasharray: 75 100;
}
@keyframes cxl-spin {
	to {
		transform: rotate(360deg);
	}
}
.cxl-morph-check path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.cxl-morph[data-state="success"] .cxl-morph-check {
	animation: cxl-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cxl-morph[data-state="success"] .cxl-morph-check path {
	animation: cxl-draw-check 0.25s 0.08s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes cxl-pop {
	from {
		transform: scale(0.6);
	}
}
@keyframes cxl-draw-check {
	to {
		stroke-dashoffset: 0;
	}
}
.btn.cxl-morph[data-state="success"],
.cxl-newsletter-submit.cxl-morph[data-state="success"] {
	background-color: var(--cxl-accent-2) !important;
	border-color: var(--cxl-accent-2) !important;
	color: var(--dark-gray) !important;
}
.btn.cxl-morph[data-state="error"],
.cxl-newsletter-submit.cxl-morph[data-state="error"] {
	background-color: #e5484d !important;
	border-color: #e5484d !important;
	color: #fff !important;
	animation: cxl-shake 0.25s linear;
}
@keyframes cxl-shake {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-3px);
	}
	40% {
		transform: translateX(3px);
	}
	60% {
		transform: translateX(-2px);
	}
	80% {
		transform: translateX(2px);
	}
}
/* caixalabs.css dims plain submit buttons while sending; the morphing one shows its spinner instead. */
.cxl-form.is-sending button.cxl-morph[type="submit"] {
	opacity: 1;
}

/* ---------- 14. grade viva: filter counts + sliding light + card border glow ---------- */
.cxl-count {
	display: inline-block;
	min-width: 22px;
	margin-left: 7px;
	padding: 0 6px;
	border-radius: 20px;
	background: var(--very-light-gray);
	color: var(--medium-gray);
	font-size: 11px;
	line-height: 18px;
	font-weight: 600;
	text-align: center;
	vertical-align: 2px;
	transition: background-color 0.3s, color 0.3s;
}
.portfolio-filter li.active .cxl-count,
.cxl-term-nav li.active .cxl-count {
	background: var(--base-color);
	color: #fff;
}
.cxl-filter-wrap {
	position: relative;
}
.cxl-filter-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 2px;
	margin-top: -2px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--base-color), var(--cxl-accent-2));
	box-shadow: 0 0 10px rgba(1, 101, 255, 0.45);
	pointer-events: none;
	transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* The sliding light replaces the underline only once the script runs. */
.cxl-filter-wrap.is-ready .portfolio-filter li a {
	border-bottom-color: transparent !important;
}
.cxl-glow-grid .portfolio-image {
	position: relative;
}
/* A 2px ring (full box XOR the content box) seen through an 80deg arc facing the cursor. */
.cxl-glow-grid .portfolio-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	padding: 2px;
	border-radius: inherit;
	background: conic-gradient(from 0deg, var(--base-color), var(--cxl-accent-2), var(--base-color));
	-webkit-mask: conic-gradient(from calc((var(--start, 0) - 40) * 1deg), transparent 0deg, #000 40deg, transparent 80deg), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: source-in, xor;
	mask: conic-gradient(from calc((var(--start, 0) - 40) * 1deg), transparent 0deg, #000 40deg, transparent 80deg), linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: intersect, exclude;
	opacity: var(--active, 0);
	pointer-events: none;
	transition: opacity 0.3s;
}

/* ---------- 15. home: editorial hero ("Ideias" / "ligadas." with the character in 3D) ---------- */
.cxl-hero2 {
	padding: 110px 45px 50px;
	min-height: 700px;
	background: radial-gradient(ellipse 80% 70% at 50% 48%, #f8fafd 0%, #edf2f9 55%, #e2e9f4 100%);
}
.cxl-hero2-inner {
	z-index: 0;
}
/* A thin power ring behind the character: the outer circle, then the brand's open ring
   drawing itself clockwise from the gap, then its bar switching on. */
.cxl-hero2-ring {
	position: absolute;
	left: 50%;
	top: 54%;
	width: min(96vh, 860px);
	height: min(96vh, 860px);
	transform: translate(-50%, -50%);
	pointer-events: none;
	overflow: visible;
}
.cxl-hero2-ring-outer {
	fill: none;
	stroke: rgba(1, 101, 255, 0.1);
	stroke-width: 0.12;
}
.cxl-hero2-ring-power,
.cxl-hero2-ring-bar {
	fill: none;
	stroke: rgba(1, 101, 255, 0.18);
	stroke-width: 0.35;
	stroke-linecap: round;
}
.cxl-hero2-ring-power {
	stroke-dasharray: 88 100;
	stroke-dashoffset: -6;
	animation: cxl-hero2-draw 2.2s cubic-bezier(0.65, 0, 0.35, 1) 0.3s both;
}
.cxl-hero2-ring-bar {
	animation: cxl-hero2-bar 0.8s ease 2.3s both;
}
@keyframes cxl-hero2-draw {
	from {
		stroke-dasharray: 0 100;
	}
}
@keyframes cxl-hero2-bar {
	from {
		opacity: 0;
		stroke: var(--base-color);
	}
	40% {
		opacity: 1;
		stroke: var(--base-color);
	}
}
.cxl-hero2-object {
	position: absolute;
	left: 0;
	right: 0;
	top: 4%;
	z-index: 1;
	text-align: center;
	pointer-events: none;
}
.cxl-hero2-object .atropos {
	pointer-events: auto;
}
.cxl-hero2-object img {
	width: auto;
	height: min(78vh, 760px);
	max-width: 100%;
	object-fit: contain;
	filter: drop-shadow(0 40px 60px rgba(7, 11, 20, 0.18));
}
.cxl-hero2-word {
	position: relative;
	color: var(--base-color);
	font-size: clamp(84px, 13vw, 230px);
	line-height: 0.8;
	font-weight: 600;
	letter-spacing: -0.065em;
	white-space: nowrap;
	pointer-events: none;
}
/* Both words pass in front of the character (as in the demo), so they always read. */
.cxl-hero2-col-a,
.cxl-hero2-col-b,
.cxl-hero2-word {
	z-index: 2;
}
.cxl-hero2-word--a {
	margin-left: -2vw;
	color: var(--dark-gray);
	letter-spacing: -0.03em; /* tighter makes outlined letters merge */
	filter: url(#cxl-outline-dark);
	will-change: transform; /* keeps the filtered word cached while the parallax moves it */
}
.cxl-hero2-top,
.cxl-hero2-bottom {
	position: relative;
}
.cxl-hero2-top {
	z-index: auto;
}
.cxl-hero2-col-intro {
	position: relative;
	z-index: 2;
}
.cxl-hero2-intro {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	max-width: 420px;
	margin-left: auto;
}
.cxl-hero2-badge.cxl-badge {
	flex: none;
	width: 104px;
	height: 104px;
}
.cxl-hero2-title {
	margin: 4px 0 10px;
	color: var(--dark-gray);
	font-size: 30px;
	line-height: 36px;
	font-weight: 600;
	letter-spacing: -0.03em;
}
.cxl-hero2-title .cxl-vapour {
	color: var(--base-color);
}
.cxl-hero2-text {
	margin-bottom: 12px;
	font-size: 15px;
	line-height: 24px;
	color: var(--medium-gray);
}
.cxl-hero2-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 15px;
	font-weight: 600;
	color: var(--dark-gray);
	border-bottom: 1px solid currentColor;
}
.cxl-hero2-link:hover {
	color: var(--base-color);
}
/* Glass card with the latest case. */
.cxl-hero2-card {
	display: flex;
	align-items: stretch;
	max-width: 440px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 20px 50px rgba(7, 11, 20, 0.08);
	color: var(--medium-gray);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s;
}
.cxl-hero2-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 26px 60px rgba(1, 101, 255, 0.16);
}
.cxl-hero2-card-img {
	flex: none;
	width: 120px;
	background-size: cover;
	background-position: center;
}
.cxl-hero2-card-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px 22px;
}
.cxl-hero2-card-title {
	color: var(--dark-gray);
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
}
.cxl-hero2-card-text {
	font-size: 14px;
	line-height: 20px;
}
.cxl-hero2-card-link {
	margin-top: 6px;
	color: var(--base-color);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
}
@media (max-width: 1199px) {
	.cxl-hero2 {
		padding-left: 15px;
		padding-right: 15px;
	}
	.cxl-hero2-title {
		font-size: 26px;
		line-height: 32px;
	}
}
/* Phones and tablets: one column — word, character, word, headline, card. */
@media (max-width: 991px) {
	.cxl-hero2 {
		height: auto !important;
		min-height: 0;
		padding-top: 120px;
		padding-bottom: 60px;
	}
	.cxl-hero2-inner {
		display: flex;
		flex-direction: column;
	}
	.cxl-hero2-top,
	.cxl-hero2-bottom {
		display: contents;
	}
	.cxl-hero2-col-a {
		order: 1;
	}
	.cxl-hero2-object {
		position: relative;
		top: auto;
		order: 2;
		margin: -9vw 0 -12vw;
	}
	.cxl-hero2-object img {
		height: auto;
		width: min(88vw, 520px);
	}
	.cxl-hero2-col-b {
		order: 3;
	}
	.cxl-hero2-col-intro {
		order: 4;
		margin-top: 34px;
	}
	.cxl-hero2-col-card {
		order: 5;
		margin-top: 26px;
	}
	/* Longer words (editable) shrink to stay inside the screen. */
	.cxl-hero2-word {
		font-size: min(30vw, calc(190vw / var(--cxl-hero2-chars, 5)));
	}
	.cxl-hero2-intro {
		max-width: none;
		margin: 0;
	}
	.cxl-hero2-card {
		max-width: none;
	}
	.cxl-hero2-ring {
		top: 30%;
		width: 120vw;
		height: 120vw;
	}
}
@media (max-width: 575px) {
	.cxl-hero2-badge.cxl-badge {
		width: 84px;
		height: 84px;
	}
	.cxl-hero2-title {
		font-size: 24px;
		line-height: 30px;
	}
	.cxl-hero2-card-img {
		width: 96px;
	}
}

/* ---------- 16. home: about (statement, line-art power ring, two images) ---------- */
.cxl-hero2-in-view .sticky-wrap,
.cxl-reel-in-view .sticky-wrap {
	opacity: 0;
	visibility: hidden;
}
.sticky-wrap {
	transition: opacity 0.35s, visibility 0.35s;
}
.cxl-about2 {
	padding-top: 130px;
}
.cxl-about2-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--dark-gray);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.cxl-about2-label svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--base-color);
	stroke-width: 2.6;
	stroke-linecap: round;
}
.cxl-about2-ring {
	display: block;
	width: min(100%, 440px);
	margin: 40px auto 0;
	overflow: visible;
}
.cxl-about2-ring path {
	fill: none;
	stroke: var(--base-color);
	stroke-width: 1;
	stroke-linecap: round;
	opacity: calc(0.12 + var(--i, 0) * 0.035);
}
.cxl-about2-ring .cxl-about2-ring-bar {
	stroke-width: 3;
	opacity: 0.55;
}
.cxl-about2-ring.is-armed path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.cxl-about2-ring.is-armed.is-visible path {
	animation: cxl-draw-line 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards;
	animation-delay: calc(var(--i, 0) * 60ms);
}
.cxl-about2-ring.is-armed.is-visible .cxl-about2-ring-bar {
	animation-delay: 1.1s;
}
@keyframes cxl-draw-line {
	to {
		stroke-dashoffset: 0;
	}
}
.cxl-about2-statement {
	margin-bottom: 25px;
	color: var(--dark-gray);
	font-size: 44px;
	line-height: 54px;
	font-weight: 600;
	letter-spacing: -0.03em;
}
.cxl-about2-text {
	max-width: 760px;
	margin-bottom: 40px;
	font-size: 18px;
	line-height: 32px;
}
.cxl-about2-img {
	display: block;
	width: 100%;
	height: 380px;
	object-fit: cover;
	border-radius: 10px;
}
.cxl-about2-more {
	margin-top: 30px;
	padding: 26px 0;
	border-bottom: 1px solid var(--dark-gray);
}
@media (max-width: 991px) {
	.cxl-about2 {
		padding-top: 90px;
	}
	.cxl-about2-statement {
		font-size: 32px;
		line-height: 40px;
	}
	.cxl-about2-ring {
		width: 280px;
		margin-top: 20px;
	}
}
@media (max-width: 767px) {
	.cxl-about2-img {
		height: 260px;
	}
}

/* ---------- 17. home: showreel band (muted video, sliding words that switch on, play badge) ---------- */
.cxl-reel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(460px, 78vh, 760px);
	padding: 80px 0;
	overflow: hidden;
	isolation: isolate;
	background: #070b14;
}
.cxl-reel-media,
.cxl-reel-media::after {
	position: absolute;
	inset: 0;
}
.cxl-reel-media {
	z-index: -1;
}
/* Keeps the words readable over any footage. */
.cxl-reel-media::after {
	content: "";
	background:
		radial-gradient(ellipse 70% 60% at 50% 50%, rgba(7, 11, 20, 0.15) 0%, rgba(7, 11, 20, 0.7) 100%),
		linear-gradient(180deg, rgba(7, 11, 20, 0.75) 0%, rgba(7, 11, 20, 0.2) 50%, rgba(7, 11, 20, 0.75) 100%);
}
.cxl-reel-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.cxl-reel-video.is-playing {
	opacity: 0.8;
}
.cxl-reel-slide {
	position: absolute;
	inset: -4%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.6s ease;
	animation: cxl-reel-drift 18s ease-in-out infinite alternate;
}
.cxl-reel-slide:nth-child(even) {
	animation-direction: alternate-reverse;
}
.cxl-reel-slide.is-active {
	opacity: 0.6;
}
@keyframes cxl-reel-drift {
	from {
		transform: scale(1) translate3d(-1.5%, 0, 0);
	}
	to {
		transform: scale(1.1) translate3d(1.5%, -1%, 0);
	}
}
.cxl-reel-rows {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 2vw, 28px);
	width: 100%;
	pointer-events: none;
}
/* Room between the rows for the play badge, so the word switching on right above/below it shows. */
.cxl-reel.has-play .cxl-reel-rows {
	gap: 200px;
}
.cxl-reel-row {
	white-space: nowrap;
}
.cxl-reel-track {
	display: inline-flex;
	align-items: center;
	animation: cxl-reel-slide 60s linear infinite;
	will-change: transform;
}
.cxl-reel-row--rev .cxl-reel-track {
	animation-direction: reverse;
}
.cxl-reel.is-paused .cxl-reel-track,
.cxl-reel.is-paused .cxl-reel-slide {
	animation-play-state: paused;
}
@keyframes cxl-reel-slide {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}
.cxl-reel-word {
	color: #ffffff;
	font-size: clamp(52px, 8.5vw, 150px);
	line-height: 1.1;
	font-weight: 600;
	letter-spacing: -0.04em;
	transition: color 0.4s ease, text-shadow 0.4s ease;
}
.cxl-svg-defs {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
/* The fill is blue under the filter so switching on doesn't flash white. */
.cxl-reel-word.is-outline {
	color: var(--base-color);
	letter-spacing: -0.02em;
	filter: url(#cxl-outline-light);
}
.cxl-reel-word.is-on {
	color: var(--base-color);
	text-shadow: 0 0 0.3em rgba(1, 101, 255, 0.55);
	filter: none;
}
.cxl-reel-sep {
	margin: 0 0.5em;
	color: var(--base-color);
	font-size: clamp(22px, 3vw, 48px);
	line-height: 1;
}
.cxl-reel-play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}
.cxl-reel-play .cxl-badge {
	width: 170px;
	height: 170px;
}
.cxl-reel-play:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 6px;
}
.cxl-badge-play-dot {
	transform-origin: 100px 100px;
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cxl-reel-play:hover .cxl-badge-play-dot,
.cxl-reel-play:focus-visible .cxl-badge-play-dot {
	transform: scale(1.12);
}
@media (max-width: 767px) {
	.cxl-reel {
		min-height: 420px;
		padding: 60px 0;
	}
	.cxl-reel.has-play .cxl-reel-rows {
		gap: 140px;
	}
	.cxl-reel-play .cxl-badge {
		width: 124px;
		height: 124px;
	}
	.cxl-reel-track {
		animation-duration: 45s;
	}
}

/* ---------- responsive ---------- */
@media (max-width: 991px) {
	.cxl-orbit {
		max-width: 560px;
	}
	.cxl-tl-year {
		flex-basis: 38%;
	}
	.cxl-lamp {
		--lamp-y: 110px;
		padding: 200px 30px 90px;
	}
}
@media (max-width: 767px) {
	.cxl-orbit-dot {
		width: 48px;
		height: 48px;
		font-size: 19px;
	}
	.cxl-orbit-node > button {
		transform: translate(-50%, -24px) scale(var(--s, 1));
		transform-origin: 50% 24px;
		gap: 6px;
	}
	.cxl-orbit-label {
		padding: 5px 10px;
		font-size: 12px;
	}
	.cxl-orbit-card {
		top: 74px;
		width: min(270px, 78vw);
		padding: 20px 20px 18px;
	}
	.cxl-orbit-card h3 {
		font-size: 19px;
		line-height: 24px;
	}
	.cxl-orbit-card p {
		font-size: 14px;
		line-height: 22px;
	}
	.cxl-device {
		padding: 8px;
		border-radius: 18px;
	}
	.cxl-device-screen {
		border-radius: 11px;
	}
	.cxl-device-stage {
		margin-top: 40px;
	}
	.cxl-testi-stack {
		width: 220px;
	}
	.cxl-testi-quote {
		font-size: 22px;
		line-height: 33px;
	}
	.cxl-tl-line {
		left: 19px;
	}
	.cxl-tl-item {
		flex-direction: column;
		gap: 14px;
		padding-bottom: 70px;
	}
	.cxl-tl-year {
		position: relative;
		top: auto;
		flex: none;
		gap: 18px;
	}
	.cxl-tl-dot {
		width: 40px;
		height: 40px;
	}
	.cxl-tl-year-text {
		font-size: 44px;
	}
	.cxl-tl-item--future .cxl-tl-year-text {
		font-size: 34px;
	}
	.cxl-tl-body {
		padding-left: 58px;
	}
	.cxl-tl-body h4 {
		font-size: 24px;
		line-height: 30px;
	}
	.cxl-lamp {
		--lamp-w: 18rem;
		--lamp-y: 90px;
		padding: 170px 22px 70px;
		border-radius: 24px;
	}
	.cxl-footer-word {
		padding-bottom: 20px;
	}
}

/* ---------- reduced motion: keep the look, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
	.cxl-orbit-pulse,
	.cxl-orbit-node.is-related .cxl-orbit-dot,
	.cxl-globe-pin.is-main::after,
	.btn.cxl-beam::before,
	.btn.cxl-beam::after,
	.cxl-lamp.is-on .cxl-lamp-light,
	.cxl-tl-item--future.is-active .cxl-tl-dot--power,
	.cxl-power-top.is-on .cxl-pt-bar,
	.cxl-hero2-ring-power,
	.cxl-hero2-ring-bar,
	.cxl-about2-ring path,
	.cxl-reel-track,
	.cxl-reel-slide,
	.cxl-neon-ch.is-blip,
	.cxl-morph[data-state="success"] .cxl-morph-check,
	.btn.cxl-morph[data-state="error"],
	.cxl-newsletter-submit.cxl-morph[data-state="error"] {
		animation: none;
	}
	.cxl-testi-quote .cxl-w {
		opacity: 1;
		filter: none;
		transform: none;
		animation: none !important;
	}
	.cxl-testi-item {
		transform: none;
	}
	.cxl-device-screen img,
	.cxl-filter-thumb,
	.cxl-orbit-node > button,
	.cxl-testi-photo,
	.cxl-tl-body,
	.cxl-lamp-bar,
	.cxl-lamp-cone,
	.cxl-lamp-glow,
	.cxl-lamp-light::before,
	.cxl-lamp-content {
		transition: none;
	}
}