/*
	Blitz3D+ showcase pages — /Home/home.php (original mode) and
	/Home/extended.php (extended mode).

	Every rule is scoped under .b3d-home so the product pitch keeps its
	IDE-palette branding whichever site skin is active. The chrome around
	it (tabs, submenu, main panel, footer) stays with the skin. Colours
	follow BLITZ3D_PLUS_COLOUR_REFERENCE.docx.
*/

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@600;700&family=Inter:ital,wght@0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;600&display=swap');

.b3d-home{
	--hb-bg: #225588;
	--hb-panel: #184672;
	--hb-deep: #12344F;
	--hb-deeper: #0E2A40;
	--hb-text: #EEEEEE;
	--hb-muted: #C4DCEA;
	--hb-bright: #FFFFFF;
	--hb-green: #00FF66;
	--hb-cyan: #AAFFFF;
	--hb-yellow: #FFEE00;
	--hb-aqua: #33FFDD;
	--hb-line: rgba(112,173,209,0.3);
	--hb-line-strong: rgba(112,173,209,0.55);
	--hb-glow-green: rgba(0,255,102,0.35);
	--hb-glow-aqua: rgba(51,255,221,0.3);
	/* surface/detail tokens - every colour lives here so a skin can
	   re-theme the whole showcase by overriding this block (the light
	   skin does; see .main .b3d-home in skins/light/style.css) */
	--hb-band: rgba(14,42,64,0.5);			/* section.band */
	--hb-table: rgba(14,42,64,0.6);			/* table.compare */
	--hb-card: rgba(24,70,114,0.55);		/* cards, stats, pull quote */
	--hb-card-strong: rgba(24,70,114,0.7);	/* pipeline nodes */
	--hb-card-solid: rgba(24,70,114,0.8);	/* migration map 'now' cells */
	--hb-inset: rgba(18,52,79,0.6);			/* eyebrow pill */
	--hb-inset-strong: rgba(18,52,79,0.7);	/* migration map 'was' cells */
	--hb-head-top: #1A4A78;					/* gradient top: glyphs, pane heads, table heads */
	--hb-active-top: #2D6E9F;				/* mode-switch active pill gradient */
	--hb-active-bot: #184672;
	--hb-seg-glow: rgba(51,255,221,0.18);
	--hb-glyph-glow: rgba(51,255,221,0.35);
	--hb-ghost-top: rgba(45,110,159,0.5);	/* ghost button gradient */
	--hb-ghost-bot: rgba(18,52,79,0.7);
	--hb-ghost-hover: #2D6E9F;
	--hb-line-faint: rgba(112,173,209,0.14);
	--hb-na: rgba(196,220,234,0.55);
	--hb-yellow-line: rgba(255,238,0,0.5);
	--hb-track-shadow: rgba(0,0,0,0.35);
	--hb-shadow: rgba(0,0,0,0.35);
	--hb-logo-shadow: rgba(0,0,0,0.45);
	--hb-radius: 8px;
	--hb-font-display: 'Rajdhani','Segoe UI',Tahoma,sans-serif;
	--hb-font-body: 'Inter','Segoe UI',Tahoma,Verdana,sans-serif;
	--hb-font-mono: 'JetBrains Mono','Consolas','Courier New',monospace;
	font: 14px/1.6 var(--hb-font-body);
	color: var(--hb-text);
}
.b3d-home *{ box-sizing: border-box; }
.b3d-home section{ margin: 0 0 38px 0; }
.b3d-home section.band{
	background: var(--hb-band);
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-radius);
	padding: 26px;
}

/* ---------------------------------------------- section headings */
.b3d-home h2.sect{
	font: 700 24px/1.25 var(--hb-font-display);
	color: var(--hb-green);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-shadow: 0 0 18px var(--hb-glow-green);
	margin: 0 0 6px 0;
}
.b3d-home p.sect-sub{ color: var(--hb-muted); margin: 0 0 26px 0; max-width: 70ch; }

