*, :after, :before {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia: ;
	--tw-contain-size: ;
	--tw-contain-layout: ;
	--tw-contain-paint: ;
	--tw-contain-style:
}

::backdrop {
	--tw-border-spacing-x: 0;
	--tw-border-spacing-y: 0;
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-pan-x: ;
	--tw-pan-y: ;
	--tw-pinch-zoom: ;
	--tw-scroll-snap-strictness: proximity;
	--tw-gradient-from-position: ;
	--tw-gradient-via-position: ;
	--tw-gradient-to-position: ;
	--tw-ordinal: ;
	--tw-slashed-zero: ;
	--tw-numeric-figure: ;
	--tw-numeric-spacing: ;
	--tw-numeric-fraction: ;
	--tw-ring-inset: ;
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: rgba(59, 130, 246, .5);
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
	--tw-blur: ;
	--tw-brightness: ;
	--tw-contrast: ;
	--tw-grayscale: ;
	--tw-hue-rotate: ;
	--tw-invert: ;
	--tw-saturate: ;
	--tw-sepia: ;
	--tw-drop-shadow: ;
	--tw-backdrop-blur: ;
	--tw-backdrop-brightness: ;
	--tw-backdrop-contrast: ;
	--tw-backdrop-grayscale: ;
	--tw-backdrop-hue-rotate: ;
	--tw-backdrop-invert: ;
	--tw-backdrop-opacity: ;
	--tw-backdrop-saturate: ;
	--tw-backdrop-sepia: ;
	--tw-contain-size: ;
	--tw-contain-layout: ;
	--tw-contain-paint: ;
	--tw-contain-style:
}

/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/
*, :after, :before {
	box-sizing: border-box;
	border: 0 solid #e5e7eb
}

:after, :before {
	--tw-content: ""
}

:host, html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
	font-feature-settings: normal;
	font-variation-settings: normal;
	-webkit-tap-highlight-color: transparent
}

body {
	margin: 0;
	line-height: inherit
}

hr {
	height: 0;
	color: inherit;
	border-top-width: 1px
}

abbr:where([title]) {
	-webkit-text-decoration: underline dotted;
	text-decoration: underline dotted
}

h1, h2, h3, h4, h5, h6 {
	font-size: inherit;
	font-weight: inherit
}

a {
	color: inherit;
	text-decoration: inherit
}

b, strong {
	font-weight: bolder
}

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
	font-feature-settings: normal;
	font-variation-settings: normal;
	font-size: 1em
}

small {
	font-size: 80%
}

sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sub {
	bottom: -.25em
}

sup {
	top: -.5em
}

table {
	text-indent: 0;
	border-color: inherit;
	border-collapse: collapse
}

button, input, optgroup, select, textarea {
	font-family: inherit;
	font-feature-settings: inherit;
	font-variation-settings: inherit;
	font-size: 100%;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin: 0;
	padding: 0
}

button, select {
	text-transform: none
}

button, input:where([type=button]), input:where([type=reset]), input:where([type=submit]) {
	-webkit-appearance: button;
	background-color: transparent;
	background-image: none
}

:-moz-focusring {
	outline: auto
}

:-moz-ui-invalid {
	box-shadow: none
}

progress {
	vertical-align: baseline
}

::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
	height: auto
}

[type=search] {
	-webkit-appearance: textfield;
	outline-offset: -2px
}

::-webkit-search-decoration {
	-webkit-appearance: none
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit
}

summary {
	display: list-item
}

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
	margin: 0
}

fieldset {
	margin: 0
}

fieldset, legend {
	padding: 0
}

menu, ol, ul {
	list-style: none;
	margin: 0;
	padding: 0
}

dialog {
	padding: 0
}

textarea {
	resize: vertical
}

input::-moz-placeholder, textarea::-moz-placeholder {
	opacity: 1;
	color: #9ca3af
}

input::placeholder, textarea::placeholder {
	opacity: 1;
	color: #9ca3af
}

[role=button], button {
	cursor: pointer
}

:disabled {
	cursor: default
}

audio, canvas, embed, iframe, img, object, svg, video {
	display: block;
	vertical-align: middle
}

img, video {
	max-width: 100%;
	height: auto
}

[hidden]:where(:not([hidden=until-found])) {
	display: none
}

input:where(:not([type])), input:where([type=date]), input:where([type=datetime-local]), input:where([type=email]), input:where([type=month]), input:where([type=number]), input:where([type=password]), input:where([type=search]), input:where([type=tel]), input:where([type=text]), input:where([type=time]), input:where([type=url]), input:where([type=week]), select, select:where([multiple]), textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: #fff;
	border-color: #6b7280;
	border-width: 1px;
	border-radius: 0;
	padding: .5rem .75rem;
	font-size: 1rem;
	line-height: 1.5rem;
	--tw-shadow: 0 0 #0000
}

input:where(:not([type])):focus, input:where([type=date]):focus, input:where([type=datetime-local]):focus, input:where([type=email]):focus, input:where([type=month]):focus, input:where([type=number]):focus, input:where([type=password]):focus, input:where([type=search]):focus, input:where([type=tel]):focus, input:where([type=text]):focus, input:where([type=time]):focus, input:where([type=url]):focus, input:where([type=week]):focus, select:focus, select:where([multiple]):focus, textarea:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-inset: var(--tw-empty,
			/*!*/
			/*!*/
		);
	--tw-ring-offset-width: 0px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: #2563eb;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
	border-color: #2563eb
}

input::-moz-placeholder, textarea::-moz-placeholder {
	color: #6b7280;
	opacity: 1
}

input::placeholder, textarea::placeholder {
	color: #6b7280;
	opacity: 1
}

::-webkit-datetime-edit-fields-wrapper {
	padding: 0
}

::-webkit-date-and-time-value {
	min-height: 1.5em;
	text-align: inherit
}

::-webkit-datetime-edit {
	display: inline-flex
}

::-webkit-datetime-edit, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-meridiem-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-year-field {
	padding-top: 0;
	padding-bottom: 0
}

select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
	background-position: right .5rem center;
	background-repeat: no-repeat;
	background-size: 1.5em 1.5em;
	padding-right: 2.5rem;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact
}

select:where([multiple]), select:where([size]:not([size="1"])) {
	background-image: none;
	background-position: 0 0;
	background-repeat: unset;
	background-size: initial;
	padding-right: .75rem;
	-webkit-print-color-adjust: unset;
	print-color-adjust: unset
}

input:where([type=checkbox]), input:where([type=radio]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding: 0;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
	display: inline-block;
	vertical-align: middle;
	background-origin: border-box;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	flex-shrink: 0;
	height: 1rem;
	width: 1rem;
	color: #2563eb;
	background-color: #fff;
	border-color: #6b7280;
	border-width: 1px;
	--tw-shadow: 0 0 #0000
}

input:where([type=checkbox]) {
	border-radius: 0
}

input:where([type=radio]) {
	border-radius: 100%
}

input:where([type=checkbox]):focus, input:where([type=radio]):focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
	--tw-ring-inset: var(--tw-empty,
			/*!*/
			/*!*/
		);
	--tw-ring-offset-width: 2px;
	--tw-ring-offset-color: #fff;
	--tw-ring-color: #2563eb;
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)
}

input:where([type=checkbox]):checked, input:where([type=radio]):checked {
	border-color: transparent;
	background-color: currentColor;
	background-size: 100% 100%;
	background-position: 50%;
	background-repeat: no-repeat
}

input:where([type=checkbox]):checked {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0'/%3E%3C/svg%3E")
}

@media (forced-colors:active) {
	input:where([type=checkbox]):checked {
		-webkit-appearance: auto;
		-moz-appearance: auto;
		appearance: auto
	}
}

input:where([type=radio]):checked {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
}

@media (forced-colors:active) {
	input:where([type=radio]):checked {
		-webkit-appearance: auto;
		-moz-appearance: auto;
		appearance: auto
	}
}

input:where([type=checkbox]):checked:focus, input:where([type=checkbox]):checked:hover, input:where([type=radio]):checked:focus, input:where([type=radio]):checked:hover {
	border-color: transparent;
	background-color: currentColor
}

input:where([type=checkbox]):indeterminate {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3E%3C/svg%3E");
	border-color: transparent;
	background-color: currentColor;
	background-size: 100% 100%;
	background-position: 50%;
	background-repeat: no-repeat
}

@media (forced-colors:active) {
	input:where([type=checkbox]):indeterminate {
		-webkit-appearance: auto;
		-moz-appearance: auto;
		appearance: auto
	}
}

input:where([type=checkbox]):indeterminate:focus, input:where([type=checkbox]):indeterminate:hover {
	border-color: transparent;
	background-color: currentColor
}

input:where([type=file]) {
	background: unset;
	border-color: inherit;
	border-width: 0;
	border-radius: 0;
	padding: 0;
	font-size: unset;
	line-height: inherit
}

input:where([type=file]):focus {
	outline: 1px solid ButtonText;
	outline: 1px auto -webkit-focus-ring-color
}

html {
	scroll-behavior: smooth
}

body {
	--tw-bg-opacity: 1;
	background-color: rgb(6 9 15/var(--tw-bg-opacity, 1));
	font-family: Inter;
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1));
	-webkit-font-smoothing: antialiased
}

:focus-visible {
	outline: 2px solid #00f2ff;
	outline-offset: 2px
}

::-webkit-scrollbar {
	width: 6px;
	height: 6px
}

::-webkit-scrollbar-track {
	background: #06090f
}

::-webkit-scrollbar-thumb {
	background: #1e293b
}

::-webkit-scrollbar-thumb:hover {
	background: #00f2ff
}

.pointer-events-none {
	pointer-events: none
}

.static {
	position: static
}

.fixed {
	position: fixed
}

.absolute {
	position: absolute
}

.relative {
	position: relative
}

.sticky {
	position: sticky
}

.inset-0 {
	inset: 0
}

.inset-4 {
	inset: 1rem
}

.inset-y-0 {
	top: 0;
	bottom: 0
}

.-bottom-4 {
	bottom: -1rem
}

.-right-4 {
	right: -1rem
}

.-top-12 {
	top: -3rem
}

.bottom-0 {
	bottom: 0
}

.bottom-1\/3 {
	bottom: 33.333333%
}

.bottom-4 {
	bottom: 1rem
}

.bottom-6 {
	bottom: 1.5rem
}

.bottom-stack-lg {
	bottom: 32px
}

.bottom-stack-md {
	bottom: 16px
}

.left-0 {
	left: 0
}

.left-1\/2 {
	left: 50%
}

.left-1\/3 {
	left: 33.333333%
}

.left-4 {
	left: 1rem
}

.left-6 {
	left: 1.5rem
}

.left-\[75\%\] {
	left: 75%
}

.left-stack-lg {
	left: 32px
}

.left-stack-md {
	left: 16px
}

.right-0 {
	right: 0
}

.right-1\/4 {
	right: 25%
}

.right-4 {
	right: 1rem
}

.right-stack-lg {
	right: 32px
}

