/* ============================================
   DREAMTECH - Spreadsheet-style overview page (DARK theme)
   Mirrors the DreamHub visual language (Apple-style dark)
   but presents the catalogue as scannable tables.
   ============================================ */

:root {
	--dt-bg:       #0a0a0f;
	--dt-bg-soft:  #14141c;
	--dt-bg-elev:  #1c1c26;
	--dt-bg-row:   rgba(255, 255, 255, 0.025);
	--dt-bg-row-alt: rgba(255, 255, 255, 0.05);
	--dt-text:     #f5f5f7;
	--dt-text-muted: #a1a1aa;
	--dt-text-dim: #6e6e76;
	--dt-link:     #2997ff;
	--dt-link-hover: #5cb0ff;
	--dt-divider:  rgba(255, 255, 255, 0.08);
	--dt-border:   rgba(255, 255, 255, 0.10);
	--dt-radius:   16px;
	--dt-max:      1200px;
}

body#page-dreamtech {
	background: var(--dt-bg);
	color: var(--dt-text);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}
body#page-dreamtech .page-loader { display: none !important; }

/* ============================================
   NAVBAR (matches DreamHub dark treatment)
   ============================================ */
body#page-dreamtech .ms-navbar {
	background: linear-gradient(180deg, rgba(10,10,15,0.92) 0%, rgba(10,10,15,0.65) 100%) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid var(--dt-divider) !important;
	position: sticky;
	top: 0;
	z-index: 1100;
}
body#page-dreamtech .ms-navbar .ms-navbar-menu a { color: rgba(245,245,247,0.92) !important; }
body#page-dreamtech .ms-navbar .ms-navbar-menu a:hover { color: #fff !important; }
body#page-dreamtech .ms-navbar .ms-login-btn { color: rgba(245,245,247,0.92) !important; }
body#page-dreamtech .ms-navbar .ms-signup-btn {
	background: #fff !important; color: #0a0a0f !important; border-radius: 999px;
}
body#page-dreamtech .ms-navbar .ms-signup-btn:hover { background: #e8e8ec !important; }
body#page-dreamtech .ms-navbar .ms-mobile-toggle span { background: #fff !important; }

/* ============================================
   SUB-NAV (department jump links)
   ============================================ */
