/* ==========================================================================
   Digital Allo — Industries We Serve
   Loaded after industries.css and brand-colors.css, both of which style this
   section, so this layer sits last.

   The bubbles were scattered on staggered vertical offsets, which read as
   broken alignment rather than as an organic arrangement, and the tiles were
   nearly the same value as the band behind them. Rebuilt as an aligned grid of
   legible tiles with a proper icon set.
   ========================================================================== */

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

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

body .da-industries-section {
	position: relative;
	overflow: hidden;
	padding: clamp(56px, 6.5vw, 92px) 0 !important;
	background:
		radial-gradient(ellipse 78% 72% at 5% 0%, rgba(22, 119, 232, .14) 0%, rgba(22, 119, 232, .06) 38%, transparent 76%),
		radial-gradient(ellipse 72% 76% at 100% 100%, rgba(120, 43, 133, .12) 0%, rgba(214, 51, 166, .05) 40%, transparent 76%),
		linear-gradient(145deg, #08132d 0%, #070f26 54%, #0a1028 100%) !important;
}

body .da-industries-section .da-section-head { max-width: 720px; }
body .da-industries-section .da-section-head p:not(.da-eyebrow) { color: #b6c9ec !important; }
body .da-industries-section .da-eyebrow { color: #9fc0ff !important; }

/* "Industries we serve" — the emphasised word was breaking to its own line in
   a different colour, which read as two headings. Keep it inline and let the
   gradient do the emphasis. */
body .da-industries-section .da-section-head h2 em {
	font-style: normal;
	background: var(--dai-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-stroke-color: transparent !important;
}

/* ------------------------------------------------------------------ grid */

body .da-industries-bubbles {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
	gap: 16px !important;
	max-width: 1080px;
	margin: clamp(30px, 4vw, 46px) auto 0 !important;
	padding: 0 !important;
	list-style: none;
}

/* Every tile sits on the same baseline — no stagger, no absolute offsets. */
body .da-industry-bubble {
	position: relative !important;
	inset: auto !important;
	transform: none !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: auto !important;
	height: auto !important;
	min-height: 148px;
	margin: 0 !important;
	padding: 24px 16px !important;
	border: 1px solid rgba(140, 178, 255, .18) !important;
	border-radius: 18px !important;
	background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
	box-shadow: 0 12px 30px rgba(3, 10, 30, .28);
	text-decoration: none !important;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform .38s var(--dai-ease),
		border-color .38s var(--dai-ease),
		box-shadow .38s var(--dai-ease),
		background-color .38s var(--dai-ease) !important;
	animation: none !important;
}

/* Gradient wash that fades in behind the tile on hover. */
body .da-industry-bubble::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: -1;
	width: auto !important;
	height: auto !important;
	border-radius: inherit !important;
	background: var(--dai-grad) !important;
	opacity: 0 !important;
	transform: none !important;
	transition: opacity .38s var(--dai-ease) !important;
}

body .da-industry-bubble:hover,
body .da-industry-bubble:focus-visible {
	transform: translateY(-6px) !important;
	border-color: transparent !important;
	box-shadow: 0 26px 52px rgba(3, 10, 30, .5);
}
body .da-industry-bubble:hover::before,
body .da-industry-bubble:focus-visible::before { opacity: 1 !important; }

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

/* ------------------------------------------------------------------ icon */

body .da-industry-bubble__icon {
	display: grid !important;
	place-items: center !important;
	width: 52px !important;
	height: 52px !important;
	border-radius: 15px !important;
	background: rgba(22, 119, 232, .16) !important;
	color: #9fc0ff !important;
	font-size: 0 !important;
	transition: background-color .38s var(--dai-ease), color .38s var(--dai-ease), transform .38s var(--dai-ease);
}
body .da-industry-bubble__icon svg { width: 26px; height: 26px; display: block; }

body .da-industry-bubble:hover .da-industry-bubble__icon,
body .da-industry-bubble:focus-visible .da-industry-bubble__icon {
	background: rgba(255, 255, 255, .22) !important;
	color: #ffffff !important;
	transform: translateY(-2px) scale(1.06);
}

/* brand-colors.css applies a more specific blue span rule globally. Keep the
   SVG stroke white over the gradient in both pointer and keyboard states. */
body #content section.da-industries-section .da-industry-bubble:hover .da-industry-bubble__icon,
body #content section.da-industries-section .da-industry-bubble:focus-visible .da-industry-bubble__icon {
	background: rgba(255, 255, 255, .24) !important;
	color: #ffffff !important;
	text-shadow: none !important;
}

/* ----------------------------------------------------------------- label */

body .da-industry-bubble strong {
	color: #dce8ff !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: .01em !important;
	text-transform: none !important;
	text-align: center;
	line-height: 1.3;
	transition: color .38s var(--dai-ease);
}
body .da-industry-bubble:hover strong,
body .da-industry-bubble:focus-visible strong { color: #ffffff !important; }

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

@media (max-width: 640px) {
	body .da-industries-bubbles { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 12px !important; }
	body .da-industry-bubble { min-height: 128px; padding: 20px 12px !important; }
	body .da-industry-bubble__icon { width: 46px !important; height: 46px !important; }
	body .da-industry-bubble__icon svg { width: 23px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
	body .da-industry-bubble,
	body .da-industry-bubble::before,
	body .da-industry-bubble__icon,
	body .da-industry-bubble strong { transition: none !important; }
	body .da-industry-bubble:hover { transform: none !important; }
	body .da-industry-bubble:hover .da-industry-bubble__icon { transform: none !important; }
}

/* This was the only uppercase section heading on the site, and the emphasised
   word was being orphaned onto its own line. Sentence case to match every
   other band, and balanced wrapping so the two lines are even. */
body .da-industries-section .da-section-head h2 {
	text-transform: none !important;
	text-wrap: balance;
	max-width: 20ch;
	margin-inline: auto;
}