.top-35-percent {
	top: 35%
}

.gif-bot {
	bottom: 10px;
	right: 150px;
}

.chat-bot-wave {
	width: 150px;
	max-width: 150px;
}

.top-0 {
	top: 0
}

.top-1\/2 {
	top: 50%
}

.top-1\/4 {
	top: 25%
}

.top-32 {
	top: 8rem
}

.top-4 {
	top: 1rem
}

.-z-10 {
	z-index: -10
}

.z-0 {
	z-index: 0
}

.z-10 {
	z-index: 10
}

.z-20 {
	z-index: 20
}

.z-40 {
	z-index: 40
}

.z-50 {
	z-index: 50
}

.order-1 {
	order: 1
}

.order-2 {
	order: 2
}

.col-span-1 {
	grid-column: span 1/span 1
}

.col-span-12 {
	grid-column: span 12/span 12
}

.col-span-2 {
	grid-column: span 2/span 2
}

.col-span-6 {
	grid-column: span 6/span 6
}

.col-span-7 {
	grid-column: span 7/span 7
}

.mx-auto {
	margin-left: auto;
	margin-right: auto
}

.mb-1 {
	margin-bottom: .25rem
}

.mb-10 {
	margin-bottom: 2.5rem
}

.mb-12 {
	margin-bottom: 3rem
}

.mb-16 {
	margin-bottom: 4rem
}

.mb-2 {
	margin-bottom: .5rem
}

.mb-20 {
	margin-bottom: 5rem
}

.mb-24 {
	margin-bottom: 6rem
}

.mb-3 {
	margin-bottom: .75rem
}

.mb-4 {
	margin-bottom: 1rem
}

.mb-6 {
	margin-bottom: 1.5rem
}

.mb-8 {
	margin-bottom: 2rem
}

.mb-auto {
	margin-bottom: auto
}

.mb-stack-lg {
	margin-bottom: 32px
}

.mb-stack-md {
	margin-bottom: 16px
}

.mb-stack-sm {
	margin-bottom: 8px
}

.mb-unit {
	margin-bottom: 4px
}

.ml-stack-sm {
	margin-left: 8px
}

.mr-2 {
	margin-right: .5rem
}

.mr-4 {
	margin-right: 1rem
}

.mt-1 {
	margin-top: .25rem
}

.mt-1\.5 {
	margin-top: .375rem
}

.mt-16 {
	margin-top: 4rem
}

.mt-2 {
	margin-top: .5rem
}

.mt-20 {
	margin-top: 5rem
}

.mt-4 {
	margin-top: 1rem
}

.mt-6 {
	margin-top: 1.5rem
}

.mt-8 {
	margin-top: 2rem
}

.mt-auto {
	margin-top: auto
}

.mt-stack-lg {
	margin-top: 32px
}

.mt-stack-md {
	margin-top: 16px
}

.mt-stack-sm {
	margin-top: 8px
}

.mt-unit {
	margin-top: 4px
}

.line-clamp-2 {
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2
}

.block {
	display: block
}

.inline-block {
	display: inline-block
}

.flex {
	display: flex
}

.inline-flex {
	display: inline-flex
}

.table {
	display: table
}

.grid {
	display: grid
}

.hidden {
	display: none
}

.aspect-\[16\/9\] {
	aspect-ratio: 16/9
}

.aspect-square {
	aspect-ratio: 1/1
}

.aspect-video {
	aspect-ratio: 16/9
}

.h-0 {
	height: 0
}

.h-1 {
	height: .25rem
}

.h-1\.5 {
	height: .375rem
}

.h-12 {
	height: 3rem
}

.h-16 {
	height: 4rem
}

.h-2 {
	height: .5rem
}

.h-24 {
	height: 6rem
}

.h-3 {
	height: .75rem
}

.h-32 {
	height: 8rem
}

.h-4 {
	height: 1rem
}

.h-48 {
	height: 12rem
}

.h-6 {
	height: 1.5rem
}

.h-64 {
	height: 16rem
}

.h-8 {
	height: 2rem
}

.h-80 {
	height: 20rem
}

.h-96 {
	height: 24rem
}

.h-\[1px\] {
	height: 1px
}

.h-\[20\%\] {
	height: 20%
}

.h-\[300px\] {
	height: 300px
}

.h-\[320px\] {
	height: 320px
}

.h-\[40\%\] {
	height: 40%
}

.h-\[400px\] {
	height: 400px
}

.h-\[450px\] {
	height: 450px
}

.h-\[50\%\] {
	height: 50%
}

.h-\[500px\] {
	height: 500px
}

.h-\[60\%\] {
	height: 60%
}

.h-\[800px\] {
	height: 800px
}

.h-\[90\%\] {
	height: 90%
}

.h-\[95\%\] {
	height: 95%
}

.h-full {
	height: 100%
}

.h-px {
	height: 1px
}

.min-h-\[160px\] {
	min-height: 160px
}

.min-h-\[200px\] {
	min-height: 200px
}

.min-h-\[280px\] {
	min-height: 280px
}

.min-h-\[360px\] {
	min-height: 360px
}

.min-h-\[400px\] {
	min-height: 400px
}

.min-h-\[480px\] {
	min-height: 480px
}

.min-h-\[70vh\] {
	min-height: 70vh
}

.w-1 {
	width: .25rem
}

.w-1\.5 {
	width: .375rem
}

.w-1\/2 {
	width: 50%
}

.w-12 {
	width: 3rem
}

.w-16 {
	width: 4rem
}

.w-2 {
	width: .5rem
}

.w-24 {
	width: 6rem
}

.w-3 {
	width: .75rem
}

.w-3\/4 {
	width: 75%
}

.w-32 {
	width: 8rem
}

.w-4 {
	width: 1rem
}

.w-64 {
	width: 16rem
}

.w-8 {
	width: 2rem
}

.w-\[72\%\] {
	width: 72%
}

.w-\[800px\] {
	width: 800px
}

.w-\[82\%\] {
	width: 82%
}

.w-\[88\%\] {
	width: 88%
}

.w-\[98\%\] {
	width: 98%
}

.w-\[calc\(100\%-2rem\)\] {
	width: calc(100% - 2rem)
}

.w-\[calc\(100\%-64px\)\] {
	width: calc(100% - 64px)
}

.w-fit {
	width: -moz-fit-content;
	width: fit-content
}

.w-full {
	width: 100%
}

.w-px {
	width: 1px
}

.min-w-\[120px\] {
	min-width: 120px
}

.min-w-\[280px\] {
	min-width: 280px
}

.max-w-2xl {
	max-width: 42rem
}

.max-w-3xl {
	max-width: 48rem
}

.max-w-4xl {
	max-width: 56rem
}

.max-w-5xl {
	max-width: 64rem
}

.max-w-6xl {
	max-width: 72rem
}

.max-w-7xl {
	max-width: 80rem
}

.max-w-\[1440px\] {
	max-width: 1440px
}

.max-w-full {
	max-width: 100%
}

.max-w-lg {
	max-width: 32rem
}

.max-width-lg {
	max-width: 50rem
}

.max-w-md {
	max-width: 28rem
}

.max-w-sm {
	max-width: 24rem
}

.max-w-xl {
	max-width: 36rem
}

.max-w-xs {
	max-width: 20rem
}

.flex-1 {
	flex: 1 1 0%
}

.flex-shrink-0 {
	flex-shrink: 0
}

.flex-grow {
	flex-grow: 1
}

.-translate-x-1\/2 {
	--tw-translate-x: -50%
}

.-translate-x-1\/2, .-translate-y-1\/2 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.-translate-y-1\/2 {
	--tw-translate-y: -50%
}

.rotate-45 {
	--tw-rotate: 45deg
}

.rotate-45, .scale-105 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.scale-105 {
	--tw-scale-x: 1.05;
	--tw-scale-y: 1.05
}

.scale-95 {
	--tw-scale-x: .95;
	--tw-scale-y: .95
}

.scale-95, .transform {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.animate-\[spin_15s_linear_infinite_reverse\] {
	animation: spin 15s linear infinite reverse
}

@keyframes spin {
	to {
		transform: rotate(1turn)
	}
}

.animate-\[spin_20s_linear_infinite\] {
	animation: spin 20s linear infinite
}

@keyframes pulse {
	50% {
		opacity: .5
	}
}

.animate-pulse {
	animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}

.cursor-crosshair {
	cursor: crosshair
}

.cursor-pointer {
	cursor: pointer
}

.grid-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-12 {
	grid-template-columns: repeat(12, minmax(0, 1fr))
}

.grid-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr))
}

.grid-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr))
}

.flex-col {
	flex-direction: column
}

.flex-wrap {
	flex-wrap: wrap
}

.items-start {
	align-items: flex-start
}

.items-end {
	align-items: flex-end
}

.items-center {
	align-items: center
}

.items-baseline {
	align-items: baseline
}

.justify-end {
	justify-content: flex-end
}

.justify-center {
	justify-content: center
}

.justify-between {
	justify-content: space-between
}

.justify-around {
	justify-content: space-around
}

.gap-0 {
	gap: 0
}

.gap-1 {
	gap: .25rem
}

.gap-12 {
	gap: 3rem
}

.gap-2 {
	gap: .5rem
}

.gap-3 {
	gap: .75rem
}

.gap-4 {
	gap: 1rem
}

.gap-6 {
	gap: 1.5rem
}

.gap-gutter {
	gap: 24px
}

.gap-px {
	gap: 1px
}

.gap-stack-lg {
	gap: 32px
}

.gap-stack-md {
	gap: 16px
}

.gap-stack-sm {
	gap: 8px
}

.gap-unit {
	gap: 4px
}

.space-y-1>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(.25rem*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(.25rem*var(--tw-space-y-reverse))
}

.space-y-2>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(.5rem*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(.5rem*var(--tw-space-y-reverse))
}

.space-y-3>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(.75rem*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(.75rem*var(--tw-space-y-reverse))
}

.space-y-4>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1rem*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1rem*var(--tw-space-y-reverse))
}

.space-y-6>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(1.5rem*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(1.5rem*var(--tw-space-y-reverse))
}

.space-y-8>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(2rem*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(2rem*var(--tw-space-y-reverse))
}

.space-y-gutter>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(24px*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(24px*var(--tw-space-y-reverse))
}

.space-y-stack-lg>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(32px*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(32px*var(--tw-space-y-reverse))
}

.space-y-stack-md>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(16px*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(16px*var(--tw-space-y-reverse))
}

.space-y-stack-sm>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(8px*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(8px*var(--tw-space-y-reverse))
}

.space-y-unit>:not([hidden])~:not([hidden]) {
	--tw-space-y-reverse: 0;
	margin-top: calc(4px*(1 - var(--tw-space-y-reverse)));
	margin-bottom: calc(4px*var(--tw-space-y-reverse))
}

.divide-y>:not([hidden])~:not([hidden]) {
	--tw-divide-y-reverse: 0;
	border-top-width: calc(1px*(1 - var(--tw-divide-y-reverse)));
	border-bottom-width: calc(1px*var(--tw-divide-y-reverse))
}

