/* Trust banner «ΔΑΟΕ» (inc/p-trust-banner.php) — pure CSS 3D: perspective stage, layered depth (translateZ),
   moving scan floor, radar rings, light sweep. JS (p-trust-banner.js) only feeds --rx/--ry (tilt) and --py (scroll parallax).
   Mobile first; 48em / 64em like the rest of v3. prefers-reduced-motion: everything static. */

.x6tb {
	--x6tb-ink: #fff;
	--x6tb-muted: rgba(225, 233, 255, .78);
	--x6tb-cyan: #5ee1ff;
	--x6tb-gold: #e9c46a;
	--x6tb-navy-0: #070c22;
	--x6tb-navy-1: #111a47;
	--x6tb-navy-2: #26348b;
	--rx: 0deg;
	--ry: 0deg;
	--py: 0;
	--mx: 50%;
	--my: 50%;
	position: relative;
	margin: 2rem 0;
	padding: .5rem 0 1rem;
	overflow: hidden; /* keeps the pop-out layers from creating a horizontal scroll */
	font-family: var(--p-font, inherit);
}
.x6tb *, .x6tb *::before, .x6tb *::after { box-sizing: border-box; }
.x6tb-home .x6tb { margin: 2.5rem 0 1rem; }

.x6tb__stage { perspective: 1400px; perspective-origin: 50% 40%; }

.x6tb__card {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 1rem;
	color: var(--x6tb-ink);
	transform-style: preserve-3d;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .6s cubic-bezier(.2, .7, .2, 1);
	box-shadow: 0 30px 60px -30px rgba(7, 12, 34, .55), 0 12px 24px -12px rgba(38, 52, 139, .35);
}
.x6tb.is-tilting .x6tb__card { transition-duration: .12s; }

/* ---- Background planes ---- */
.x6tb__bg {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 85% 10%, rgba(94, 225, 255, .18), transparent 55%),
		linear-gradient(135deg, var(--x6tb-navy-0) 0%, var(--x6tb-navy-1) 48%, var(--x6tb-navy-2) 100%);
	transform: translateZ(-1px);
}
.x6tb__bg::after { /* pointer-follow highlight */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, .09), transparent 60%);
	pointer-events: none;
}
.x6tb__glow { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; }
.x6tb__glow--a { width: 22rem; height: 22rem; right: -6rem; top: -8rem; background: #2b5bff; transform: translateY(calc(var(--py) * -24px)); }
.x6tb__glow--b { width: 16rem; height: 16rem; left: -5rem; bottom: -8rem; background: #0fb7d4; opacity: .35; transform: translateY(calc(var(--py) * 18px)); }

/* Perspective scan floor: a grid plane tilted away from the viewer, moving towards it. */
.x6tb__floor {
	position: absolute;
	left: -50%;
	right: -50%;
	bottom: -35%;
	height: 85%;
	transform: perspective(500px) rotateX(64deg);
	transform-origin: 50% 100%;
	background-image:
		linear-gradient(rgba(94, 225, 255, .28) 1px, transparent 1px),
		linear-gradient(90deg, rgba(94, 225, 255, .22) 1px, transparent 1px);
	background-size: 44px 44px;
	-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	mask-image: linear-gradient(to top, #000 10%, transparent 85%);
	animation: x6tb-floor 6s linear infinite;
	opacity: .7;
}
@keyframes x6tb-floor { to { background-position: 0 44px, 0 44px; } }

/* Light sweep across the card. */
.x6tb__sweep {
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -40%;
	width: 35%;
	background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .16) 50%, rgba(255, 255, 255, 0) 80%, transparent 100%);
	transform: skewX(-18deg) translateX(0);
	animation: x6tb-sweep 7s cubic-bezier(.45, 0, .2, 1) infinite;
	mix-blend-mode: screen;
}
@keyframes x6tb-sweep {
	0%, 55% { transform: skewX(-18deg) translateX(0); }
	100% { transform: skewX(-18deg) translateX(520%); }
}

/* ---- Content (front plane) ---- */
.x6tb__content {
	position: relative;
	z-index: 2;
	padding: 1.5rem 1.25rem 1.25rem;
	transform: translateZ(40px);
}
.x6tb .x6tb__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin: 0 0 .875rem;
	padding: .3rem .75rem;
	border: 1px solid rgba(94, 225, 255, .45);
	border-radius: 1000px;
	background: rgba(94, 225, 255, .08);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--x6tb-cyan);
}
.x6tb__dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--x6tb-cyan); box-shadow: 0 0 0 0 rgba(94, 225, 255, .6); animation: x6tb-pulse 2.4s ease-out infinite; }
@keyframes x6tb-pulse { 0% { box-shadow: 0 0 0 0 rgba(94, 225, 255, .6); } 80%, 100% { box-shadow: 0 0 0 .6rem rgba(94, 225, 255, 0); } }

