/* A single representative demo for each industry. */
.demo-hub-page main { position: relative; z-index: 1; }

.demo-hub-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 72vh;
	padding: 142px 3rem 80px;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
	background:
		linear-gradient(rgba(0, 200, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 200, 255, 0.035) 1px, transparent 1px),
		radial-gradient(circle at 80% 28%, rgba(0, 200, 255, 0.13), transparent 36%),
		linear-gradient(145deg, var(--bg2), var(--bg));
	background-size: 48px 48px, 48px 48px, 100% 100%, 100% 100%;
}

.demo-hero-glow {
	position: absolute;
	top: 10%;
	right: 7%;
	width: min(48vw, 700px);
	aspect-ratio: 1;
	border: 1px solid rgba(0, 200, 255, 0.08);
	border-radius: 50%;
	box-shadow: 0 0 120px rgba(0, 200, 255, 0.06), inset 0 0 120px rgba(0, 200, 255, 0.025);
	pointer-events: none;
}

.demo-hero-glow::before,
.demo-hero-glow::after {
	content: '';
	position: absolute;
	inset: 17%;
	border: 1px solid rgba(0, 200, 255, 0.08);
	border-radius: 50%;
}

.demo-hero-glow::after { inset: 36%; }

.demo-hero-inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

.demo-hub-hero .hero-title {
	max-width: 1050px;
	font-size: clamp(2.1rem, 4.8vw, 4.5rem);
}
.demo-hub-hero .hero-desc { max-width: 760px; }

.demo-hero-stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	max-width: 760px;
	margin-top: 3rem;
	border: 1px solid var(--border);
	background: var(--border);
	gap: 1px;
}

.demo-hero-stats > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 96px;
	padding: 1rem 1.25rem;
	background: rgba(5, 8, 16, 0.86);
}

.demo-hero-stats strong {
	font-family: var(--mono);
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1.2;
	color: var(--cyan);
}

.demo-hero-stats span {
	margin-top: 0.45rem;
	font-size: 0.72rem;
	color: var(--text-dim);
}

.demo-directory { background: var(--bg2); scroll-margin-top: 64px; }

.demo-catalog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.demo-domain-card {
	--sector-accent: #7dd3fc;
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 0 1.5rem 1.25rem;
	overflow: hidden;
	border-radius: 12px;
	border: 1px solid var(--border);
	background: var(--bg);
	scroll-margin-top: 88px;
	transition: border-color 250ms ease, box-shadow 250ms ease;
}

.demo-domain-card.is-live {
	background: #0b121e;
}

#manufacturing { --sector-accent: #f5bb70; }
#ports { --sector-accent: #67dfd1; }
#civil-construction { --sector-accent: #edc381; }
#rail { --sector-accent: #a9bcff; }
#transportation-systems { --sector-accent: #f3a99b; }
#supply-chain { --sector-accent: #b5d991; }
#nuclear { --sector-accent: #91d3c5; }
#defense { --sector-accent: #c5cb99; }

.demo-domain-visual {
	position: relative;
	flex: 0 0 auto;
	height: 218px;
	margin: 0 -1.5rem 1.25rem;
	overflow: hidden;
	background: #152432;
}

.demo-domain-visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 650ms cubic-bezier(0.2, 0.65, 0.3, 1);
}

.demo-domain-visual::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(4, 10, 18, 0.08) 25%, rgba(4, 10, 18, 0.88) 100%);
	pointer-events: none;
}

.demo-domain-caption {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.15rem;
	z-index: 1;
	font-family: var(--mono);
	font-size: 0.66rem;
	letter-spacing: 0.11em;
	color: #e8eff7;
}

.demo-domain-caption b { margin-right: 0.65rem; color: var(--sector-accent); font-weight: 400; }

.demo-domain-card:is(.is-highlighted, :focus-within) {
	border-color: var(--sector-accent);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.demo-domain-card:is(.is-highlighted, :focus-within) .demo-domain-visual img { transform: scale(1.045); }

@media (hover: hover) {
	.demo-domain-card:hover { border-color: var(--sector-accent); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2); }
	.demo-domain-card:hover .demo-domain-visual img { transform: scale(1.045); }
	.demo-domain-card:hover .demo-action-arrow { transform: translateX(4px); }
}

.demo-domain-card-heading {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 0.85rem;
}

.demo-domain-card h3 { font-size: 1.5rem; line-height: 1.3; color: var(--text); }

.demo-status {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.45rem 0.55rem;
	border: 1px solid var(--border);
	font-family: var(--mono);
	font-size: 0.6rem;
	letter-spacing: 0.06em;
	color: var(--text-dim);
}

.demo-status::before {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}

.demo-status.is-live { border-color: rgba(0, 255, 157, 0.3); color: var(--green); }
.demo-status.is-live::before { box-shadow: 0 0 10px currentColor; }

.demo-domain-description { font-size: 0.88rem; line-height: 1.8; color: var(--text-dim); }

.demo-domain-question {
	flex: 1;
	margin: 1rem 0 1.25rem;
	padding-left: 0.85rem;
	border-left: 2px solid var(--sector-accent);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.65;
	color: var(--text);
}

.demo-domain-card .demo-action {
	justify-content: space-between;
	width: 100%;
	min-height: 48px;
	padding: 0.8rem 0;
	border: 0;
	border-top: 1px solid var(--border);
	background: transparent;
	font-family: inherit;
	font-size: 0.85rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--sector-accent);
	box-shadow: none;
}
.demo-domain-card .demo-action:hover { color: #fff; }
.demo-domain-card .demo-action:focus-visible { outline: 2px solid var(--sector-accent); outline-offset: 4px; }
.demo-action-arrow { font-size: 1.25rem; transition: transform 250ms ease; }
.demo-domain-card .demo-action-disabled,
.demo-domain-card .demo-action-disabled:hover { color: var(--text-dim); }
.demo-imagery-note { margin-top: 1.25rem; color: var(--text-dim); font-size: 0.72rem; line-height: 1.6; }

.demo-action-disabled,
.demo-action-disabled:hover {
	border-color: var(--border);
	background: transparent;
	box-shadow: none;
	color: var(--text-dim);
	cursor: default;
}

@media (max-width: 1050px) {
	.demo-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.demo-hub-hero { min-height: auto; padding: 118px 1.5rem 64px; }
}

@media (max-width: 600px) {
	.demo-catalog-grid { grid-template-columns: 1fr; }
	.demo-domain-card { padding: 0 1.25rem 1rem; }
	.demo-domain-visual { margin: 0 -1.25rem 1.15rem; height: 210px; }
	.demo-domain-caption { left: 1.25rem; right: 1.25rem; }
	.demo-hero-stats > div { min-height: 84px; padding: 0.85rem 0.6rem; }
	.demo-hero-stats strong { font-size: 1.1rem; }
	.demo-hero-stats span { font-size: 0.63rem; line-height: 1.5; }
	.demo-hub-hero .hero-title { font-size: clamp(1.8rem, 6.8vw, 2.8rem); }
}

@media (prefers-reduced-motion: reduce) {
	.demo-domain-card, .demo-domain-visual img, .demo-domain-card .demo-action, .demo-action-arrow { transition: none; }
	.demo-domain-card .demo-domain-visual img, .demo-domain-card .demo-action-arrow { transform: none; }
}