.divide-border-muted>:not([hidden])~:not([hidden]) {
	--tw-divide-opacity: 1;
	border-color: rgb(30 41 59/var(--tw-divide-opacity, 1))
}

.overflow-hidden {
	overflow: hidden
}

.overflow-x-auto {
	overflow-x: auto
}

.overflow-x-hidden {
	overflow-x: hidden
}

.whitespace-nowrap {
	white-space: nowrap
}

.rounded {
	border-radius: .25rem
}

.rounded-full {
	border-radius: 9999px
}

.rounded-lg {
	border-radius: .5rem
}

.rounded-sm {
	border-radius: .125rem
}

.rounded-xl {
	border-radius: .75rem
}

.rounded-r-xl {
	border-top-right-radius: .75rem;
	border-bottom-right-radius: .75rem
}

.border {
	border-width: 1px
}

.border-2 {
	border-width: 2px
}

.border-y {
	border-top-width: 1px
}

.border-b, .border-y {
	border-bottom-width: 1px
}

.border-b-2 {
	border-bottom-width: 2px
}

.border-l {
	border-left-width: 1px
}

.border-l-2 {
	border-left-width: 2px
}

.border-l-4 {
	border-left-width: 4px
}

.border-r {
	border-right-width: 1px
}

.border-t {
	border-top-width: 1px
}

.border-t-2 {
	border-top-width: 2px
}

.border-dashed {
	border-style: dashed
}

.border-border-muted {
	--tw-border-opacity: 1;
	border-color: rgb(30 41 59/var(--tw-border-opacity, 1))
}

.border-border-muted\/30 {
	border-color: rgba(30, 41, 59, .3)
}

.border-electric-teal {
	--tw-border-opacity: 1;
	border-color: rgb(0 242 255/var(--tw-border-opacity, 1))
}

.border-electric-teal\/20 {
	border-color: rgba(0, 242, 255, .2)
}

.border-electric-teal\/30 {
	border-color: rgba(0, 242, 255, .3)
}

.border-electric-teal\/40 {
	border-color: rgba(0, 242, 255, .4)
}

.border-electric-teal\/50 {
	border-color: rgba(0, 242, 255, .5)
}

.border-transparent {
	border-color: transparent
}

.border-white {
	--tw-border-opacity: 1;
	border-color: rgb(255 255 255/var(--tw-border-opacity, 1))
}

.border-l-electric-teal {
	--tw-border-opacity: 1;
	border-left-color: rgb(0 242 255/var(--tw-border-opacity, 1))
}

.bg-background {
	--tw-bg-opacity: 1;
	background-color: rgb(8 20 37/var(--tw-bg-opacity, 1))
}

.bg-background-deep {
	--tw-bg-opacity: 1;
	background-color: rgb(6 9 15/var(--tw-bg-opacity, 1))
}

.bg-background-deep\/40 {
	background-color: rgba(6, 9, 15, .4)
}

.bg-background-deep\/50 {
	background-color: rgba(6, 9, 15, .5)
}

.bg-background-deep\/60 {
	background-color: rgba(6, 9, 15, .6)
}

.bg-background-deep\/80 {
	background-color: rgba(6, 9, 15, .8)
}

.bg-background-deep\/90 {
	background-color: rgba(6, 9, 15, .9)
}

.bg-background-deep\/95 {
	background-color: rgba(6, 9, 15, .95)
}

.bg-background\/80 {
	background-color: rgba(8, 20, 37, .8)
}

.bg-black {
	--tw-bg-opacity: 1;
	background-color: rgb(0 0 0/var(--tw-bg-opacity, 1))
}

.bg-black\/40 {
	background-color: rgba(0, 0, 0, .4)
}

.bg-black\/50 {
	background-color: rgba(0, 0, 0, .5)
}

.bg-black\/80 {
	background-color: rgba(0, 0, 0, .8)
}

.bg-border-muted {
	--tw-bg-opacity: 1;
	background-color: rgb(30 41 59/var(--tw-bg-opacity, 1))
}

.bg-data-blue {
	--tw-bg-opacity: 1;
	background-color: rgb(58 79 146/var(--tw-bg-opacity, 1))
}

.bg-electric-teal {
	--tw-bg-opacity: 1;
	background-color: rgb(0 242 255/var(--tw-bg-opacity, 1))
}

.bg-electric-teal\/10 {
	background-color: rgba(0, 242, 255, .1)
}

.bg-electric-teal\/20 {
	background-color: rgba(0, 242, 255, .2)
}

.bg-electric-teal\/30 {
	background-color: rgba(0, 242, 255, .3)
}

.bg-electric-teal\/40 {
	background-color: rgba(0, 242, 255, .4)
}

.bg-electric-teal\/5 {
	background-color: rgba(0, 242, 255, .05)
}

.bg-electric-teal\/60 {
	background-color: rgba(0, 242, 255, .6)
}

.bg-electric-teal\/80 {
	background-color: rgba(0, 242, 255, .8)
}

.bg-error {
	--tw-bg-opacity: 1;
	background-color: rgb(255 180 171/var(--tw-bg-opacity, 1))
}

.bg-green-500 {
	--tw-bg-opacity: 1;
	background-color: rgb(34 197 94/var(--tw-bg-opacity, 1))
}

.bg-primary-container\/10 {
	background-color: rgba(0, 242, 255, .1)
}

.bg-primary-container\/5 {
	background-color: rgba(0, 242, 255, .05)
}

.bg-secondary-container {
	--tw-bg-opacity: 1;
	background-color: rgb(48 69 136/var(--tw-bg-opacity, 1))
}

.bg-surface-container {
	--tw-bg-opacity: 1;
	background-color: rgb(21 32 49/var(--tw-bg-opacity, 1))
}

.bg-surface-container-low {
	--tw-bg-opacity: 1;
	background-color: rgb(17 28 45/var(--tw-bg-opacity, 1))
}

.bg-surface-container\/30 {
	background-color: rgba(21, 32, 49, .3)
}

.bg-surface-navy {
	--tw-bg-opacity: 1;
	background-color: rgb(11 19 34/var(--tw-bg-opacity, 1))
}

.bg-surface-navy\/20 {
	background-color: rgba(11, 19, 34, .2)
}

.bg-surface-navy\/30 {
	background-color: rgba(11, 19, 34, .3)
}

.bg-surface-navy\/40 {
	background-color: rgba(11, 19, 34, .4)
}

.bg-surface-navy\/50 {
	background-color: rgba(11, 19, 34, .5)
}

.bg-surface-navy\/80 {
	background-color: rgba(11, 19, 34, .8)
}

.bg-surface-variant {
	--tw-bg-opacity: 1;
	background-color: rgb(42 53 72/var(--tw-bg-opacity, 1))
}

.bg-surface-variant\/20 {
	background-color: rgba(42, 53, 72, .2)
}

.bg-text-secondary {
	--tw-bg-opacity: 1;
	background-color: rgb(148 163 184/var(--tw-bg-opacity, 1))
}

.bg-transparent {
	background-color: transparent
}