/* ---------------------------------------------- mode switch (original / extended) */
.b3d-home nav.mode-switch{
	display: flex;
	justify-content: center;
	margin: 10px 0 30px 0;
}
.b3d-home .mode-switch .track{
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: var(--hb-deeper);
	border: 1px solid var(--hb-line-strong);
	border-radius: 999px;
	box-shadow: inset 0 2px 10px var(--hb-track-shadow);
}
.b3d-home .mode-switch a.seg{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 700 14px var(--hb-font-display);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hb-muted);
	padding: 10px 26px;
	border-radius: 999px;
	text-decoration: none;
}
.b3d-home .mode-switch a.seg:not(.active):hover{
	color: var(--hb-bright);
	text-decoration: none;
	text-shadow: none;
}
.b3d-home .mode-switch a.seg.active{
	color: var(--hb-aqua);
	background: linear-gradient(180deg, var(--hb-active-top), var(--hb-active-bot));
	text-shadow: 0 0 12px var(--hb-glow-aqua);
	box-shadow: 0 0 18px var(--hb-seg-glow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.b3d-home .mode-switch a.seg.active:hover{ text-decoration: none; }
.b3d-home .mode-switch .beta{
	font: 700 9.5px var(--hb-font-display);
	letter-spacing: 0.18em;
	color: var(--hb-yellow);
	border: 1px solid var(--hb-yellow-line);
	border-radius: 4px;
	padding: 2px 6px;
	line-height: 1;
}

/* ---------------------------------------------- hero */
.b3d-home .hero{
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 34px;
	align-items: start;	/* both pages top-align so nothing jumps when switching modes */
	margin-top: 8px;
}
.b3d-home .hero > *{ min-width: 0; }
.b3d-home .eyebrow{
	display: inline-block;
	font: 700 12px var(--hb-font-display); letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--hb-aqua);
	border: 1px solid var(--hb-line-strong);
	border-radius: 999px;
	padding: 5px 14px;
	background: var(--hb-inset);
	text-shadow: 0 0 10px var(--hb-glow-aqua);
	margin-bottom: 18px;
}
.b3d-home .hero-logo{
	width: 340px; max-width: 90%; height: auto;
	display: block;
	margin: 0 0 6px -10px;
	filter: drop-shadow(0 12px 30px var(--hb-logo-shadow));
}
.b3d-home .hero h1{
	font: 700 40px/1.1 var(--hb-font-display);
	color: var(--hb-bright);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	margin: 6px 0 12px 0;
	padding: 0;
	border: none;			/* skins give h1 underlines/borders - not here */
	text-shadow: none;
}
.b3d-home .hero h1 em{
	font-style: normal;
	color: var(--hb-green);
	text-shadow: 0 0 22px var(--hb-glow-green);
}
.b3d-home .hero p.lead{ font-size: 15.5px; color: var(--hb-muted); max-width: 46ch; margin: 0 0 22px 0; }
.b3d-home .cta-row{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.b3d-home a.btn{
	display: inline-block;
	font: 700 14px var(--hb-font-display); letter-spacing: 0.1em; text-transform: uppercase;
	padding: 12px 26px;
	border-radius: 999px;
	text-decoration: none;
}
.b3d-home a.btn-primary{
	color: #052e18;
	background: linear-gradient(180deg, #66FFA3, #00FF66 55%, #00cc52);
	box-shadow: 0 4px 24px var(--hb-glow-green), inset 0 1px 0 rgba(255,255,255,0.5);
}
.b3d-home a.btn-primary:hover{
	text-decoration: none;
	filter: brightness(1.08);
	color: #052e18;
	background: linear-gradient(180deg, #66FFA3, #00FF66 55%, #00cc52);
	text-shadow: none;
}
.b3d-home a.btn-ghost{
	color: var(--hb-cyan);
	border: 1px solid var(--hb-line-strong);
	background: linear-gradient(180deg, var(--hb-ghost-top), var(--hb-ghost-bot));
}
.b3d-home a.btn-ghost:hover{
	text-decoration: none;
	color: var(--hb-bright);
	background: var(--hb-ghost-hover);
	text-shadow: none;
}
.b3d-home .fineprint{ font-size: 12px; color: var(--hb-muted); }
.b3d-home .fineprint b{ color: var(--hb-text); }

/* ---------------------------------------------- IDE window */
/* The editor window, code grid and token colours are shared site-wide
   now - see /skins/code.css (.b3d-ide, .b3d-codegrid, .b3d-hl). */

/* ---------------------------------------------- ticker strip */
.b3d-home .ticker{
	border: 1px solid var(--hb-line-strong);
	border-radius: var(--hb-radius);
	background: var(--hb-deeper);
	overflow: hidden;
	white-space: nowrap;
	padding: 10px 0;
	margin: 0 0 38px 0;
}
.b3d-home .ticker span{
	display: inline-block;
	font: 700 13px var(--hb-font-display); letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--hb-aqua);
	animation: b3dtick 40s linear infinite;
	text-shadow: 0 0 12px var(--hb-glow-aqua);
}
.b3d-home .ticker b{ color: var(--hb-yellow); font-weight: 700; padding: 0 14px; }
@keyframes b3dtick{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

/* ---------------------------------------------- feature grid */
.b3d-home .grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.b3d-home .card{
	background: var(--hb-card);
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-radius);
	padding: 18px 18px 16px 18px;
	transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.b3d-home .card:hover{
	transform: translateY(-3px);
	border-color: var(--hb-line-strong);
	box-shadow: 0 10px 30px var(--hb-shadow);
}
.b3d-home .card .glyph{
	width: 38px; height: 38px;
	border-radius: 8px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(180deg, var(--hb-head-top), var(--hb-deeper));
	border: 1px solid var(--hb-line-strong);
	margin-bottom: 12px;
	font-size: 19px; line-height: 1;
	filter: drop-shadow(0 0 8px var(--hb-glyph-glow));
}
.b3d-home .card h3{
	font: 700 15.5px var(--hb-font-display); letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--hb-cyan);
	margin: 0 0 6px 0;
}
.b3d-home .card p{ margin: 0 0 10px 0; font-size: 13px; color: var(--hb-muted); }
.b3d-home .chips{ display: flex; flex-wrap: wrap; gap: 5px; }
.b3d-home .chip{
	font: 600 10.5px var(--hb-font-mono);
	color: var(--hb-aqua);
	background: var(--hb-deeper);
	border: 1px solid var(--hb-line);
	border-radius: 4px;
	padding: 2px 7px;
	white-space: nowrap;
}
.b3d-home a.chip:hover{ color: var(--hb-bright); border-color: var(--hb-line-strong); }

/* link line under the feature grid (home -> the extended showcase) */
.b3d-home p.grid-more{ margin: 18px 0 0 0; font-size: 13.5px; color: var(--hb-muted); }
.b3d-home p.grid-more a{ color: var(--hb-aqua); font-weight: 600; }

/* ---------------------------------------------- two-column feature layouts */
.b3d-home .duo{
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 24px;
	align-items: start;
}
.b3d-home .duo > *{ min-width: 0; } /* wide code panes must shrink, not stretch the column */
.b3d-home .pane{
	border: 1px solid var(--hb-line-strong);
	border-radius: 10px;
	overflow: hidden;
	background: var(--hb-deeper);
}
.b3d-home .pane-head{
	display: flex; justify-content: space-between; align-items: center;
	padding: 8px 14px;
	background: linear-gradient(180deg, var(--hb-head-top), var(--hb-deep));
	border-bottom: 1px solid var(--hb-line);
	font: 700 12px var(--hb-font-display); letter-spacing: 0.12em; text-transform: uppercase;
}
.b3d-home .pane-head .tag{
	font: 600 10px var(--hb-font-mono);
	text-transform: none; letter-spacing: 0;
	color: var(--hb-muted);
}
.b3d-home .pane .b3d-codegrid{ border: none; border-radius: 0; }

/* asset pipeline diagram */
.b3d-home .pipe{
	display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap;
	padding: 14px;
	border-bottom: 1px solid var(--hb-line);
}
.b3d-home .pipe .node{
	flex: 1 1 90px;
	text-align: center;
	background: var(--hb-card-strong);
	border: 1px solid var(--hb-line-strong);
	border-radius: 6px;
	padding: 10px 6px;
}
.b3d-home .pipe .node b{
	display: block;
	font: 700 12px var(--hb-font-display); letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--hb-cyan);
}
.b3d-home .pipe .node span{ font: 500 10.5px var(--hb-font-body); color: var(--hb-muted); }
.b3d-home .pipe .arr{
	align-self: center;
	color: var(--hb-green);
	font: 700 16px var(--hb-font-mono);
	text-shadow: 0 0 12px var(--hb-glow-green);
}

/* bullet feature lists */
.b3d-home ul.points{ list-style: none; margin: 0; padding: 0; }
.b3d-home ul.points li{
	padding: 10px 0 10px 28px;
	position: relative;
	border-bottom: 1px solid var(--hb-line-faint);
	color: var(--hb-muted);
	font-size: 13.5px;
}
.b3d-home ul.points li:last-child{ border-bottom: none; }
.b3d-home ul.points li::before{
	content: "+";
	position: absolute; left: 2px; top: 7px;
	font: 700 17px var(--hb-font-display);
	color: var(--hb-green);
	text-shadow: 0 0 12px var(--hb-glow-green);
}
.b3d-home ul.points li b{ color: var(--hb-text); }
.b3d-home ul.points code{
	font: 600 11.5px var(--hb-font-mono);
	color: var(--hb-aqua);
	background: var(--hb-deeper);
	border: 1px solid var(--hb-line);
	border-radius: 4px;
	padding: 1px 6px;
	white-space: nowrap;
}

/* ---------------------------------------------- migration map */
.b3d-home .mig{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 8px 14px;
	align-items: stretch;
	max-width: 860px;
}
.b3d-home .mig .was, .b3d-home .mig .now{
	padding: 9px 14px;
	border-radius: 6px;
	font: 600 12.5px var(--hb-font-body);
	display: flex; align-items: center;
}
.b3d-home .mig .was{
	background: var(--hb-inset-strong);
	border: 1px solid var(--hb-line);
	color: var(--hb-muted);
	text-decoration: line-through;
	text-decoration-color: rgba(240,48,48,0.6);
	text-decoration-thickness: 1px;
}
.b3d-home .mig .arrow{
	color: var(--hb-green);
	font: 700 15px var(--hb-font-mono);
	text-shadow: 0 0 12px var(--hb-glow-green);
	display: flex; align-items: center;
}
.b3d-home .mig .now{
	background: var(--hb-card-solid);
	border: 1px solid var(--hb-line-strong);
	color: var(--hb-bright);
}
.b3d-home .mig .now b{
	color: var(--hb-aqua);
	font-family: var(--hb-font-mono);
	font-size: 12px;
	padding-right: 6px;
}

/* ---------------------------------------------- classic vs plus comparison */
.b3d-home table.compare{
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--hb-line-strong);
	border-radius: var(--hb-radius);
	overflow: hidden;
	background: var(--hb-table);
}
.b3d-home table.compare th, .b3d-home table.compare td{
	padding: 11px 16px;
	text-align: left;
	font: 400 13.5px/1.6 var(--hb-font-body);
}
.b3d-home table.compare thead th{
	font: 700 13px var(--hb-font-display); letter-spacing: 0.12em; text-transform: uppercase;
	background: linear-gradient(180deg, var(--hb-head-top), var(--hb-deep));
	color: var(--hb-cyan);
	border-bottom: 1px solid var(--hb-line-strong);
}
.b3d-home table.compare thead th:last-child{ color: var(--hb-green); }
.b3d-home table.compare tbody td{
	border-bottom: 1px solid var(--hb-line-faint);
	color: var(--hb-muted);
}
.b3d-home table.compare tbody tr:last-child td{ border-bottom: none; }
.b3d-home table.compare tbody td:first-child{ color: var(--hb-text); font-weight: 600; width: 24%; }
.b3d-home table.compare tbody td:last-child{ color: var(--hb-text); }
.b3d-home table.compare .na{ color: var(--hb-na); font-style: italic; }
.b3d-home table.compare .y{ color: var(--hb-green); font-weight: 700; }

/* ---------------------------------------------- stats bar */
.b3d-home .stats{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.b3d-home .stat{
	text-align: center;
	padding: 18px 10px;
	background: var(--hb-card);
	border: 1px solid var(--hb-line);
	border-radius: var(--hb-radius);
}
.b3d-home .stat .big{
	font: 700 30px var(--hb-font-display);
	color: var(--hb-green);
	text-shadow: 0 0 18px var(--hb-glow-green);
}
.b3d-home .stat .lbl{
	font: 700 11px var(--hb-font-display); letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--hb-muted);
}

/* ---------------------------------------------- heritage timeline */
.b3d-home .timeline{ position: relative; margin: 6px 0 0 0; padding-left: 26px; }
.b3d-home .timeline::before{
	content: "";
	position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px;
	background: linear-gradient(180deg, var(--hb-aqua), var(--hb-green));
	box-shadow: 0 0 12px var(--hb-glow-aqua);
}
.b3d-home .tl{ position: relative; padding: 0 0 20px 0; }
.b3d-home .tl:last-child{ padding-bottom: 0; }
.b3d-home .tl::before{
	content: "";
	position: absolute; left: -26px; top: 6px;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: var(--hb-deep);
	border: 2px solid var(--hb-aqua);
	box-shadow: 0 0 10px var(--hb-glow-aqua);
}
.b3d-home .tl.now::before{
	background: var(--hb-green);
	border-color: var(--hb-green);
	box-shadow: 0 0 16px var(--hb-glow-green);
}
.b3d-home .tl .yr{ font: 700 12.5px var(--hb-font-mono); color: var(--hb-aqua); }
.b3d-home .tl.now .yr{ color: var(--hb-green); }
.b3d-home .tl h3{
	font: 700 16px var(--hb-font-display); letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--hb-cyan);
	margin: 2px 0 3px 0;
}
.b3d-home .tl p{ margin: 0; color: var(--hb-muted); font-size: 13px; max-width: 52ch; }

