.panda-brands,
.panda-brands * { box-sizing: border-box; }

.panda-brands {
	position: relative; isolation: isolate; width: 100%; padding: clamp(85px,9vw,145px) 0 clamp(90px,9vw,140px); overflow: hidden;
	color: var(--panda-navy);
	background: radial-gradient(circle at 90% 10%, rgba(0,174,239,.055), transparent 28%), radial-gradient(circle at 4% 92%, rgba(255,20,100,.045), transparent 25%), var(--panda-light);
	font-family: var(--panda-font-body);
}
.panda-brands__container { position: relative; z-index: 4; width: min(1400px, calc(100% - 80px)); margin: 0 auto; }
.panda-brands__header { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.5fr); align-items: end; gap: clamp(50px,8vw,130px); margin-bottom: clamp(55px,7vw,100px); }
.panda-brands__eyebrow { display: flex; align-items: center; gap: 15px; margin-bottom: clamp(20px,2.5vw,34px); color: var(--panda-pink); font-size: 11px; font-weight: 800; letter-spacing: .25em; }
.panda-brands__eyebrow::before { content: ""; width: 38px; height: 2px; flex: 0 0 auto; background: var(--panda-pink); }
.panda-brands__title { margin: 0; display: flex; flex-direction: column; color: var(--panda-navy); font-family: var(--panda-font-display); font-size: clamp(79px,8.4vw,142px); font-weight: 400; line-height: .81; letter-spacing: -.025em; text-transform: uppercase; }
.panda-brands__title span { display: block; width: fit-content; }
.panda-brands__title-accent { position: relative; color: var(--panda-cyan); }
.panda-brands__title-accent::after { content: ""; position: absolute; right: -24px; bottom: 11%; width: 15px; height: 15px; border-radius: 50%; background: var(--panda-pink); box-shadow: 0 0 0 8px rgba(255,20,100,.1); transform-origin: center; animation: pandaBrandsAccentPulse 1.8s ease-in-out infinite; }
.panda-brands__intro { display: flex; gap: 28px; padding-bottom: 15px; }
.panda-brands__intro-line { width: 1px; min-height: 85px; flex: 0 0 auto; background: linear-gradient(180deg, transparent, rgba(7,22,38,.55), transparent); }
.panda-brands__intro p { max-width: 330px; margin: 0; color: #263545; font-size: clamp(14px,1.15vw,18px); font-weight: 600; line-height: 1.55; }

.panda-brands-slider { position: relative; width: calc(100vw - 1px); margin-left: calc(50% - 50vw); padding: 20px 0; overflow: hidden; }
.panda-brands-slider__track { display: flex; width: max-content; animation: pandaBrandsInfiniteSlide var(--panda-brands-duration,32s) linear infinite; will-change: transform; }
.panda-brands--pause-hover .panda-brands-slider:hover .panda-brands-slider__track { animation-play-state: paused; }
.panda-brands-slider__group { display: flex; align-items: stretch; gap: clamp(18px,1.8vw,30px); padding-right: clamp(18px,1.8vw,30px); }
.panda-brands-slider__item { position: relative; flex: 0 0 auto; width: clamp(230px,18vw,310px); height: clamp(145px,12vw,195px); display: flex; align-items: center; justify-content: center; padding: clamp(32px,3vw,50px); overflow: hidden; background: rgba(255,255,255,.8); border: 1px solid rgba(7,22,38,.11); border-radius: 18px; box-shadow: 0 15px 50px rgba(7,22,38,.035); text-decoration: none; transition: transform .45s var(--panda-ease), box-shadow .45s ease, border-color .45s ease; }
.panda-brands-slider__item::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 3px; background: linear-gradient(90deg,var(--panda-cyan),var(--panda-pink)); transition: width .5s var(--panda-ease); }
.panda-brands-slider__item:hover { transform: translateY(-10px); border-color: rgba(0,174,239,.3); box-shadow: 0 28px 70px rgba(7,22,38,.12); }
.panda-brands-slider__item:hover::after { width: 100%; }
.panda-brands-slider__item img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; transition: transform .45s var(--panda-ease); }
.panda-brands-slider__item:hover img { transform: scale(1.08); }
.panda-brands-slider__number { position: absolute; z-index: 3; top: 15px; left: 18px; color: rgba(7,22,38,.28); font-family: var(--panda-font-display); font-size: 18px; letter-spacing: .08em; }
.panda-brands-slider__fade { position: absolute; z-index: 8; top: 0; bottom: 0; width: clamp(50px,8vw,140px); pointer-events: none; }
.panda-brands-slider__fade--left { left: 0; background: linear-gradient(90deg,var(--panda-light) 15%,rgba(248,249,251,0)); }
.panda-brands-slider__fade--right { right: 0; background: linear-gradient(270deg,var(--panda-light) 15%,rgba(248,249,251,0)); }