.bg-white {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.bg-\[linear-gradient\(rgba\(18\2c 16\2c 16\2c 0\)_50\%\2c rgba\(0\2c 0\2c 0\2c 0\.1\)_50\%\)\2c linear-gradient\(90deg\2c rgba\(255\2c 0\2c 0\2c 0\.03\)\2c rgba\(0\2c 255\2c 0\2c 0\.01\)\2c rgba\(0\2c 0\2c 255\2c 0\.03\)\)\] {
	background-image: linear-gradient(hsla(0, 6%, 7%, 0) 50%, rgba(0, 0, 0, .1) 0), linear-gradient(90deg, rgba(255, 0, 0, .03), rgba(0, 255, 0, .01), rgba(0, 0, 255, .03))
}

.bg-\[linear-gradient\(rgba\(18\2c 16\2c 16\2c 0\)_50\%\2c rgba\(0\2c 0\2c 0\2c 0\.25\)_50\%\)\2c linear-gradient\(90deg\2c rgba\(255\2c 0\2c 0\2c 0\.06\)\2c rgba\(0\2c 255\2c 0\2c 0\.02\)\2c rgba\(0\2c 0\2c 255\2c 0\.06\)\)\] {
	background-image: linear-gradient(hsla(0, 6%, 7%, 0) 50%, rgba(0, 0, 0, .25) 0), linear-gradient(90deg, rgba(255, 0, 0, .06), rgba(0, 255, 0, .02), rgba(0, 0, 255, .06))
}

.bg-\[radial-gradient\(\#00F2FF_1px\2c transparent_1px\)\] {
	background-image: radial-gradient(#00f2ff 1px, transparent 0)
}

.bg-\[radial-gradient\(circle_at_center\2c _var\(--tw-gradient-stops\)\)\] {
	background-image: radial-gradient(circle at center, var(--tw-gradient-stops))
}

.bg-gradient-to-b {
	background-image: linear-gradient(to bottom, var(--tw-gradient-stops))
}

.bg-gradient-to-br {
	background-image: linear-gradient(to bottom right, var(--tw-gradient-stops))
}

.bg-gradient-to-l {
	background-image: linear-gradient(to left, var(--tw-gradient-stops))
}

.bg-gradient-to-r {
	background-image: linear-gradient(to right, var(--tw-gradient-stops))
}

.bg-gradient-to-t {
	background-image: linear-gradient(to top, var(--tw-gradient-stops))
}

.bg-gradient-to-tr {
	background-image: linear-gradient(to top right, var(--tw-gradient-stops))
}

.from-background-deep {
	--tw-gradient-from: #06090f var(--tw-gradient-from-position);
	--tw-gradient-to: rgba(6, 9, 15, 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-background-deep\/80 {
	--tw-gradient-from: rgba(6, 9, 15, .8) var(--tw-gradient-from-position);
	--tw-gradient-to: rgba(6, 9, 15, 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-electric-teal\/5 {
	--tw-gradient-from: rgba(0, 242, 255, .05) var(--tw-gradient-from-position);
	--tw-gradient-to: rgba(0, 242, 255, 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-surface-navy {
	--tw-gradient-from: #0b1322 var(--tw-gradient-from-position);
	--tw-gradient-to: rgba(11, 19, 34, 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-surface-navy\/90 {
	--tw-gradient-from: rgba(11, 19, 34, .9) var(--tw-gradient-from-position);
	--tw-gradient-to: rgba(11, 19, 34, 0) var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.from-transparent {
	--tw-gradient-from: transparent var(--tw-gradient-from-position);
	--tw-gradient-to: transparent var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)
}

.via-transparent {
	--tw-gradient-to: transparent var(--tw-gradient-to-position);
	--tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to)
}

.to-background-deep {
	--tw-gradient-to: #06090f var(--tw-gradient-to-position)
}

.to-electric-teal {
	--tw-gradient-to: #00f2ff var(--tw-gradient-to-position)
}

.to-transparent {
	--tw-gradient-to: transparent var(--tw-gradient-to-position)
}

.bg-\[length\:100\%_2px\2c 3px_100\%\] {
	background-size: 100% 2px, 3px 100%
}

.fill-none {
	fill: none
}

.stroke-electric-teal\/30 {
	stroke: rgba(0, 242, 255, .3)
}

.object-cover {
	-o-object-fit: cover;
	object-fit: cover
}

.p-0 {
	padding: 0
}

.p-12 {
	padding: 3rem
}

.p-2 {
	padding: .5rem
}

.p-3 {
	padding: .75rem
}

.p-4 {
	padding: 1rem
}

.p-6 {
	padding: 1.5rem
}

.p-8 {
	padding: 2rem
}

.p-stack-lg {
	padding: 32px
}

.p-stack-md {
	padding: 16px
}

.p-stack-sm {
	padding: 8px
}

.p-unit {
	padding: 4px
}

.px-2 {
	padding-left: .5rem;
	padding-right: .5rem
}

.px-3 {
	padding-left: .75rem;
	padding-right: .75rem
}

.px-4 {
	padding-left: 1rem;
	padding-right: 1rem
}

.px-8 {
	padding-left: 2rem;
	padding-right: 2rem
}

.px-margin-safe, .px-stack-lg {
	padding-left: 15px;
	padding-right: 15px
}

.px-stack-md {
	padding-left: 16px;
	padding-right: 16px
}

.px-stack-sm {
	padding-left: 8px;
	padding-right: 8px
}

.py-0\.5 {
	padding-top: .125rem;
	padding-bottom: .125rem
}

.py-1 {
	padding-top: .25rem;
	padding-bottom: .25rem
}

.py-10 {
	padding-top: 2.5rem;
	padding-bottom: 2.5rem
}

.py-2 {
	padding-top: .5rem;
	padding-bottom: .5rem
}

.py-24 {
	padding-top: 6rem;
	padding-bottom: 6rem
}

.py-4 {
	padding-top: 1rem;
	padding-bottom: 1rem
}

.py-stack-lg {
	padding-top: 32px;
	padding-bottom: 32px
}

.py-stack-md {
	padding-top: 16px;
	padding-bottom: 16px
}

.py-stack-sm {
	padding-top: 8px;
	padding-bottom: 8px
}

.py-unit {
	padding-top: 4px;
	padding-bottom: 4px
}

.pb-1 {
	padding-bottom: .25rem
}

.pb-2 {
	padding-bottom: .5rem
}

.pb-20 {
	padding-bottom: 5rem
}

.pb-24 {
	padding-bottom: 6rem
}

.pb-4 {
	padding-bottom: 1rem
}

.pb-stack-lg {
	padding-bottom: 32px
}

.pb-stack-md {
	padding-bottom: 16px
}

.pb-stack-sm {
	padding-bottom: 8px
}

.pl-4 {
	padding-left: 1rem
}

.pl-6 {
	padding-left: 1.5rem
}

.pl-stack-lg {
	padding-left: 32px
}

.pl-stack-md {
	padding-left: 16px
}

.pt-12 {
	padding-top: 3rem
}

.pt-20 {
	padding-top: 5rem
}

.pt-28 {
	padding-top: 7rem
}

.pt-4 {
	padding-top: 1rem
}

.pt-40 {
	padding-top: 10rem
}

.pt-6 {
	padding-top: 1.5rem
}

.pt-stack-lg {
	padding-top: 32px
}

.pt-stack-md {
	padding-top: 16px
}

.text-left {
	text-align: left
}

.text-center {
	text-align: center
}

.text-right {
	text-align: right
}

.font-body-lg, .font-body-md {
	font-family: Inter
}

.font-data-number {
	font-family: JetBrains Mono
}

.font-display-lg, .font-headline-md {
	font-family: Inter
}

.font-technical-label {
	font-family: JetBrains Mono
}

.text-2xl {
	font-size: 1.5rem;
	line-height: 2rem
}

.text-3xl {
	font-size: 1.875rem;
	line-height: 2.25rem
}

.text-4xl {
	font-size: 2.25rem;
	line-height: 2.5rem
}

.text-6xl {
	font-size: 3.75rem;
	line-height: 1
}

.text-\[10px\] {
	font-size: 10px
}

.text-\[11px\] {
	font-size: 11px
}

.text-\[120px\] {
	font-size: 120px
}

.text-\[12px\] {
	font-size: 12px
}

.text-\[14px\] {
	font-size: 14px
}

.text-\[16px\] {
	font-size: 16px
}

.text-\[18px\] {
	font-size: 18px
}

.text-\[32px\] {
	font-size: 32px
}

.text-\[40px\] {
	font-size: 40px
}

.text-\[64px\] {
	font-size: 64px
}

.text-\[84px\] {
	font-size: 84px
}

.text-\[8px\] {
	font-size: 8px
}

.text-body-lg {
	font-size: 18px;
	line-height: 28px;
	font-weight: 400
}

.text-body-md {
	font-size: 16px;
	line-height: 24px;
	font-weight: 400
}

.text-data-number {
	font-size: 12px;
	line-height: 16px;
	font-weight: 400
}

.text-display-lg {
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -.02em;
	font-weight: 700
}

.text-display-lg-mobile {
	font-size: 32px;
	line-height: 40px;
	letter-spacing: -.02em;
	font-weight: 700
}

.text-display-lg-font {
	font-size: 24px;
	line-height: 1.4em;
	letter-spacing: -.02em;
	font-weight: 500
}

.text-headline-md {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem
}

.text-sm {
	font-size: .875rem;
	line-height: 1.25rem
}

.text-technical-label {
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .05em;
	font-weight: 500
}

.text-xl {
	font-size: 1.25rem;
	line-height: 1.75rem
}

.text-xs {
	font-size: .75rem;
	line-height: 1rem
}

.font-bold {
	font-weight: 700
}

.font-extrabold {
	font-weight: 800
}

.font-semibold {
	font-weight: 600
}

.uppercase {
	text-transform: uppercase
}

.italic {
	font-style: italic
}

.leading-none {
	line-height: 1
}

.leading-relaxed {
	line-height: 1.625
}

.leading-tight {
	line-height: 1.25
}

.tracking-\[0\.2em\] {
	letter-spacing: .2em
}

.tracking-tight {
	letter-spacing: -.025em
}

.tracking-tighter {
	letter-spacing: -.05em
}

.tracking-wide {
	letter-spacing: .025em
}

.tracking-wider {
	letter-spacing: .05em
}

.tracking-widest {
	letter-spacing: .1em
}

.text-background-deep {
	--tw-text-opacity: 1;
	color: rgb(6 9 15/var(--tw-text-opacity, 1))
}

.text-black {
	--tw-text-opacity: 1;
	color: rgb(0 0 0/var(--tw-text-opacity, 1))
}

.text-data-blue {
	--tw-text-opacity: 1;
	color: rgb(58 79 146/var(--tw-text-opacity, 1))
}

.text-electric-teal {
	--tw-text-opacity: 1;
	color: rgb(0 242 255/var(--tw-text-opacity, 1))
}

.text-electric-teal\/50 {
	color: rgba(0, 242, 255, .5)
}

.text-electric-teal\/60 {
	color: rgba(0, 242, 255, .6)
}

.text-on-surface-variant {
	--tw-text-opacity: 1;
	color: rgb(185 202 203/var(--tw-text-opacity, 1))
}

.text-text-primary {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.text-text-secondary {
	--tw-text-opacity: 1;
	color: rgb(148 163 184/var(--tw-text-opacity, 1))
}

.text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.underline {
	text-decoration-line: underline
}

.underline-offset-4 {
	text-underline-offset: 4px
}

.opacity-0 {
	opacity: 0
}

.opacity-10 {
	opacity: .1
}

.opacity-20 {
	opacity: .2
}

.opacity-30 {
	opacity: .3
}

.opacity-40 {
	opacity: .4
}

.opacity-5 {
	opacity: .05
}

.opacity-50 {
	opacity: .5
}

.opacity-60 {
	opacity: .6
}

.opacity-80 {
	opacity: .8
}

.mix-blend-overlay {
	mix-blend-mode: overlay
}

.mix-blend-luminosity {
	mix-blend-mode: luminosity
}

.shadow-\[0_0_15px_\#00F2FF\] {
	--tw-shadow: 0 0 15px #00f2ff;
	--tw-shadow-colored: 0 0 15px var(--tw-shadow-color)
}

.shadow-\[0_0_15px_\#00F2FF\], .shadow-\[0_0_15px_rgba\(0\2c 242\2c 255\2c 0\.1\)\] {
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_15px_rgba\(0\2c 242\2c 255\2c 0\.1\)\] {
	--tw-shadow: 0 0 15px rgba(0, 242, 255, .1);
	--tw-shadow-colored: 0 0 15px var(--tw-shadow-color)
}

.shadow-\[0_0_15px_rgba\(0\2c 242\2c 255\2c 0\.2\)\] {
	--tw-shadow: 0 0 15px rgba(0, 242, 255, .2);
	--tw-shadow-colored: 0 0 15px var(--tw-shadow-color)
}

.shadow-\[0_0_15px_rgba\(0\2c 242\2c 255\2c 0\.2\)\], .shadow-\[0_0_4px_\#00F2FF\] {
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_4px_\#00F2FF\] {
	--tw-shadow: 0 0 4px #00f2ff;
	--tw-shadow-colored: 0 0 4px var(--tw-shadow-color)
}

.shadow-\[0_0_5px_rgba\(0\2c 242\2c 255\2c 1\)\] {
	--tw-shadow: 0 0 5px #00f2ff;
	--tw-shadow-colored: 0 0 5px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_8px_\#00F2FF\] {
	--tw-shadow: 0 0 8px #00f2ff;
	--tw-shadow-colored: 0 0 8px var(--tw-shadow-color)
}

.shadow-\[0_0_8px_\#00F2FF\], .shadow-\[0_0_8px_\#8B5CF6\] {
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.shadow-\[0_0_8px_\#8B5CF6\] {
	--tw-shadow: 0 0 8px #8b5cf6;
	--tw-shadow-colored: 0 0 8px var(--tw-shadow-color)
}

.shadow-\[0_0_8px_rgba\(0\2c 242\2c 255\2c 0\.4\)\] {
	--tw-shadow: 0 0 8px rgba(0, 242, 255, .4);
	--tw-shadow-colored: 0 0 8px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.outline-none {
	outline: 2px solid transparent;
	outline-offset: 2px
}

.blur-\[120px\] {
	--tw-blur: blur(120px)
}

.blur-\[120px\], .grayscale {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.grayscale {
	--tw-grayscale: grayscale(100%)
}

.filter {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.backdrop-blur-\[2px\] {
	--tw-backdrop-blur: blur(2px)
}

.backdrop-blur-\[2px\], .backdrop-blur-md {
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.backdrop-blur-md {
	--tw-backdrop-blur: blur(12px)
}

.backdrop-blur-sm {
	--tw-backdrop-blur: blur(4px);
	backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)
}

.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-colors {
	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-opacity {
	transition-property: opacity;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.transition-transform {
	transition-property: transform;
	transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	transition-duration: .15s
}

.duration-1000 {
	transition-duration: 1s
}

.duration-200 {
	transition-duration: .2s
}

.duration-300 {
	transition-duration: .3s
}

.duration-500 {
	transition-duration: .5s
}

.duration-700 {
	transition-duration: .7s
}

.\[background-size\:16px_16px\] {
	background-size: 16px 16px
}

.selection\:bg-electric-teal ::-moz-selection {
	--tw-bg-opacity: 1;
	background-color: rgb(0 242 255/var(--tw-bg-opacity, 1))
}

.selection\:bg-electric-teal ::selection {
	--tw-bg-opacity: 1;
	background-color: rgb(0 242 255/var(--tw-bg-opacity, 1))
}

.selection\:text-background-deep ::-moz-selection {
	--tw-text-opacity: 1;
	color: rgb(6 9 15/var(--tw-text-opacity, 1))
}

.selection\:text-background-deep ::selection {
	--tw-text-opacity: 1;
	color: rgb(6 9 15/var(--tw-text-opacity, 1))
}

.selection\:bg-electric-teal::-moz-selection {
	--tw-bg-opacity: 1;
	background-color: rgb(0 242 255/var(--tw-bg-opacity, 1))
}

.selection\:bg-electric-teal::selection {
	--tw-bg-opacity: 1;
	background-color: rgb(0 242 255/var(--tw-bg-opacity, 1))
}

.selection\:text-background-deep::-moz-selection {
	--tw-text-opacity: 1;
	color: rgb(6 9 15/var(--tw-text-opacity, 1))
}

.selection\:text-background-deep::selection {
	--tw-text-opacity: 1;
	color: rgb(6 9 15/var(--tw-text-opacity, 1))
}

.last\:border-b-0:last-child {
	border-bottom-width: 0
}

.hover\:-translate-y-1:hover {
	--tw-translate-y: -0.25rem
}

.hover\:-translate-y-1:hover, .hover\:translate-x-1:hover {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:translate-x-1:hover {
	--tw-translate-x: 0.25rem
}

.hover\:scale-105:hover {
	--tw-scale-x: 1.05;
	--tw-scale-y: 1.05
}

.hover\:scale-105:hover, .hover\:scale-110:hover {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:scale-110:hover {
	--tw-scale-x: 1.1;
	--tw-scale-y: 1.1
}

.hover\:border-l-2:hover {
	border-left-width: 2px
}

.hover\:border-electric-teal:hover {
	--tw-border-opacity: 1;
	border-color: rgb(0 242 255/var(--tw-border-opacity, 1))
}

.hover\:border-electric-teal\/30:hover {
	border-color: rgba(0, 242, 255, .3)
}

.hover\:border-electric-teal\/50:hover {
	border-color: rgba(0, 242, 255, .5)
}

.hover\:bg-electric-teal:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(0 242 255/var(--tw-bg-opacity, 1))
}

.hover\:bg-primary-fixed:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(116 245 255/var(--tw-bg-opacity, 1))
}

.hover\:bg-surface-container:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(21 32 49/var(--tw-bg-opacity, 1))
}

.hover\:bg-surface-container-low:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(17 28 45/var(--tw-bg-opacity, 1))
}

.hover\:bg-surface-variant:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(42 53 72/var(--tw-bg-opacity, 1))
}

.hover\:bg-surface-variant\/10:hover {
	background-color: rgba(42, 53, 72, .1)
}

.hover\:bg-white:hover {
	--tw-bg-opacity: 1;
	background-color: rgb(255 255 255/var(--tw-bg-opacity, 1))
}

.hover\:pl-2:hover {
	padding-left: .5rem
}

.hover\:text-background-deep:hover {
	--tw-text-opacity: 1;
	color: rgb(6 9 15/var(--tw-text-opacity, 1))
}

.hover\:text-black:hover {
	--tw-text-opacity: 1;
	color: rgb(0 0 0/var(--tw-text-opacity, 1))
}

.hover\:text-electric-teal:hover {
	--tw-text-opacity: 1;
	color: rgb(0 242 255/var(--tw-text-opacity, 1))
}

.hover\:text-text-primary:hover {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.hover\:underline:hover {
	text-decoration-line: underline
}

.hover\:opacity-100:hover {
	opacity: 1
}

.hover\:shadow-\[0_0_15px_rgba\(0\2c 242\2c 255\2c 0\.4\)\]:hover {
	--tw-shadow: 0 0 15px rgba(0, 242, 255, .4);
	--tw-shadow-colored: 0 0 15px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:shadow-\[0_0_20px_rgba\(0\2c 242\2c 255\2c 0\.1\)\]:hover {
	--tw-shadow: 0 0 20px rgba(0, 242, 255, .1);
	--tw-shadow-colored: 0 0 20px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:shadow-\[0_0_30px_rgba\(0\2c 242\2c 255\2c 0\.05\)\]:hover {
	--tw-shadow: 0 0 30px rgba(0, 242, 255, .05);
	--tw-shadow-colored: 0 0 30px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
}

.hover\:brightness-110:hover {
	--tw-brightness: brightness(1.1)
}

.hover\:brightness-110:hover, .hover\:grayscale-0:hover {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.hover\:grayscale-0:hover {
	--tw-grayscale: grayscale(0)
}

.focus\:border-electric-teal:focus {
	--tw-border-opacity: 1;
	border-color: rgb(0 242 255/var(--tw-border-opacity, 1))
}

.focus\:ring-0:focus {
	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color);
	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)
}

.active\:translate-x-1:active {
	--tw-translate-x: 0.25rem
}

.active\:scale-95:active, .active\:translate-x-1:active {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.active\:scale-95:active {
	--tw-scale-x: .95;
	--tw-scale-y: .95
}

.active\:scale-\[0\.98\]:active {
	--tw-scale-x: 0.98;
	--tw-scale-y: 0.98;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:h-full {
	height: 100%
}

.group:hover .group-hover\:w-20 {
	width: 5rem
}

.group:hover .group-hover\:translate-x-1 {
	--tw-translate-x: 0.25rem
}

.group:hover .group-hover\:translate-x-1, .group:hover .group-hover\:translate-x-2 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:translate-x-2 {
	--tw-translate-x: 0.5rem
}

.group:hover .group-hover\:scale-100 {
	--tw-scale-x: 1;
	--tw-scale-y: 1
}

.group:hover .group-hover\:scale-100, .group:hover .group-hover\:scale-105 {
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:scale-105 {
	--tw-scale-x: 1.05;
	--tw-scale-y: 1.05
}

.group:hover .group-hover\:scale-110 {
	--tw-scale-x: 1.1;
	--tw-scale-y: 1.1;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.group:hover .group-hover\:border-electric-teal {
	--tw-border-opacity: 1;
	border-color: rgb(0 242 255/var(--tw-border-opacity, 1))
}

.group:hover .group-hover\:border-white {
	--tw-border-opacity: 1;
	border-color: rgb(255 255 255/var(--tw-border-opacity, 1))
}

.group:hover .group-hover\:bg-electric-teal {
	--tw-bg-opacity: 1;
	background-color: rgb(0 242 255/var(--tw-bg-opacity, 1))
}

.group:hover .group-hover\:bg-electric-teal\/5 {
	background-color: rgba(0, 242, 255, .05)
}

.group:hover .group-hover\:bg-transparent {
	background-color: transparent
}

.group:hover .group-hover\:text-electric-teal {
	--tw-text-opacity: 1;
	color: rgb(0 242 255/var(--tw-text-opacity, 1))
}

.group:hover .group-hover\:text-white {
	--tw-text-opacity: 1;
	color: rgb(255 255 255/var(--tw-text-opacity, 1))
}

.group:hover .group-hover\:opacity-100 {
	opacity: 1
}

.group:hover .group-hover\:opacity-60 {
	opacity: .6
}

.group:hover .group-hover\:opacity-80 {
	opacity: .8
}

.group:hover .group-hover\:grayscale-0 {
	--tw-grayscale: grayscale(0);
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)
}

.data-\[open\=false\]\:hidden[data-open=false] {
	display: none
}

.dark\:bg-background-deep\/80:is(.dark *) {
	background-color: rgba(6, 9, 15, .8)
}

@media (min-width:640px) {
	.sm\:col-span-6 {
		grid-column: span 6/span 6
	}
}

@media (min-width:768px) {
	.md\:col-span-12 {
		grid-column: span 12/span 12
	}

	.md\:col-span-2 {
		grid-column: span 2/span 2
	}

	.md\:col-span-3 {
		grid-column: span 3/span 3
	}

	.md\:col-span-4 {
		grid-column: span 4/span 4
	}

	.md\:col-span-5 {
		grid-column: span 5/span 5
	}

	.md\:col-span-6 {
		grid-column: span 6/span 6
	}

	.md\:col-span-7 {
		grid-column: span 7/span 7
	}

	.md\:col-span-8 {
		grid-column: span 8/span 8
	}

	.md\:block {
		display: block
	}

	.md\:flex {
		display: flex
	}

	.md\:hidden {
		display: none
	}

	.md\:h-80 {
		height: 20rem
	}

	.md\:grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr))
	}

	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr))
	}

	.md\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr))
	}

	.md\:flex-row {
		flex-direction: row
	}

	.md\:items-end {
		align-items: flex-end
	}

	.md\:items-center {
		align-items: center
	}

	.md\:justify-end {
		justify-content: flex-end
	}

	.md\:border-b-0 {
		border-bottom-width: 0
	}

	.md\:border-r {
		border-right-width: 1px
	}

	.md\:p-16 {
		padding: 4rem
	}

	.md\:p-8 {
		padding: 2rem
	}

	.md\:text-left {
		text-align: left
	}

	.md\:text-right {
		text-align: right
	}

	.md\:text-4xl {
		font-size: 2.25rem;
		line-height: 2.5rem
	}

	.md\:text-5xl {
		font-size: 3rem;
		line-height: 1
	}

	.md\:text-display-lg {
		font-size: 48px;
		line-height: 56px;
		letter-spacing: -.02em;
		font-weight: 700
	}

	.md\:text-display-lg-mobile {
		font-size: 32px;
		line-height: 40px;
		letter-spacing: -.02em;
		font-weight: 700
	}
}

@media (min-width:1024px) {
	.lg\:order-1 {
		order: 1
	}

	.lg\:order-2 {
		order: 2
	}

	.lg\:col-span-10 {
		grid-column: span 10/span 10
	}

	.lg\:col-span-3 {
		grid-column: span 3/span 3
	}

	.lg\:col-span-4 {
		grid-column: span 4/span 4
	}

	.lg\:col-span-5 {
		grid-column: span 5/span 5
	}

	.lg\:col-span-6 {
		grid-column: span 6/span 6
	}

	.lg\:col-span-7 {
		grid-column: span 7/span 7
	}

	.lg\:col-span-8 {
		grid-column: span 8/span 8
	}

	.lg\:block {
		display: block
	}

	.lg\:flex {
		display: flex
	}

	.lg\:h-\[420px\] {
		height: 420px
	}

	.lg\:h-auto {
		height: auto
	}

	.lg\:w-1\/3 {
		width: 33.333333%
	}

	.lg\:w-2\/3 {
		width: 66.666667%
	}

	.lg\:grid-cols-12 {
		grid-template-columns: repeat(12, minmax(0, 1fr))
	}

	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr))
	}

	.lg\:flex-row {
		flex-direction: row
	}

	.lg\:py-24 {
		padding-top: 6rem;
		padding-bottom: 6rem
	}
}

@media (max-width:1024px) {
	.gif-bot {
		bottom: 80px;
		right: 40px;
	}

	.chat-bot-wave {
		width: 100px;
		max-width: 100px;
	}
}

/* Hand-authored component classes (not part of the compiled Tailwind output) */
.bento-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px
}

.technical-card {
	position: relative;
	background-color: rgb(11 19 34);
	border: 1px solid rgb(30 41 59);
	transition: border-color .3s ease
}

.technical-card:hover {
	border-color: rgb(0 242 255)
}

/* Cards that are actual links (a.technical-card, e.g. the pillar/manifesto/academy/governance
   cards) get a persistent teal-tinted outline so they read as clickable at a glance -- static
   info cards use the same .technical-card class but stay plain. Desktop/mouse users already get
   that signal from the :hover border-color change and the magnetic-tilt effect above, so this
   only kicks in on devices that can't hover (touch/mobile), which never trigger :hover at all. */
@media (hover: none) {
	a.technical-card {
		outline: 1px solid rgba(0, 242, 255, .35);
		outline-offset: -1px
	}

	a.technical-card:focus-visible {
		outline-color: rgb(0 242 255)
	}
}

.zebra-table tbody tr:nth-child(even) {
	background-color: rgba(42, 53, 72, .3)
}

.status-square {
	display: inline-block;
	width: 8px;
	height: 8px;
	flex-shrink: 0
}

/* Design spec (Identity page pillars): on-hover, background shifts to a
   subtle moving "data-stream" animation — scoped to #pillars so it doesn't
   affect .technical-card usage on other pages */
#pillars .technical-card {
	position: relative;
	z-index: 0;
	overflow: hidden
}

#pillars .technical-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: repeating-linear-gradient(180deg, rgba(0, 242, 255, .1) 0 1px, transparent 1px 22px);
	background-size: 100% 44px;
	opacity: 0;
	transition: opacity .4s ease;
	animation: pillar-data-stream 6s linear infinite;
	animation-play-state: paused
}

#pillars .technical-card:hover::before {
	opacity: 1;
	animation-play-state: running
}

@keyframes pillar-data-stream {
	from {
		background-position: 0 0
	}

	to {
		background-position: 0 440px
	}
}

/* Primary nav: dropdown menus (Solutions / Company / Advantage / Proof of Execution) */
#top-nav .nav-item {
	position: relative
}

#top-nav .nav-item button[aria-haspopup] {
	white-space: nowrap
}

#top-nav .nav-item .material-symbols-outlined {
	transition: transform .18s ease
}

