/* ==========================================================================
   Digital Allo — Technology Partners
   Loaded after brand-colors.css and partner-scroller.css, both of which style
   this section with !important, so this layer sits last to own the result.

   The band was a saturated purple gradient box holding the title, with the
   logo rail running straight into the section edges. Rebuilt as a calm dark
   band, a restrained glass heading panel and a proper logo wall.
   ========================================================================== */

:root {
	--dap-grad: linear-gradient(110deg, var(--da-brand-blue, #1677e8), var(--da-brand-indigo, #5146c7) 58%, var(--da-brand-magenta, #d633a6));
	--dap-ease: cubic-bezier(.2, .8, .3, 1);
}

/* ------------------------------------------------------------------- band */

body .da-tech-partners {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 6vw, 78px) 0 !important;
	background:
		radial-gradient(900px 380px at 50% -20%, rgba(81, 70, 199, .34), transparent 62%),
		radial-gradient(700px 320px at 88% 110%, rgba(214, 51, 166, .18), transparent 60%),
		linear-gradient(180deg, #070d21, #0a1330) !important;
	border-top: 1px solid rgba(140, 178, 255, .16) !important;
	border-bottom: 1px solid rgba(140, 178, 255, .16) !important;
}

/* Brand hairline top and bottom instead of a flat border. */
body .da-tech-partners::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 2px;
	background: var(--dap-grad);
	opacity: .85;
}

/* The dotted overlay from the older layer competed with the logos. */
body .da-tech-partners::before { opacity: .18 !important; }

/* --------------------------------------------------------- heading panel */

body .da-tech-partners-heading {
	max-width: 760px !important;
	margin: 0 auto clamp(28px, 3.5vw, 42px) !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	text-align: center;
}

body .da-tech-partners-heading .da-eyebrow {
	justify-content: center;
	margin: 0 0 12px !important;
	color: #9fc0ff !important;
}

body .da-tech-partners-heading h2 {
	margin: 0 !important;
	color: #ffffff !important;
	text-wrap: balance;
}

/* The shared heading rule adds a gradient rule under section titles; centre it
   here so it sits under a centred heading rather than off to the left. */
body .da-tech-partners-heading h2::after {
	left: 50% !important;
	transform: translateX(-50%) !important;
}

/* ------------------------------------------------------------- logo wall */

/* Fade the rail into the band at both edges instead of clipping hard. */
body .da-partner-viewport {
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

body .da-partner-track { align-items: stretch !important; gap: 18px !important; }

/* Partner marks are supplied for light backgrounds, so each one gets its own
   light tile rather than being inverted — inversion wrecks multi-colour marks
   such as Google Ads and Meta. */
body .da-partner-logo {
	display: grid !important;
	place-items: center !important;
	width: 168px !important;
	height: 96px !important;
	padding: 18px 22px !important;
	border: 1px solid rgba(140, 178, 255, .18) !important;
	border-radius: 16px !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(236, 243, 255, .92)) !important;
	box-shadow: 0 14px 30px rgba(3, 10, 30, .35) !important;
	opacity: .9;
	transition:
		transform .4s var(--dap-ease),
		box-shadow .4s var(--dap-ease),
		border-color .4s var(--dap-ease),
		opacity .3s var(--dap-ease) !important;
}

/* Concrete dimensions rather than auto: partner-scroller.css sizes these in
   fixed px, and switching to auto collapsed the marks to 0×0. */
body .da-partner-logo img {
	display: block !important;
	width: 118px !important;
	height: 44px !important;
	max-width: 100% !important;
	object-fit: contain !important;
	transition: transform .4s var(--dap-ease);
}

body .da-partner-logo:hover,
body .da-partner-logo:focus-visible {
	transform: translateY(-6px) !important;
	opacity: 1;
	border-color: rgba(214, 51, 166, .55) !important;
	box-shadow: 0 24px 46px rgba(3, 10, 30, .5) !important;
}
body .da-partner-logo:hover img { transform: scale(1.06); }

body .da-partner-logo:focus-visible {
	outline: 3px solid var(--da-brand-magenta, #d633a6) !important;
	outline-offset: 3px !important;
}

/* The highlight class the rail script cycles through. */
body .da-partner-logo.is-highlighted {
	opacity: 1;
	border-color: rgba(140, 178, 255, .5) !important;
	box-shadow: 0 20px 40px rgba(3, 10, 30, .45) !important;
}

/* ----------------------------------------------------------- breakpoints */

@media (max-width: 760px) {
	body .da-partner-logo { width: 138px !important; height: 84px !important; padding: 14px 18px !important; }
	body .da-partner-logo img { width: 96px !important; height: 36px !important; }
	body .da-partner-track { gap: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
	body .da-partner-logo,
	body .da-partner-logo img { transition: none !important; }
	body .da-partner-logo:hover { transform: none !important; }
	body .da-partner-logo:hover img { transform: none !important; }
}