.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.brand img {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(210, 168, 92, .42);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 14px rgba(210, 168, 92, .2);
}

.brand-gateway {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: radial-gradient(circle at 50% 46%, rgba(210, 168, 92, .16), transparent 23%), linear-gradient(180deg, #0b0d0c, #111714 52%, #0b0e0d);
}

.brand-gateway::before {
	content: "";
	position: absolute;
	z-index: -3;
	inset: 0;
	background: linear-gradient(110deg, rgba(184, 231, 206, .05), transparent 34%, rgba(210, 168, 92, .05));
}

.brand-fog {
	position: absolute;
	z-index: -1;
	width: 78%;
	height: 46%;
	border-radius: 50%;
	background: radial-gradient(ellipse, rgba(214, 229, 218, .17), rgba(159, 197, 176, .08) 38%, transparent 72%);
	filter: blur(38px);
	opacity: .64;
	pointer-events: none;
	will-change: transform, opacity;
}

.brand-fog-one { top: 12%; left: -28%; animation: mesto-fog-drift-one 17s ease-in-out infinite alternate; }
.brand-fog-two { right: -34%; bottom: 5%; animation: mesto-fog-drift-two 21s ease-in-out infinite alternate; }
.brand-fog-three { top: 38%; left: 18%; width: 64%; opacity: .38; animation: mesto-fog-breathe 12s ease-in-out infinite; }

.brand-gateway-heading {
	max-width: 820px;
	margin: 0 auto 54px;
	text-align: center;
}

.brand-gateway-heading p {
	max-width: 700px;
	margin: 0 auto;
	color: var(--muted);
	font-size: 18px;
}

.brand-gateway-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) minmax(0, 1fr);
	align-items: center;
	gap: 28px;
}

.brand-gateway-logo {
	position: relative;
	margin: 0;
	text-align: center;
}

.brand-gateway-logo::before {
	content: "";
	position: absolute;
	inset: 8%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(210, 168, 92, .26), rgba(141, 242, 189, .09) 48%, transparent 72%);
	filter: blur(20px);
	animation: mesto-brand-halo 5.5s ease-in-out infinite;
}

.brand-gateway-logo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border: 1px solid rgba(210, 168, 92, .38);
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 1px rgba(141, 242, 189, .08), 0 0 44px rgba(210, 168, 92, .2), 0 28px 70px rgba(0, 0, 0, .5);
}

.brand-gateway-logo figcaption {
	margin-top: 14px;
	color: rgba(244, 240, 231, .68);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .15em;
	text-transform: uppercase;
}

.brand-principle {
	display: grid;
	gap: 10px;
	padding: 28px;
	border: 1px solid rgba(244, 240, 231, .15);
	border-radius: 26px;
	background: rgba(19, 25, 22, .72);
	box-shadow: 0 22px 64px rgba(0, 0, 0, .28);
	backdrop-filter: blur(18px);
}

.brand-principle span { color: var(--mint); font-size: 11px; font-weight: 900; letter-spacing: .14em; }
.brand-principle strong { font-size: clamp(22px, 2.3vw, 34px); line-height: 1.03; }
.brand-principle p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }

@keyframes mesto-fog-drift-one {
	0% { transform: translate3d(-8%, 3%, 0) scale(.92); opacity: .42; }
	100% { transform: translate3d(58%, -10%, 0) scale(1.15); opacity: .72; }
}

@keyframes mesto-fog-drift-two {
	0% { transform: translate3d(12%, 8%, 0) scale(1.08); opacity: .36; }
	100% { transform: translate3d(-52%, -14%, 0) scale(.94); opacity: .68; }
}

@keyframes mesto-fog-breathe {
	0%, 100% { transform: scale(.92) translateY(6%); opacity: .28; }
	50% { transform: scale(1.16) translateY(-7%); opacity: .52; }
}

@keyframes mesto-brand-halo {
	0%, 100% { transform: scale(.94); opacity: .68; }
	50% { transform: scale(1.08); opacity: 1; }
}

@media (max-width: 900px) {
	.brand-gateway-grid { grid-template-columns: 1fr 260px 1fr; gap: 16px; }
	.brand-principle { padding: 22px; }
}

@media (max-width: 720px) {
	.brand-gateway-heading { margin-bottom: 34px; }
	.brand-gateway-heading p { font-size: 16px; }
	.brand-gateway-grid { grid-template-columns: 1fr; }
	.brand-gateway-logo { order: -1; width: min(78vw, 310px); margin: 0 auto 10px; }
	.brand-principle { padding: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.brand-fog,
	.brand-gateway-logo::before { animation: none; }
}