#top-nav .nav-item button[aria-expanded="true"] .material-symbols-outlined {
	transform: rotate(180deg)
}

#top-nav .nav-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 60;
	display: flex;
	flex-direction: column;
	min-width: 230px;
	padding: 8px;
	background-color: rgb(11 19 34);
	border: 1px solid rgb(30 41 59);
	border-radius: 8px;
	box-shadow: 0 16px 32px -8px rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(4px)
}

#top-nav .nav-dropdown a {
	display: block;
	padding: 8px 12px;
	border-radius: 6px;
	font-family: JetBrains Mono;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: .03em;
	white-space: nowrap;
	color: rgb(148 163 184);
	--tw-text-opacity: 1
}

#top-nav .nav-dropdown a:hover, #top-nav .nav-dropdown a:focus-visible {
	background-color: rgb(6 9 15);
	color: rgb(0 242 255)
}

#top-nav .nav-item:hover .nav-dropdown, #top-nav .nav-item:focus-within .nav-dropdown, #top-nav .nav-item[data-open="true"] .nav-dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	/* Transition lives only on the open state so a dropdown fades IN but closes instantly —
     otherwise the outgoing menu's fade-out overlaps the incoming menu's fade-in when
     switching quickly between adjacent nav items, and both render at once. */
	transition: opacity .18s ease, transform .18s ease, visibility .18s
}