.x6tb .x6tb__title {
	margin: 0 0 .875rem;
	font-size: clamp(1.3rem, 1rem + 1.5vw, 2.125rem);
	line-height: 1.18;
	font-weight: 800;
	letter-spacing: -.01em;
	color: #fff;
	text-wrap: balance;
	text-shadow: 0 2px 18px rgba(7, 12, 34, .55);
	overflow-wrap: anywhere;
}
.x6tb .x6tb__lead { margin: 0 0 1rem; max-width: 40rem; font-size: 1rem; line-height: 1.55; color: var(--x6tb-muted); }
.x6tb .x6tb__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.x6tb__chip {
	padding: .375rem .75rem;
	border-radius: .5rem;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: .8125rem;
	font-weight: 700;
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.x6tb__chip::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .45rem; border-radius: 50%; background: var(--x6tb-gold); vertical-align: middle; }
.x6tb__cta {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	padding: .75rem 1.25rem;
	border-radius: 1000px;
	background: #fff;
	color: var(--x6tb-navy-1);
	font-weight: 800;
	font-size: .9375rem;
	text-decoration: none;
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 8px 22px -8px rgba(94, 225, 255, .7);
}
.x6tb__cta:hover, .x6tb__cta:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(94, 225, 255, .9); color: var(--x6tb-navy-1); }
.x6tb__cta:focus-visible { outline: 3px solid var(--x6tb-cyan); outline-offset: 3px; }
.x6tb .x6tb__fine { margin: 1rem 0 0; font-size: .75rem; line-height: 1.4; color: rgba(225, 233, 255, .55); }

/* ---- Visual (deep + pop-out planes) ---- */
.x6tb__visual {
	position: relative;
	z-index: 1;
	height: 16.5rem;
	transform-style: preserve-3d;
	pointer-events: none;
}
.x6tb__rings {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 15rem;
	height: 15rem;
	margin: -7.5rem 0 0 -7.5rem;
	border-radius: 50%;
	background: repeating-radial-gradient(circle, rgba(94, 225, 255, .26) 0 1px, transparent 1px 22px);
	-webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%);
	mask-image: radial-gradient(circle, #000 55%, transparent 71%);
	transform: translateZ(-30px) translateY(calc(var(--py) * 10px));
	overflow: hidden;
}
.x6tb__radar {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(94, 225, 255, .45), rgba(94, 225, 255, 0) 70deg, transparent 360deg);
	animation: x6tb-spin 5s linear infinite;
}
@keyframes x6tb-spin { to { transform: rotate(360deg); } }
.x6tb__plate { /* glowing pad under the devices */
	position: absolute;
	left: 50%;
	bottom: .75rem;
	width: 13rem;
	height: 2.25rem;
	margin-left: -6.5rem;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(94, 225, 255, .55), rgba(94, 225, 255, 0));
	transform: translateZ(10px);
}
.x6tb__dev {
	position: absolute;
	display: block;
	max-width: none;
	height: auto;
	filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(94, 225, 255, .18));
	will-change: transform;
}
.x6tb__dev--plus {
	width: 4.75rem;
	left: calc(50% + .75rem);
	bottom: 2.25rem;
	transform: translateZ(50px) translateY(calc(var(--py) * -14px)) rotate(8deg);
	animation: x6tb-float-b 7s ease-in-out infinite;
}
.x6tb__dev--raptor {
	width: 10rem;
	left: calc(50% - 9rem);
	bottom: 2rem;
	transform: translateZ(90px) translateY(calc(var(--py) * -26px)) rotate(-6deg);
	animation: x6tb-float-a 6s ease-in-out infinite;
}
@keyframes x6tb-float-a { 50% { translate: 0 -8px; } }
@keyframes x6tb-float-b { 50% { translate: 0 -5px; } }

/* ---- Tablet / desktop ---- */
@media (min-width: 48em) {
	.x6tb__card { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; min-height: 22rem; }
	.x6tb__content { padding: 2.25rem 1rem 2rem 2.25rem; }
	.x6tb__visual { height: 100%; min-height: 20rem; }
	.x6tb__rings { width: 19rem; height: 19rem; margin: -9.5rem 0 0 -9.5rem; }
	.x6tb__dev--raptor { width: 13rem; left: calc(50% - 11rem); bottom: 2.25rem; }
	.x6tb__dev--plus { width: 5.75rem; left: calc(50% + 1.5rem); bottom: 2.75rem; }
	.x6tb__plate { bottom: 2rem; width: 17rem; margin-left: -8.5rem; }
}
@media (min-width: 64em) {
	.x6tb__card { min-height: 25rem; }
	.x6tb__content { padding: 2.75rem 1.5rem 2.5rem 3rem; }
	.x6tb__dev--raptor { width: 15.5rem; left: calc(50% - 13rem); }
	.x6tb__dev--plus { width: 6.75rem; left: calc(50% + 2rem); }
	.x6tb__rings { width: 22rem; height: 22rem; margin: -11rem 0 0 -11rem; }
}

/* ---- Reduced motion: static, no tilt/parallax ---- */
@media (prefers-reduced-motion: reduce) {
	.x6tb__card { transform: none !important; transition: none; }
	.x6tb__floor, .x6tb__sweep, .x6tb__radar, .x6tb__dot, .x6tb__dev { animation: none !important; }
	.x6tb__sweep { display: none; }
	.x6tb__glow--a, .x6tb__glow--b, .x6tb__rings { transform: none; }
	.x6tb__dev--plus { transform: translateZ(50px) rotate(8deg); }
	.x6tb__dev--raptor { transform: translateZ(90px) rotate(-6deg); }
	.x6tb__cta { transition: none; }
}

/* ---- Print: flat ---- */
@media print {
	.x6tb__bg, .x6tb__visual { display: none; }
	.x6tb__card { color: #000; transform: none; box-shadow: none; border: 1px solid #ccc; }
	.x6tb__title { color: #000; text-shadow: none; }
}