.panda-brands__decoration { position: absolute; top: 42px; left: 42px; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(7,22,38,.5); border-radius: 50%; }
.panda-brands__decoration span { width: 8px; height: 8px; border-radius: 50%; background: var(--panda-pink); box-shadow: 0 0 0 5px rgba(255,20,100,.1); }
.panda-brands__dots { position: absolute; top: 115px; right: 40px; width: 90px; height: 90px; opacity: .28; background-image: radial-gradient(circle,#718092 2px,transparent 2.5px); background-size: 18px 18px; }
.panda-brands__orbit { position: absolute; left: -135px; bottom: -145px; width: 310px; height: 310px; border: 1px dotted rgba(0,174,239,.32); border-radius: 50%; animation: pandaBrandsOrbitRotate 24s linear infinite; }
.panda-brands__orbit::before, .panda-brands__orbit::after { content: ""; position: absolute; border: 1px dotted rgba(0,174,239,.25); border-radius: 50%; }
.panda-brands__orbit::before { inset: 43px; }
.panda-brands__orbit::after { inset: 90px; }

@keyframes pandaBrandsInfiniteSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pandaBrandsOrbitRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes pandaBrandsAccentPulse {
	0%, 100% {
		transform: scale(1);
		box-shadow: 0 0 0 7px rgba(255,20,100,.10), 0 0 0 7px rgba(255,20,100,.16);
	}
	50% {
		transform: scale(1.12);
		box-shadow: 0 0 0 8px rgba(255,20,100,.08), 0 0 0 18px rgba(255,20,100,0);
	}
}

@media (max-width: 1050px) {
	.panda-brands__header { grid-template-columns: 1fr; align-items: start; gap: 42px; }
	.panda-brands__title { font-size: clamp(75px,13vw,125px); }
}
@media (max-width: 768px) {
	.panda-brands { padding: 78px 0 85px; }
	.panda-brands__container { width: calc(100% - 40px); }
	.panda-brands__title { font-size: clamp(65px,18vw,102px); line-height: .84; }
	.panda-brands-slider__item { width: 220px; height: 140px; padding: 32px; }
	.panda-brands__dots { display: none; }
}
@media (max-width: 480px) {
	.panda-brands__title { font-size: clamp(57px,18vw,84px); }
	.panda-brands-slider__item { width: 190px; height: 125px; padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.panda-brands-slider__track, .panda-brands__orbit, .panda-brands__title-accent::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* v1.1.1 - responsive refinement */
.panda-brands__decoration { display: none !important; }

@media (max-width: 768px) {
	.panda-brands {
		padding: 50px 0 58px;
	}

	.panda-brands__container {
		width: calc(100% - 32px);
	}

	.panda-brands__header {
		gap: 24px;
		margin-bottom: 30px;
	}

	.panda-brands__eyebrow {
		gap: 11px;
		margin-bottom: 15px;
		font-size: 9.5px;
		letter-spacing: .20em;
	}

	.panda-brands__eyebrow::before {
		width: 28px;
	}

	.panda-brands__title {
		font-size: clamp(55px, 16.5vw, 88px);
		line-height: .86;
	}

	.panda-brands__title-accent::after {
		right: -16px;
		width: 11px;
		height: 11px;
		box-shadow: 0 0 0 6px rgba(255,20,100,.1);
	}

	.panda-brands__intro {
		gap: 18px;
		padding-bottom: 0;
		align-items: center;
	}

	.panda-brands__intro-line {
		min-height: 70px;
	}

	.panda-brands__intro p {
		max-width: none;
		font-size: 14px;
		line-height: 1.48;
	}

	.panda-brands-slider {
		padding: 8px 0 0;
	}

	.panda-brands-slider__group {
		gap: 14px;
		padding-right: 14px;
	}

	.panda-brands-slider__item {
		width: 205px;
		height: 126px;
		padding: 28px;
		border-radius: 15px;
	}

	.panda-brands-slider__number {
		top: 12px;
		left: 14px;
		font-size: 16px;
	}

	.panda-brands-slider__fade {
		width: 24px;
	}

	.panda-brands__orbit {
		left: -170px;
		bottom: -185px;
		opacity: .62;
	}
}

@media (max-width: 480px) {
	.panda-brands {
		padding: 44px 0 50px;
	}

	.panda-brands__container {
		width: calc(100% - 28px);
	}

	.panda-brands__header {
		gap: 20px;
		margin-bottom: 24px;
	}

	.panda-brands__eyebrow {
		font-size: 8.8px;
		letter-spacing: .18em;
	}

	.panda-brands__title {
		font-size: clamp(50px, 15.7vw, 72px);
		line-height: .87;
	}

	.panda-brands__intro {
		gap: 15px;
	}

	.panda-brands__intro-line {
		min-height: 64px;
	}

	.panda-brands__intro p {
		font-size: 13px;
		line-height: 1.45;
	}

	.panda-brands-slider__item {
		width: 184px;
		height: 116px;
		padding: 25px;
	}
}