/* Primary nav: header partial uses lg: (1024px) instead of md: (768px) for the
   desktop/mobile split, so the six top-level items + dropdowns never overflow
   or wrap through the tablet range — lg:hidden has no Tailwind utility yet */
@media (min-width:1024px) {
	.lg\:hidden {
		display: none
	}

	#top-nav nav>ul {
		gap: 18px
	}
}

#top-nav nav>ul>li>a, #top-nav .nav-item>button {
	white-space: nowrap
}

/* Utilities needed by pages/contact-us.php, pages/global-market-presence.php,
   pages/lyric-logic.php after onboarding them off their standalone Tailwind-CDN
   pipeline onto this compiled stylesheet (see CLAUDE.md) */
@keyframes bounce {
	0%, 100% {
		transform: translateY(-25%);
		animation-timing-function: cubic-bezier(.8, 0, 1, 1)
	}

	50% {
		transform: none;
		animation-timing-function: cubic-bezier(0, 0, .2, 1)
	}
}

.-right-8 {
	right: -2rem
}

.-top-8 {
	top: -2rem
}

.-z-0 {
	z-index: 0
}

.appearance-none {
	appearance: none
}

.bg-center {
	background-position: center
}

.bg-cover {
	background-size: cover
}

.bg-electric-teal\/50 {
	background-color: rgb(0 242 255/0.5)
}

.bg-surface-container-lowest {
	background-color: rgb(4 14 31)
}

.bg-surface-dim\/80 {
	background-color: rgb(8 20 37/0.8)
}

.bg-surface-navy\/60 {
	background-color: rgb(11 19 34/0.6)
}

.bg-vibrant-violet {
	background-color: rgb(139 92 246)
}

.bg-vibrant-violet\/10 {
	background-color: rgb(139 92 246/0.1)
}

.bg-vibrant-violet\/40 {
	background-color: rgb(139 92 246/0.4)
}

.bg-vibrant-violet\/50 {
	background-color: rgb(139 92 246/0.5)
}

.bg-vibrant-violet\/60 {
	background-color: rgb(139 92 246/0.6)
}

.bg-vibrant-violet\/80 {
	background-color: rgb(139 92 246/0.8)
}

.blur-3xl {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	--tw-blur: blur(64px)
}

.border-border-muted\/50 {
	border-color: rgb(30 41 59/0.5)
}

.border-data-blue {
	border-color: rgb(58 79 146)
}

.border-none {
	border-style: none
}

.border-r-2 {
	border-right-width: 2px
}

.border-vibrant-violet {
	border-color: rgb(139 92 246)
}

.border-vibrant-violet\/30 {
	border-color: rgb(139 92 246/0.3)
}

.bottom-10 {
	bottom: 2.5rem
}

.bottom-margin-safe {
	bottom: 32px
}

.cursor-ew-resize {
	cursor: ew-resize
}

.drop-shadow-\[0_0_8px_rgba\(0\,242\,255\,0\.5\)\] {
	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
	--tw-drop-shadow: drop-shadow(0 0 8px rgba(0, 242, 255, 0.5))
}

.gap-8 {
	gap: 2rem
}

.gap-x-8 {
	column-gap: 2rem
}

.gap-y-2 {
	row-gap: 0.5rem
}

.grid-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr))
}

.h-1\/2 {
	height: 50%
}

.h-1\/3 {
	height: 33.333333%
}

.h-1\/4 {
	height: 25%
}

.h-10 {
	height: 2.5rem
}

.h-2\/3 {
	height: 66.666667%
}

.h-2\/5 {
	height: 40%
}

.h-20 {
	height: 5rem
}

.h-3\/4 {
	height: 75%
}

.h-3\/5 {
	height: 60%
}

.h-4\/5 {
	height: 80%
}

.h-40 {
	height: 10rem
}

.h-\[200\%\] {
	height: 200%
}

.h-\[2px\] {
	height: 2px
}

.h-\[716px\] {
	height: 716px
}

.h-screen {
	height: 100vh
}

.left-14 {
	left: 3.5rem
}

.left-\[25\%\] {
	left: 25%
}

.left-\[48\%\] {
	left: 48%
}

.left-\[52\%\] {
	left: 52%
}

.left-\[55\%\] {
	left: 55%
}

.left-margin-safe {
	left: 32px
}

.min-h-\[300px\] {
	min-height: 300px
}

.min-h-screen {
	min-height: 100vh
}

.ml-stack-lg {
	margin-left: 32px
}

.pt-16 {
	padding-top: 4rem
}

.pt-24 {
	padding-top: 6rem
}

.pt-8 {
	padding-top: 2rem
}

.px-6 {
	padding-left: 1.5rem;
	padding-right: 1.5rem
}

.py-16 {
	padding-top: 4rem;
	padding-bottom: 4rem
}

.resize-none {
	resize: none
}

.right-margin-safe {
	right: 32px
}

.scale-50 {
	--tw-scale-x: 0.5;
	--tw-scale-y: 0.5;
	transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.shadow-\[0_0_10px_\#00F2FF\] {
	box-shadow: 0 0 10px #00F2FF
}

.shadow-\[0_0_15px_rgba\(0\,242\,255\,0\.1\)\] {
	box-shadow: 0 0 15px rgba(0, 242, 255, 0.1)
}

.shadow-\[0_0_8px_rgba\(0\,242\,255\,0\.4\)\] {
	box-shadow: 0 0 8px rgba(0, 242, 255, 0.4)
}

.space-y-1>*+* {
	margin-top: 0.25rem
}

.space-y-2>*+* {
	margin-top: 0.5rem
}

.space-y-4>*+* {
	margin-top: 1rem
}

.space-y-6>*+* {
	margin-top: 1.5rem
}

.space-y-gutter>*+* {
	margin-top: 24px
}

.space-y-stack-md>*+* {
	margin-top: 16px
}

.space-y-stack-sm>*+* {
	margin-top: 8px
}

.space-y-unit>*+* {
	margin-top: 4px
}

.text-\[13px\] {
	font-size: 13px
}

.text-on-background {
	color: rgb(216 227 251)
}

.text-on-surface {
	color: rgb(216 227 251)
}

.text-vibrant-violet {
	color: rgb(139 92 246)
}

.top-\[30\%\] {
	top: 30%
}

.top-\[35\%\] {
	top: 35%
}

.top-\[38\%\] {
	top: 38%
}

.top-\[45\%\] {
	top: 45%
}

.tracking-\[0\.3em\] {
	letter-spacing: 0.3em
}

.translate-y-full {
	--tw-translate-y: 100%;
	transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1))
}