.dt-subnav {
	position: sticky; top: 64px; z-index: 1050;
	background: rgba(20,20,28,0.78);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	border-bottom: 1px solid var(--dt-divider);
	font-size: 13px;
}
.dt-subnav__inner {
	max-width: var(--dt-max); margin: 0 auto;
	display: flex; align-items: center; gap: 24px;
	padding: 10px 24px; overflow-x: auto;
}
.dt-subnav__brand {
	color: #fff; font-weight: 600; font-size: 14px;
	text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.dt-subnav__brand:hover { color: var(--dt-link); }
.dt-subnav__links {
	display: flex; gap: 20px; margin: 0; padding: 0; list-style: none;
	flex: 1; overflow-x: auto; scrollbar-width: none;
}
.dt-subnav__links::-webkit-scrollbar { display: none; }
.dt-subnav__links a {
	color: var(--dt-text-muted); text-decoration: none; white-space: nowrap;
	transition: color .15s ease;
}
.dt-subnav__links a:hover { color: #fff; }
.dt-subnav__cta {
	background: #fff; color: #0a0a0f !important; padding: 6px 14px;
	border-radius: 999px; font-weight: 600; text-decoration: none;
	white-space: nowrap; flex-shrink: 0;
}
.dt-subnav__cta:hover { background: #e8e8ec; }

/* ============================================
   HERO
   ============================================ */
.dt-hero {
	max-width: var(--dt-max); margin: 0 auto;
	padding: 96px 24px 48px;
	text-align: center;
}
.dt-hero__eyebrow {
	font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
	color: var(--dt-link); font-weight: 600; margin: 0 0 14px;
}
.dt-hero__title {
	font-size: clamp(36px, 5vw, 64px);
	font-weight: 700; line-height: 1.05; letter-spacing: -0.02em;
	margin: 0 0 18px; color: #fff;
}
.dt-hero__sub {
	font-size: 19px; line-height: 1.5; color: var(--dt-text-muted);
	max-width: 720px; margin: 0 auto 32px;
}
.dt-hero__stats {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 12px; margin-top: 8px;
}
.dt-stat {
	background: var(--dt-bg-soft); border: 1px solid var(--dt-border);
	border-radius: 999px; padding: 8px 16px;
	color: var(--dt-text-muted); font-size: 13px;
}
.dt-stat strong { color: #fff; font-weight: 600; margin-right: 6px; }

/* ============================================
   LEGEND
   ============================================ */
.dt-legend {
	max-width: var(--dt-max); margin: 24px auto 0;
	padding: 0 24px;
	display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
	color: var(--dt-text-dim); font-size: 12px;
}
.dt-legend__item { display: inline-flex; align-items: center; gap: 6px; }

/* ============================================
   STATUS PILLS
   ============================================ */
.dt-pill {
	display: inline-block;
	font-size: 11px; font-weight: 600;
	letter-spacing: .04em; text-transform: uppercase;
	padding: 3px 10px; border-radius: 999px;
	border: 1px solid var(--dt-border);
	white-space: nowrap;
}
.dt-pill--live    { background: rgba(52,199,89,0.12);  color: #5bd17a; border-color: rgba(52,199,89,0.30); }
.dt-pill--beta    { background: rgba(41,151,255,0.12); color: #6db7ff; border-color: rgba(41,151,255,0.30); }
.dt-pill--build   { background: rgba(255,159,10,0.12); color: #ffb95e; border-color: rgba(255,159,10,0.30); }
.dt-pill--concept { background: rgba(175,82,222,0.12); color: #c690f0; border-color: rgba(175,82,222,0.30); }

/* ============================================
   PLATFORMS SECTION  (featured platforms, above departments)
   ============================================ */
.dt-platforms {
	max-width: var(--dt-max); margin: 0 auto;
	padding: 40px 24px 0;
}
.dt-platforms__head {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	gap: 16px;
	border-bottom: 1px solid var(--dt-divider);
	padding: 0 4px 14px;
}
.dt-platforms__kicker {
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--dt-text-dim); font-weight: 600; margin: 0;
}
.dt-platforms__title {
	font-size: 28px; font-weight: 700; letter-spacing: -0.01em;
	color: #fff; margin: 4px 0 0;
}
.dt-platforms__sub {
	color: var(--dt-text-muted); font-size: 15px; margin: 0 0 0 auto;
	max-width: 520px; text-align: right;
}

/* Featured Platform card (collapsible <details>) � sized to read as a
   sub-section inside a department, not a standalone hero. */
.dt-platform {
	margin-top: 14px;
	background: rgba(255,255,255,0.025);
	border: 1px solid var(--dt-border);
	border-radius: 12px;
	overflow: hidden;
	scroll-margin-top: 120px;
}
.dt-platform > summary { list-style: none; }
.dt-platform > summary::-webkit-details-marker { display: none; }
.dt-platform > summary::marker { content: ""; }

.dt-platform__head {
	display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	user-select: none;
	transition: background .15s ease;
}
.dt-platform__head:hover { background: rgba(255,255,255,0.035); }
.dt-platform__head:focus-visible {
	outline: 2px solid var(--dt-link);
	outline-offset: -2px;
}

.dt-platform__chevron {
	flex-shrink: 0;
	width: 22px; height: 22px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--dt-text-muted);
	font-size: 10px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--dt-border);
	border-radius: 999px;
	transition: transform .25s ease, color .15s ease, background .15s ease;
}
.dt-platform[open] > summary .dt-platform__chevron {
	transform: rotate(180deg);
	color: #fff;
	background: rgba(255,255,255,0.12);
}
.dt-platform__head:hover .dt-platform__chevron { color: #fff; }

.dt-platform__heading {
	flex: 1 1 auto; min-width: 0;
	display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.dt-platform__kicker {
	display: inline-block;
	font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
	color: var(--dt-link); font-weight: 700;
	background: rgba(41,151,255,0.08);
	border: 1px solid rgba(41,151,255,0.24);
	padding: 2px 7px; border-radius: 999px;
	margin: 0;
	position: relative; top: -1px;
}
.dt-platform__title {
	font-size: 18px; font-weight: 700; letter-spacing: -0.01em;
	color: #fff; margin: 0; line-height: 1.2;
}
/* Description lives inside the platform body now (intro paragraph),
   so the summary stays a single tight row. */
.dt-platform__sub {
	color: var(--dt-text-muted); font-size: 13px;
	margin: 0 0 14px; line-height: 1.5;
}
.dt-platform__meta {
	display: flex; align-items: center; gap: 10px;
	flex-shrink: 0; margin-left: auto;
}
.dt-platform__count {
	font-size: 11px; font-weight: 500;
	color: var(--dt-text-dim);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--dt-border);
	padding: 3px 8px; border-radius: 999px;
	white-space: nowrap;
}
.dt-platform__visit {
	font-size: 12px; color: var(--dt-link); text-decoration: none;
	white-space: nowrap;
}
.dt-platform__visit:hover {
	color: var(--dt-link-hover); text-decoration: underline;
}

.dt-platform__body {
	padding: 14px 16px 16px;
}

/* Collapsible sub-category (Explore / Dream / Shop / Travel / Connect ...) */
.dt-subcat {
	margin-top: 16px;
	scroll-margin-top: 130px;
}
.dt-subcat:first-of-type { margin-top: 8px; }
.dt-subcat > summary { list-style: none; }
.dt-subcat > summary::-webkit-details-marker { display: none; }
.dt-subcat > summary::marker { content: ""; }

.dt-subhead {
	display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
	padding: 12px 6px;
	border-bottom: 1px solid var(--dt-divider);
	cursor: pointer;
	user-select: none;
	border-radius: 6px;
	transition: background .15s ease, border-color .15s ease;
}
.dt-subhead:hover {
	background: rgba(255,255,255,0.025);
	border-bottom-color: rgba(255,255,255,0.18);
}
.dt-subhead:focus-visible {
	outline: 2px solid var(--dt-link);
	outline-offset: 2px;
}
.dt-subhead__chevron {
	font-size: 10px;
	color: var(--dt-text-muted);
	width: 14px;
	display: inline-flex; justify-content: center;
	transition: transform .25s ease, color .15s ease;
}
.dt-subcat[open] > .dt-subhead .dt-subhead__chevron {
	transform: rotate(180deg);
	color: #fff;
}
.dt-subhead:hover .dt-subhead__chevron { color: #fff; }
.dt-subhead__icon {
	font-size: 14px;
	color: var(--dt-text-muted);
	margin-right: 2px;
}
.dt-subhead__title {
	font-size: 13px; font-weight: 700; letter-spacing: .14em;
	text-transform: uppercase; color: #fff;
	margin: 0;
}
.dt-subhead__lede {
	font-size: 13px; color: var(--dt-text-dim);
	margin: 0;
}
.dt-subhead__count {
	font-size: 11px; color: var(--dt-text-dim);
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}

.dt-subcat[open] > .dt-table-wrap {
	margin-top: 12px;
	animation: dt-reveal .22s ease-out;
}

/* Slightly tighter table when nested inside a platform */
.dt-platform .dt-table-wrap {
	background: rgba(0,0,0,0.18);
}
.dt-platform .dt-table td { padding: 12px 18px; }
.dt-platform .dt-table thead th { padding: 10px 18px; }
.dt-platform[open] {
	animation: dt-reveal .22s ease-out;
}

/* ============================================
   DEPARTMENT BLOCK (collapsible via <details>)
   ============================================ */
.dt-dept {
	max-width: var(--dt-max); margin: 0 auto;
	padding: 24px 24px 0;
	scroll-margin-top: 120px; /* clears sticky navbar + sub-nav on anchor jump */
}
/* Hide default disclosure triangle */
.dt-dept > summary { list-style: none; }
.dt-dept > summary::-webkit-details-marker { display: none; }
.dt-dept > summary::marker { content: ""; }

.dt-dept__head {
	display: flex; flex-wrap: wrap; align-items: flex-end;
	gap: 16px;
	border-bottom: 1px solid var(--dt-divider);
	padding: 14px 4px;
	cursor: pointer;
	user-select: none;
	transition: border-color .15s ease, background .15s ease;
	border-radius: 8px;
}
.dt-dept__head:hover {
	background: rgba(255,255,255,0.02);
	border-bottom-color: rgba(255,255,255,0.18);
}
.dt-dept__head:focus-visible {
	outline: 2px solid var(--dt-link);
	outline-offset: 2px;
}

.dt-dept__chevron {
	flex-shrink: 0;
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--dt-text-muted);
	font-size: 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--dt-border);
	border-radius: 999px;
	transition: transform .25s ease, color .15s ease, background .15s ease;
	margin-right: 4px;
}
.dt-dept[open] > summary .dt-dept__chevron {
	transform: rotate(180deg);
	color: #fff;
	background: rgba(255,255,255,0.10);
}
.dt-dept__head:hover .dt-dept__chevron { color: #fff; }

.dt-dept__heading {
	flex: 1 1 auto; min-width: 0;
}
.dt-dept__kicker {
	font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
	color: var(--dt-text-dim); font-weight: 600; margin: 0;
}
.dt-dept__title {
	font-size: 28px; font-weight: 700; letter-spacing: -0.01em;
	color: #fff; margin: 4px 0 0;
}
.dt-dept__sub {
	color: var(--dt-text-muted); font-size: 15px; margin: 8px 0 0;
	flex-basis: 100%;
}
.dt-dept__count {
	flex-shrink: 0;
	font-size: 12px; font-weight: 500;
	color: var(--dt-text-dim);
	background: rgba(255,255,255,0.04);
	border: 1px solid var(--dt-border);
	padding: 4px 10px; border-radius: 999px;
	white-space: nowrap;
}
.dt-dept__visit {
	margin-left: 0;
	font-size: 13px; color: var(--dt-link); text-decoration: none;
	white-space: nowrap;
}
.dt-dept__visit:hover { color: var(--dt-link-hover); text-decoration: underline; }

/* Spacing between the summary and the body content when open.
   Applies to BOTH the direct table-wrap and the nested platform card. */
.dt-dept[open] > .dt-table-wrap,
.dt-dept[open] > .dt-platform,
.dt-dept[open] > .dt-dept__inline-label {
	animation: dt-reveal .22s ease-out;
}
.dt-dept[open] > .dt-table-wrap {
	margin-top: 18px;
}
.dt-dept[open] > .dt-platform {
	margin-top: 18px;
}
.dt-dept__inline-label {
	font-size: 11px; font-weight: 600;
	letter-spacing: .12em; text-transform: uppercase;
	color: var(--dt-text-dim);
	margin: 28px 4px 8px;
}
@keyframes dt-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   EXPAND / COLLAPSE ALL CONTROL
   ============================================ */
.dt-controls {
	max-width: var(--dt-max); margin: 32px auto 0;
	padding: 0 24px;
	display: flex; justify-content: flex-end; gap: 8px;
}
.dt-controls__btn {
	background: rgba(255,255,255,0.04);
	color: var(--dt-text);
	border: 1px solid var(--dt-border);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 12px; font-weight: 600;
	letter-spacing: .04em;
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.dt-controls__btn:hover {
	background: rgba(255,255,255,0.10);
	color: #fff;
}

/* ============================================
   SPREADSHEET-STYLE TABLE
   ============================================ */
.dt-table-wrap {
	background: var(--dt-bg-soft);
	border: 1px solid var(--dt-border);
	border-radius: var(--dt-radius);
	overflow: hidden;
}
.dt-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.dt-table thead th {
	background: rgba(255,255,255,0.04);
	color: var(--dt-text-dim);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: left;
	padding: 12px 18px;
	border-bottom: 1px solid var(--dt-divider);
	white-space: nowrap;
}
.dt-table tbody tr {
	border-bottom: 1px solid var(--dt-divider);
	transition: background .12s ease;
}
.dt-table tbody tr:last-child { border-bottom: none; }
.dt-table tbody tr:nth-child(even) { background: var(--dt-bg-row); }
.dt-table tbody tr:hover { background: var(--dt-bg-row-alt); }

.dt-table td {
	padding: 14px 18px;
	vertical-align: top;
	color: var(--dt-text);
	line-height: 1.45;
}

.dt-table td.dt-cell-name {
	font-weight: 600;
	color: #fff;
	white-space: nowrap;
	width: 1%;
}
.dt-table td.dt-cell-desc {
	color: var(--dt-text-muted);
}
.dt-table td.dt-cell-status {
	width: 1%; white-space: nowrap;
}
.dt-table td.dt-cell-link {
	width: 1%; white-space: nowrap; text-align: right;
}
.dt-table td.dt-cell-link a {
	color: var(--dt-link);
	text-decoration: none;
	font-weight: 500;
}
.dt-table td.dt-cell-link a:hover {
	color: var(--dt-link-hover);
	text-decoration: underline;
}
.dt-table td.dt-cell-link a i {
	font-size: 11px;
	margin-left: 5px;
	opacity: 0.7;
}
.dt-cell-link .dt-soon {
	color: var(--dt-text-dim);
	font-style: italic;
	font-size: 13px;
}

/* ============================================
   CLOSER
   ============================================ */
.dt-closer {
	max-width: 900px; margin: 96px auto 0;
	padding: 0 24px 96px;
	text-align: center;
}
.dt-closer h2 {
	font-size: clamp(28px, 4vw, 44px);
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 14px;
}
.dt-closer p {
	color: var(--dt-text-muted);
	font-size: 17px;
	line-height: 1.55;
	margin: 0 0 28px;
}
.dt-closer__ctas {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.dt-closer__btn {
	padding: 12px 24px; border-radius: 999px;
	font-weight: 600; text-decoration: none; font-size: 14px;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.dt-closer__btn--primary { background: #fff; color: #0a0a0f; }
.dt-closer__btn--primary:hover { background: #e8e8ec; }
.dt-closer__btn--ghost {
	color: #fff;
	border: 1px solid rgba(255,255,255,0.25);
}
.dt-closer__btn--ghost:hover { background: rgba(255,255,255,0.06); }

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 720px) {
	.dt-hero { padding: 64px 20px 32px; }
	.dt-dept { padding: 16px 16px 0; }
	.dt-dept__visit { flex-basis: 100%; }
	.dt-dept__title { font-size: 22px; }
	.dt-dept__chevron { width: 26px; height: 26px; }
	.dt-controls { padding: 0 16px; }

	.dt-platforms { padding: 24px 16px 0; }
	.dt-platforms__sub { margin-left: 0; text-align: left; flex-basis: 100%; }
	.dt-platform__head { padding: 12px 14px; }
	.dt-platform__body { padding: 0 12px 14px; }
	.dt-platform__title { font-size: 18px; }
	.dt-platform__sub { font-size: 12.5px; }
	.dt-platform__meta { margin-left: 0; flex-basis: 100%; }
	.dt-subhead { margin: 22px 2px 10px; }

	.dt-table thead { display: none; }
	.dt-table tbody tr {
		display: block;
		padding: 14px 16px;
		border-bottom: 1px solid var(--dt-divider);
	}
	.dt-table tbody tr:nth-child(even) { background: var(--dt-bg-row); }
	.dt-table td {
		display: block;
		padding: 4px 0;
		width: auto !important;
		white-space: normal !important;
		text-align: left !important;
	}
	.dt-table td.dt-cell-name { font-size: 16px; margin-bottom: 4px; }
	.dt-table td.dt-cell-status { margin: 6px 0; }
	.dt-table td.dt-cell-link { margin-top: 4px; }
}