/* pull quote */
.b3d-home .quote{
	margin-top: 22px;
	padding: 16px 18px;
	background: var(--hb-card);
	border: 1px solid var(--hb-line);
	border-left: 3px solid var(--hb-yellow);
	border-radius: 0 var(--hb-radius) var(--hb-radius) 0;
}
.b3d-home .quote blockquote{
	margin: 0;
	font: italic 500 15px/1.6 var(--hb-font-body);
	color: var(--hb-text);
}
.b3d-home .quote blockquote::before{
	content: "\201C";
	color: var(--hb-yellow);
	font: 700 26px var(--hb-font-display);
	vertical-align: -6px;
	padding-right: 4px;
}
.b3d-home .quote cite{
	display: block;
	margin-top: 8px;
	font: 700 11px var(--hb-font-display); letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--hb-muted);
	font-style: normal;
}

/* ---------------------------------------------- small screens */
@media (max-width: 920px){
	.b3d-home .hero{ grid-template-columns: 1fr; }
	.b3d-home .grid{ grid-template-columns: 1fr 1fr; }
	.b3d-home .duo{ grid-template-columns: 1fr; }
	.b3d-home .stats{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
	.b3d-home .grid{ grid-template-columns: 1fr; }
	.b3d-home .mode-switch a.seg{ font-size: 12.5px; letter-spacing: 0.08em; padding: 9px 16px; }
	.b3d-home .mig{ grid-template-columns: 1fr; }
	.b3d-home .mig .arrow{ display: none; }
	.b3d-home table.compare{ display: block; overflow-x: auto; }
	.b3d-home section.band{ padding: 16px; }
	.b3d-home .hero h1{ font-size: 32px; }
}