.via-electric-teal\/5 {
	--tw-gradient-via: rgb(0 242 255/0.05) var(--tw-gradient-via-position);
	--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-via), var(--tw-gradient-to)
}

.w-10 {
	width: 2.5rem
}

.w-\[100\%\] {
	width: 100%
}

.w-\[1px\] {
	width: 1px
}

.w-\[200\%\] {
	width: 200%
}

.z-30 {
	z-index: 30
}

.hover\:bg-electric-teal\/5:hover {
	background-color: rgb(0 242 255/0.05)
}

.hover\:border-vibrant-violet:hover {
	border-color: rgb(139 92 246)
}

.hover\:scale-150:hover {
	--tw-scale-x: 1.5;
	--tw-scale-y: 1.5;
	transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

.hover\:shadow-\[0_0_10px_rgba\(0\,242\,255\,0\.2\)\]:hover {
	box-shadow: 0 0 10px rgba(0, 242, 255, 0.2)
}

.focus-within\:border-electric-teal:focus-within {
	border-color: rgb(0 242 255)
}

.focus\:shadow-\[0_0_8px_rgba\(0\,242\,255\,0\.3\)\]:focus {
	box-shadow: 0 0 8px rgba(0, 242, 255, 0.3)
}

.placeholder\:opacity-30::placeholder {
	opacity: 0.3
}

.selection\:bg-electric-teal\/30::selection {
	background-color: rgb(0 242 255/0.3)
}

.selection\:text-electric-teal::selection {
	color: rgb(0 242 255)
}

.group:hover .group-hover\:bg-vibrant-violet\/20 {
	background-color: rgb(139 92 246/0.2)
}

.group:hover .group-hover\:rotate-180 {
	--tw-rotate: 180deg;
	transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1))
}

.group:hover .group-hover\:translate-y-0 {
	--tw-translate-y: 0px;
	transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1))
}

.group\/card:hover .group-hover\/card\:rotate-\[360deg\] {
	--tw-rotate: 360deg;
	transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1))
}

.group\/hq:hover .group-hover\/hq\:animate-bounce {
	animation: bounce 1s infinite
}

.group\/hq:hover .group-hover\/hq\:scale-110 {
	--tw-scale-x: 1.1;
	--tw-scale-y: 1.1;
	transform: translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}

@media (min-width:640px) {
	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr))
	}

	.sm\:col-span-2 {
		grid-column: span 2 / span 2
	}
}

@media (min-width:768px) {
	.md\:col-span-1 {
		grid-column: span 1 / span 1
	}
}

/* Leadership profile modal (pages/leadership.php, reused by governance.php for the ISO
   certifications popup) — center-screen dialog with background blur. overflow-y is on this
   outer layer (not the panel) so content taller than the viewport — e.g. governance's 6-tile
   certificate grid on a short mobile screen — can still be scrolled into view instead of
   getting clipped top/bottom with no way to reach it. */
[data-leader-modal] {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	/* "safe" keeps content reachable when it's taller than the viewport -- plain `center` on an
     overflowing flex item leaves the space above scrollTop:0 permanently unreachable, so the
     top of the panel (heading, first cert tile) can't be scrolled to. Browsers without `safe`
     support ignore this line and keep the plain `center` above. */
	align-items: safe center;
	justify-content: center;
	padding: 1.5rem;
	overflow-y: auto;
	background-color: rgba(6, 10, 14, 0.85);
	backdrop-filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease
}

[data-leader-modal][data-open="true"] {
	opacity: 1;
	pointer-events: auto
}

[data-leader-modal] [data-leader-modal-panel-wrap] {
	transform: scale(0.95);
	transition: transform .3s ease
}

[data-leader-modal][data-open="true"] [data-leader-modal-panel-wrap] {
	transform: scale(1)
}

[data-leader-modal-close] {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem
}

/* Governance certifications trust bar (pages/governance.php) — auto-scrolling marquee, pauses on hover */
/* @keyframes trust-bar-scroll {
  0% {
    transform: translateX(0)
  }

  100% {
    transform: translateX(-50%)
  }
} */

.animate-scroll {
	display: flex;
	justify-content: flex-start;
	width: 100%;
	/* animation: trust-bar-scroll 25s linear infinite */
}

/* Certification chip rows (pages/governance.php, "Quality Assurance & ESG" /
   "Sustainability & ESG") — a horizontal scroller works with a mouse and an edge fade hint,
   but on mobile there's no scroll affordance and the row visually "cuts off" mid-card with
   no indication there's more to see. Below the tablet breakpoint, wrap the chips into normal
   flow instead of a scroller so every certification is visible without swiping. */
@media (max-width: 767px) {
	section[aria-label="Global certifications"] ul.animate-scroll {
		flex-wrap: wrap;
		overflow-x: visible
	}

	section[aria-label="Global certifications"] ul.animate-scroll>li, section[aria-label="Global certifications"] ul.animate-scroll>button {
		min-width: 0;
		flex: 1 1 260px
	}

	section[aria-label="Global certifications"] .overflow-hidden.relative {
		overflow: visible
	}

	/* edge fade masks only make sense over a scroller */
	section[aria-label="Global certifications"] .overflow-hidden.relative>.absolute.inset-y-0 {
		display: none
	}

	.gif-bot {
		bottom: 80px;
		right: 20px;
	}

	.chat-bot-wave {
		width: 80px;
		max-width: 80px;
	}
}

/* .animate-scroll:hover {
  animation-play-state: paused
} */

.scrollbar-hide {
	scrollbar-width: none
}

.scrollbar-hide::-webkit-scrollbar {
	display: none
}

/* Screen-reader-only content (used in partials/header.php and pages/governance.php) — was rendering visibly and eating a grid track since this rule never existed */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0
}

/* Decorative classes originally authored only inside lyric-logic.php's page-scoped <style> block, but the class names are reused (and were dead) on avar-academy.php, validation-matrix.php, our-numbers.php, strategic-advisory.php, esg-corporate-responsibility.php, governance.php, engineering-lifecycle-pmo.php, strategic-autonomy.php, manifesto.php, mission-vision.php */

.glow-teal {
	box-shadow: 0 0 15px rgba(0, 242, 255, 0.4)
}

.glow-violet {
	box-shadow: 0 0 15px rgba(139, 92, 246, 0.4)
}

.scanline {
	background: linear-gradient(to bottom, transparent 50%, rgba(0, 242, 255, 0.05) 50%);
	background-size: 100% 4px
}

.grid-blueprint {
	background-image: linear-gradient(to right, rgba(30, 41, 59, 0.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(30, 41, 59, 0.5) 1px, transparent 1px);
	background-size: 40px 40px
}

/* Originally authored only inside contact-us.php's page-scoped <style> block. */
.industrial-grid {
	background-size: 40px 40px;
	background-image: linear-gradient(to right, #1E293B 1px, transparent 1px), linear-gradient(to bottom, #1E293B 1px, transparent 1px)
}

/* Originally authored only inside global-market-presence.php's page-scoped <style>
   block, and reused as-is on mission-vision.php. contact-us.php's own page-scoped
   <style> block redefines this same class with a different easing + an added
   scale — NOT dead/identical as first assumed — so that variant is restored below,
   scoped to the Contact Us page only. */
.hover-lift {
	transition: transform 0.2s cubic-bezier(0.33, 1, 0.68, 1)
}

.hover-lift:hover {
	transform: translateY(-2px)
}

.page-template-template-contact-php .hover-lift {
	transition: transform 0.2s cubic-bezier(0.17, 0.67, 0.83, 0.67)
}

.page-template-template-contact-php .hover-lift:hover {
	transform: translateY(-2px) scale(1.01)
}

.glass-card {
	background-color: rgba(11, 19, 34, 0.6);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px)
}

/* Radar/biometric grid background texture (pages/strategic-advisory.php) — design principles call for this per-page; class had no rule anywhere */
.radar-grid {
	background-image: linear-gradient(rgba(0, 242, 255, 0.15) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 242, 255, 0.15) 1px, transparent 1px), radial-gradient(circle at center, rgba(0, 242, 255, 0.08), transparent 70%);
	background-size: 32px 32px, 32px 32px, 100% 100%
}

/* Globe stage sizing (pages/global-market-presence.php) — bounds the SVG-drawn globe square (width derives from height via aspect-ratio) */
.max-h-\[620px\] {
	max-height: 620px
}

/* Mobile nav accordion groups (includes/header.php) — collapsed by default, arrow rotates on expand, mirrors desktop .nav-item's rotation rule but scoped to the mobile panel's own trigger class */
#mobile-nav-panel .mobile-nav-group__trigger .material-symbols-outlined {
	transition: transform .18s ease
}

#mobile-nav-panel .mobile-nav-group__trigger[aria-expanded="true"] .material-symbols-outlined {
	transform: rotate(180deg)
}

/* Mobile nav panel full-screen overlay (includes/header.php) — #top-nav is position:fixed, so the panel can't rely on page-level scroll to reach content past the viewport edge; fill the remaining viewport below the nav bar with an opaque, independently-scrolling overlay while open.
   Sized via flex (not a hardcoded "100dvh - Npx" subtraction) so it always fills exactly what's
   left under the nav row, regardless of how tall that row actually renders on a given device —
   a fixed magic number left an ~11px gap at the bottom on some viewports. */
#top-nav:has(#mobile-nav-panel[data-open="true"]) {
	display: flex;
	flex-direction: column;
	height: 100dvh
}

#top-nav:has(#mobile-nav-panel[data-open="true"])>nav {
	flex: 0 0 auto
}

#mobile-nav-panel {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain
}

/* Ecosystem pillar cards (pages/ecosystem.php) — CSS-only hover texture per card, no JS/tabs, reusing .grid-blueprint and the pillar-data-stream keyframe already defined above */
.ecosystem-card {
	position: relative;
	isolation: isolate
}

.ecosystem-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity .5s ease
}

.ecosystem-card:hover::before {
	opacity: 1
}

.ecosystem-card--blueprint::before {
	background-image: linear-gradient(to right, rgba(30, 41, 59, 0.5) 1px, transparent 1px), linear-gradient(to bottom, rgba(30, 41, 59, 0.5) 1px, transparent 1px);
	background-size: 40px 40px
}

.ecosystem-card--lights::before {
	background-image: radial-gradient(circle, rgba(0, 242, 255, 0.45) 1.5px, transparent 1.5px);
	background-size: 28px 28px
}

.ecosystem-card--lights:hover::before {
	animation: roadmap-lights-pulse 2.4s ease-in-out infinite
}

@keyframes roadmap-lights-pulse {
	0%, 100% {
		opacity: .6
	}

	50% {
		opacity: 1
	}
}

.ecosystem-card--data::before {
	background-image: repeating-linear-gradient(180deg, rgba(0, 242, 255, .18) 0 1px, transparent 1px 22px);
	background-size: 100% 44px
}

.ecosystem-card--data:hover::before {
	animation: pillar-data-stream 6s linear infinite
}

/* Missing Tailwind utilities used by pages/partners.php — not present in the compiled bundle, so logo scaling, the hover-to-color transition, the per-tile hover border, and the eyebrow label's letter-spacing all silently did nothing */
.object-contain {
	-o-object-fit: contain;
	object-fit: contain
}

.group:hover .group-hover\:grayscale-0 {
	--tw-grayscale: grayscale(0)
}

.hover\:border-electric-teal\/50:hover {
	border-color: rgba(0, 242, 255, .5)
}

.tracking-\[0\.2em\] {
	letter-spacing: 0.2em
}

/* Fixed min-height for partners.php tab-panel cards so card/logo size stays consistent when switching tabs (description length varies per partner) */
.partner-card-min-h {
	min-height: 8rem
}

/* newsroom.php quick-read modal, mirrors [data-leader-modal] rules above */
[data-news-modal] {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background-color: rgba(6, 10, 14, 0.85);
	backdrop-filter: blur(8px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease
}

[data-news-modal][data-open="true"] {
	opacity: 1;
	pointer-events: auto
}

[data-news-modal] [data-news-modal-panel-wrap] {
	transform: scale(0.95);
	transition: transform .3s ease
}

[data-news-modal][data-open="true"] [data-news-modal-panel-wrap] {
	transform: scale(1)
}

[data-news-modal-close] {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem
}

/* absolute-uptime.php "Infinite Loop" circular graphic — Preventive -> Predictive -> Corrective, per Design Principles doc Page 10 Visual section 2 */
.uptime-loop {
	position: relative;
	width: 100%;
	max-width: 22rem;
	aspect-ratio: 1/1;
	margin-left: auto;
	margin-right: auto
}

.uptime-loop__ring {
	position: absolute;
	inset: 8%;
	border: 1px dashed rgba(0, 242, 255, 0.35);
	border-radius: 9999px
}

.uptime-loop__ring::before {
	content: "";
	position: absolute;
	inset: -1px;
	border-radius: 9999px;
	background: conic-gradient(from 0deg, rgba(0, 242, 255, 0.35), transparent 25%, transparent 75%, rgba(0, 242, 255, 0.35));
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
	animation: uptime-loop-spin 6s linear infinite
}

/* Orbit wrapper shares the ring's exact inset (8%), so its bounding box -- and therefore its
   rotation center -- is identical to the ring's. Rotating it sweeps the pulse dot (pinned to the
   top-center of the wrapper, same top:0/left:50%/translate(-50%,-50%) recipe used for the node
   dots) around a perfectly ring-radius circle. This replaces an `offset-path: circle(42% ...)`
   pulse, whose percentage is resolved against a reference box that isn't guaranteed to match the
   ring across browsers, which visibly threw the dot off the ring line. */
.uptime-loop__pulse-orbit {
	position: absolute;
	inset: 8%;
	animation: uptime-loop-spin 6s linear infinite
}

.uptime-loop__pulse {
	position: absolute;
	top: 0;
	left: 50%;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 9999px;
	background: rgb(0, 242, 255);
	box-shadow: 0 0 12px rgba(0, 242, 255, 0.9);
	transform: translate(-50%, -50%)
}

/* Node wrapper's top/left is the exact point on the ring circle (same 8%/71% inset math as
   .uptime-loop__ring). The dot and label are positioned independently within it (see below)
   instead of via flexbox column + a single translate(-50%,-50%) on the whole group -- centering
   the *group* only centers the group's bounding box on the ring point, not the dot itself, so
   the dot ends up pulled off the ring line by roughly half the label's height (the label sits
   below the dot, shifting the group's center down and the dot up and outward). */
.uptime-loop__node {
	position: absolute;
	transform: translateX(-50%)
}

.uptime-loop__node--1 {
	top: 8%;
	left: 50%
}

.uptime-loop__node--2 {
	top: 71%;
	left: 86.4%
}

.uptime-loop__node--3 {
	top: 71%;
	left: 13.6%
}

.uptime-loop__node-dot {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 9999px;
	background: rgb(15, 23, 42);
	border: 2px solid rgba(0, 242, 255, 0.6)
}

.uptime-loop__node span:last-child {
	position: absolute;
	top: 1.1rem;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap
}

@keyframes uptime-loop-spin {
	to {
		transform: rotate(360deg)
	}
}

/* esg-corporate-responsibility.php CSR masonry/hover-caption photo gallery, per Design Principles doc Page 17. Uses CSS multi-column (not grid) so tiles of varying height stack Pinterest-style without row-alignment gaps. */
.esg-gallery {
	column-count: 2;
	column-gap: 1rem
}

.esg-gallery__tile {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 0.75rem;
	border: 1px solid rgba(148, 163, 184, 0.25);
	height: 220px;
	margin-bottom: 1rem;
	break-inside: avoid
}

.esg-gallery__tile--tall {
	height: 340px
}

.esg-gallery__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.3);
	transition: transform .6s ease, filter .6s ease
}

.esg-gallery__tile:hover .esg-gallery__img, .esg-gallery__tile:focus-visible .esg-gallery__img {
	transform: scale(1.05);
	filter: grayscale(0)
}

.esg-gallery__caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.25rem;
	background: linear-gradient(to top, rgba(6, 10, 14, 0.92), rgba(6, 10, 14, 0.15) 60%, transparent);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .4s ease, transform .4s ease
}

.esg-gallery__tile:hover .esg-gallery__caption, .esg-gallery__tile:focus-visible .esg-gallery__caption {
	opacity: 1;
	transform: translateY(0)
}

@media (min-width:768px) {
	.esg-gallery {
		column-count: 3
	}
}


/* bilal css leader card popup */
.bg-surface-navy .h-20 {
	height: auto !important;
	overflow: hidden !important;
	border-radius: 20px;
}

.bg-surface-navy .h-20 .material-symbols-outlined,
.bg-surface-navy .h-20 .material-symbols-outlined img {
	width: 100% !important;
}

/* Fixed quick-links rail (includes/sidebar.php) — only shown at lg (1024px)+, and it was
   overlapping page content/form fields between ~1024–1440px where the centered max-w
   containers don't yet have enough left gutter to clear it on their own. Reserve real
   space for it by pushing <main> over by its footprint (8px offset + ~130px rail + buffer)
   instead of letting it float on top of the content. */
/* @media (min-width:1024px) {
	aside[aria-label="Quick links"]~main {
		padding-left: 168px
	}
} */

/* Contact form's Pillar_Of_Interest <select> (pages/contact-us.php) — native selects clip
   an overflowing value by default instead of ellipsizing it, so long options got cut off
   mid-word on narrow viewports. */
select.input-precision-focus {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

/* Originally authored only inside contact-us.php's page-scoped <style> block. Apply to the
   CF7 form's inputs/textarea/select to match the approved focus state. */
.input-precision-focus:focus {
	outline: none;
	border-color: #00F2FF;
	box-shadow: 0 0 8px rgba(0, 242, 255, 0.3)
}

/* The static HTML mockup put `placeholder:opacity-30` directly on each input, but CF7
   strips colons from `class:` tag-option values (see scripts/cf7-setup.php), so the same
   fade is applied here instead, scoped to the class every contact-form field already has. */
.input-precision-focus::placeholder {
	opacity: 0.3
}

/* CF7 wraps every field in <span class="wpcf7-form-control-wrap">, which CF7's own
   stylesheet only sets `position: relative` on — it's still `display: inline` by default.
   The label-to-field `.space-y-1` gap is a margin-top on that span, but vertical margins
   have no layout effect on inline elements, so the gap was silently collapsing. The
   original static HTML didn't have this wrapper — the <input> itself (inline-block by
   default) was the direct sibling, so its margin-top worked as intended. */
.wpcf7-form-control-wrap {
	display: block
}

/* Contact form submit button loading state (pages/contact-us.php) — no such state exists in
   the static HTML mockup; added so the button visibly locks while the CF7 AJAX submission is
   in flight (toggled via the wpcf7beforesubmit/wpcf7submit events, see template-contact.php). */
.contact-submit-spinner {
	display: none
}

.contact-submit.is-submitting .contact-submit-icon {
	display: none
}

.contact-submit.is-submitting .contact-submit-spinner {
	display: inline-flex;
	animation: spin 1s linear infinite
}

.contact-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed
}

/* CF7 validation styling (pages/contact-us.php) — CF7's own stylesheet renders
   plain browser-default red/orange, which clashes with the dark technical UI
   everywhere else on this form. Reuses #FFB4AB, the theme's own "error" color
   (see .bg-error above) that was defined but never actually applied anywhere,
   and the site's electric-teal for the success state. */
.wpcf7-form-control.wpcf7-not-valid {
	border-color: #FFB4AB !important
}

.wpcf7-form-control.wpcf7-not-valid:focus {
	border-color: #FFB4AB;
	box-shadow: 0 0 8px rgba(255, 180, 171, 0.3)
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: 'Courier New', Courier, monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #FFB4AB
}

.wpcf7-response-output {
	margin: 16px 0 0 0;
	padding: 14px 20px;
	border-width: 1px;
	border-style: solid;
	border-radius: 0;
	background-color: transparent;
	font-family: 'Courier New', Courier, monospace;
	font-size: 11px;
	letter-spacing: 0.05em;
	text-transform: uppercase
}

.wpcf7-response-output.wpcf7-validation-errors,
.wpcf7-response-output.wpcf7-spam-blocked,
.wpcf7-response-output.wpcf7-acceptance-missing,
.wpcf7-response-output.wpcf7-mail-sent-ng {
	border-color: #FFB4AB;
	color: #FFB4AB;
	background-color: rgba(255, 180, 171, 0.08)
}

.wpcf7-response-output.wpcf7-mail-sent-ok {
	border-color: #00F2FF;
	color: #00F2FF;
	background-color: rgba(0, 242, 255, 0.08)
}

.gap-20 {

	gap: 20px !important;
}

/* Horizontally-scrollable tables (pages/careers.php "Open Roles") -- a native scrollbar alone
   is too faint (and hidden entirely on iOS until mid-scroll) to tell mobile/tablet visitors
   there are more columns off-screen. [data-scroll-table-hint.js] toggles .has-scroll only when
   the table actually overflows its wrapper, and .at-end once it's been scrolled fully into
   view, so the fade and hint never show when they're not needed. */
[data-scroll-table] .table-scroll-fade {
	display: none
}

[data-scroll-table].has-scroll .table-scroll-fade {
	display: block;
	position: absolute;
	inset-block: 0;
	right: 0;
	width: 2.5rem;
	background: linear-gradient(to left, rgb(6, 9, 15), transparent);
	pointer-events: none;
	opacity: 1;
	transition: opacity .2s ease
}

[data-scroll-table].has-scroll.at-end .table-scroll-fade {
	opacity: 0
}

.table-scroll-hint {
	display: none
}

[data-scroll-table].has-scroll+.table-scroll-hint {
	display: flex
}