/*
 * Standalone visual identity for the "home" layout (home.bxm) - the
 * site's own homepage only. Same structural system as the bxSites
 * homepage (same theme approach, same data-theme toggle convention -
 * light by default, dark opt-in via [data-theme="dark"]), recolored to
 * cbGenesis's own blue/green/purple brand instead of bxSites' teal.
 *
 * Every selector is scoped under .bxsites-home so nothing here can leak
 * onto, or be leaked onto by, a normal docs page's own style.css rules -
 * generic names like .btn/.card/.grid/.nav would otherwise collide with
 * Bootstrap's own classes of the same name, which is also why those
 * specific ones are prefixed bxh- here instead of bare.
 */
.bxsites-home {
	--bg: #f6f8fb; --surface: #ffffff; --surface-2: #eef2fb; --raised: #eef4fc;
	--border: rgba(15,23,42,.10); --border-strong: rgba(15,23,42,.17);
	--text: #0e1524; --muted: #4b5772; --muted-2: #7c879c;
	--brand1: #2f7cf6; --brand2: #16b981; --violet: #8b5cf6; --yellow: #caa300;
	--grad: linear-gradient(90deg,var(--brand1),var(--brand2));
	--grad-diag: linear-gradient(135deg,var(--brand1),var(--brand2) 60%,var(--violet));
	--mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
	--display: "Sora", ui-sans-serif, system-ui, sans-serif;
	--body-font: "Manrope", ui-sans-serif, system-ui, sans-serif;
	--nav-bg: rgba(246,248,251,.82);
	--shadow-color: rgba(15,23,42,.16);
	--shadow-color-soft: rgba(15,23,42,.12);
	--glow: rgba(47,124,246,.08);
	background: var(--bg);
	color: var(--text);
	font-family: var(--body-font);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
[data-theme="dark"].bxsites-home,
[data-theme="dark"] .bxsites-home {
	--bg: #070b14; --surface: #0d1420; --surface-2: #111a2b; --raised: #121c30;
	--border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.15);
	--text: #eef2f8; --muted: #97a3ba; --muted-2: #66718a;
	--brand1: #4f95ff; --brand2: #22d3a5; --violet: #a78bfa; --yellow: #fff500;
	--nav-bg: rgba(7,11,20,.78);
	--shadow-color: rgba(0,0,0,.55);
	--shadow-color-soft: rgba(0,0,0,.4);
	--glow: rgba(79,149,255,.12);
}
.bxsites-home {
	background:
		radial-gradient(900px 500px at 82% -6%, rgba(47,124,246,.08), transparent 60%),
		radial-gradient(700px 480px at 8% 8%, rgba(22,185,129,.07), transparent 55%),
		var(--bg);
	transition: background-color .2s ease, color .2s ease;
}
[data-theme="dark"] .bxsites-home {
	background:
		radial-gradient(900px 500px at 82% -6%, rgba(79,149,255,.16), transparent 60%),
		radial-gradient(700px 480px at 8% 8%, rgba(34,211,165,.12), transparent 55%),
		radial-gradient(600px 420px at 60% 92%, rgba(167,139,250,.10), transparent 60%),
		var(--bg);
}
.bxsites-home a { color: inherit; text-decoration: none; }
.bxsites-home h1, .bxsites-home h2, .bxsites-home h3 { font-family: var(--display); margin: 0; letter-spacing: -.01em; }
.bxsites-home code { font-family: var(--mono); background: none; padding: 0; color: inherit; }
.bxh-wrap { max-width: 1180px; margin-inline: auto; padding-inline: 24px; }
.bxsites-home .eyebrow {
	font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
	color: var(--brand1); display: inline-flex; align-items: center; gap: .5em;
	margin-bottom: 10px;
}
.bxsites-home .eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 10px var(--brand2); }
.bxsites-home .eyebrow-icon { display: inline-flex; color: var(--brand2); }
.bxsites-home .eyebrow-icon svg { width: 17px; height: 17px; }

/* ---------- nav ---------- */
.bxh-nav { position: sticky; top: 0; z-index: 40; background: var(--nav-bg); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--border); transition: background-color .2s ease, border-color .2s ease; }
.bxh-navrow { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; }
.bxh-brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; }
.bxh-brand img { width: 30px; height: 30px; flex: none; }
.bxh-navlinks { display: flex; align-items: center; gap: 28px; font-size: .92rem; color: var(--muted); }
.bxh-navlinks a:hover { color: var(--text); }
.bxh-navcta { display: flex; align-items: center; gap: 12px; }
.bxh-nav-utils { display: flex; align-items: center; gap: 10px; }
.bxh-theme-toggle {
	display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
	border-radius: 8px; border: 1px solid var(--border-strong); background: transparent; color: var(--muted); cursor: pointer;
}
.bxh-theme-toggle:hover { color: var(--text); border-color: var(--brand2); }
.bxh-theme-toggle svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .bxh-navlinks { display: none; } }

.bxh-btn {
	display: inline-flex; align-items: center; gap: .5em;
	padding: .65rem 1.15rem; border-radius: 10px; font-weight: 600; font-size: .92rem;
	border: 1px solid transparent; white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bxh-btn:hover { transform: translateY(-1px); }
.bxh-btn svg { width: 14px; height: 14px; flex: none; }
.bxh-btn-primary { background: var(--grad); color: #04121a; box-shadow: 0 6px 24px rgba(47,124,246,.22); }
.bxh-btn-ghost { border-color: var(--border-strong); color: var(--text); }
.bxh-btn-ghost:hover { border-color: var(--brand2); }
.bxh-btn-sm { padding: .4rem .7rem; font-size: .8rem; border-radius: 8px; }

/* ---------- hero ---------- */
.bxh-hero { padding-block: 76px 40px; position: relative; }
.hero-mark { width: 60px; height: 60px; margin-bottom: 16px; }
.hero-mark svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 22px var(--shadow-color-soft)); }
.bxh-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 920px) { .bxh-hero-grid { grid-template-columns: 1fr; } }
.bxsites-home .bxh-hero h1 { font-size: clamp(2.4rem,4.6vw,3.75rem); font-weight: 800; line-height: 1.05; margin-top: 18px; }
.bxsites-home .grad { background: var(--grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bxsites-home .lead { font-size: 1.12rem; color: var(--muted); max-width: 46ch; margin-top: 20px; line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.install-chip {
	margin-top: 28px; display: inline-flex; align-items: center; gap: 12px;
	font-family: var(--mono); font-size: .88rem; color: var(--brand1);
	background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: .7rem 1rem;
}
.install-chip .sep { color: var(--muted-2); }
.req-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 20px; font-family: var(--mono); font-size: .74rem; color: var(--muted-2); }
.req-row span { display: inline-flex; align-items: center; gap: 6px; }
.req-row svg { width: 13px; height: 13px; color: var(--brand2); flex: none; }

.preview { position: relative; }
.preview-card {
	background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
	box-shadow: 0 30px 70px var(--shadow-color), 0 0 0 1px var(--glow);
	overflow: hidden; transform: rotate(.4deg);
}
.preview-bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.preview-bar .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); }
.preview-bar .url { margin-left: 8px; font-family: var(--mono); font-size: .74rem; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; flex: 1; }

/* admin panel hero mockup - a real (recreated) screen from the app,
   not a generic docs-preview mockup, since cbGenesis ships a web app,
   not a CLI/docs tool */
.admin-shell { display: grid; grid-template-columns: 132px 1fr; min-height: 270px; font-size: .78rem; }
.admin-side { border-right: 1px solid var(--border); padding: 14px 12px; background: var(--surface-2); }
.admin-side .grp { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin: 14px 0 6px; }
.admin-side .item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 7px; color: var(--muted); margin-bottom: 2px; }
.admin-side .item.active { background: var(--glow); color: var(--brand1); font-weight: 600; }
.admin-side .item svg { width: 13px; height: 13px; flex: none; }
.admin-main { padding: 18px 20px; }
.admin-main h4 { font-family: var(--display); font-size: .94rem; margin: 0 0 2px; }
.admin-main .sub { color: var(--muted-2); font-size: .74rem; margin-bottom: 14px; }
.perm-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.perm-table th { text-align: left; font-family: var(--mono); font-weight: 500; color: var(--muted-2); padding: 5px 8px; border-bottom: 1px solid var(--border); }
.perm-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--muted); }
.perm-table td.yes { color: var(--brand2); text-align: center; font-weight: 700; }
.perm-table td.no { color: var(--muted-2); text-align: center; opacity: .5; }

.float-badge {
	position: absolute; z-index: 5; display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .72rem;
	background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 12px;
	box-shadow: 0 12px 30px var(--shadow-color-soft); color: var(--violet);
}
.float-badge svg { width: 14px; height: 14px; flex: none; }
.badge-1 { top: -10px; right: 26px; }
.badge-2 { bottom: -16px; left: -22px; color: var(--brand2); }
@media (prefers-reduced-motion: no-preference) {
	.badge-1 { animation: bxh-float-1 4.5s ease-in-out infinite; }
	.badge-2 { animation: bxh-float-2 4.5s ease-in-out infinite; animation-delay: -2.25s; }
}
@keyframes bxh-float-1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes bxh-float-2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (max-width: 920px) { .float-badge { display: none; } }

/* ---------- section shell ---------- */
.bxsites-home section { padding-block: 72px; }
@media (max-width: 640px) { .bxsites-home section { padding-block: 48px; } }
.section-head { max-width: 640px; margin-bottom: 44px; }
.bxsites-home .section-head h2 { font-size: clamp(1.7rem,2.6vw,2.3rem); margin-top: 12px; }
.bxsites-home .battery-mark { display: inline-flex; color: var(--brand2); vertical-align: -0.1em; }
.bxsites-home .battery-mark svg { width: .88em; height: .88em; }
.section-head p { color: var(--muted); margin-top: 12px; line-height: 1.6; font-size: 1rem; }

/* ---------- video section ---------- */
.video-frame {
	max-width: 900px; margin-inline: auto;
	background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
	box-shadow: 0 30px 70px var(--shadow-color), 0 0 0 1px var(--glow);
	overflow: hidden;
}
@media (prefers-reduced-motion: no-preference) { .video-frame { animation: bxh-breathe 5s ease-in-out infinite; } }
.video-aspect { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-aspect iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- request-lifecycle flow diagram ---------- */
.bxh-orbit-wrap { max-width: 780px; margin-inline: auto; }
.flow-row { display: flex; align-items: flex-start; justify-content: center; margin-top: 52px; flex-wrap: wrap; row-gap: 28px; }
.flow-stage { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: none; width: 76px; }
.flow-icon {
	width: 52px; height: 52px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border-strong);
	display: flex; align-items: center; justify-content: center; color: var(--brand1);
	box-shadow: 0 10px 24px var(--shadow-color-soft);
}
.flow-icon svg { width: 21px; height: 21px; }
.flow-stage span { font-family: var(--mono); font-size: .7rem; color: var(--muted); text-align: center; white-space: nowrap; }
.flow-connector { width: 44px; height: 52px; display: flex; align-items: center; flex: none; position: relative; }
.flow-connector .line { width: 100%; height: 2px; background: var(--border-strong); position: relative; }
.flow-pulse {
	position: absolute; top: 50%; left: -5px; margin-top: -5px; width: 10px; height: 10px; border-radius: 50%;
	background: var(--brand1); box-shadow: 0 0 10px var(--brand2); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) { .flow-pulse { animation: bxh-flow-move 2.8s ease-in-out infinite; } }
@keyframes bxh-flow-move { 0% { left: -5px; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
.orbit-caption { text-align: center; color: var(--muted); font-size: .92rem; margin-top: 40px; line-height: 1.6; }
@media (max-width: 780px) { .flow-icon { width: 44px; height: 44px; } .flow-icon svg { width: 18px; height: 18px; } .flow-connector { width: 24px; } }

/* ---------- terminal panel ---------- */
.term-panel { max-width: 480px; margin: 32px auto 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 20px 40px var(--shadow-color-soft); }
.term-body { padding: 18px 20px; font-family: var(--mono); font-size: .82rem; line-height: 2.1; min-height: 130px; }
.term-line { color: var(--muted); opacity: 1; }
.term-line .ok { color: var(--brand1); }
.term-line .term-cmd { color: var(--brand2); }
@media (prefers-reduced-motion: no-preference) { .term-line { opacity: 0; animation: bxh-term-fade 5.6s ease-in-out infinite; } }
@keyframes bxh-term-fade { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 96% { opacity: 0; } 100% { opacity: 0; } }
.term-cursor { display: inline-block; width: 7px; height: 13px; background: var(--brand1); vertical-align: -2px; margin-left: 2px; }
@media (prefers-reduced-motion: no-preference) { .term-cursor { animation: bxh-term-blink 1s steps(1) infinite; } }
@keyframes bxh-term-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------- feature grid ---------- */
.bxh-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
@media (max-width: 920px) { .bxh-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .bxh-grid { grid-template-columns: 1fr; } }
.bxh-card { background: var(--bg); padding: 26px 22px; transition: background .2s; }
.bxh-card:hover { background: var(--surface); }
.bxh-card .icon {
	width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--brand1); margin-bottom: 16px;
}
.bxh-card .icon svg { width: 19px; height: 19px; }
.bxsites-home .bxh-card h3 { font-size: .98rem; font-weight: 700; }
.bxsites-home .bxh-card h3 a { color: inherit; }
.bxsites-home .bxh-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--border-strong); }
.bxh-card p { color: var(--muted); font-size: .86rem; line-height: 1.55; margin-top: 8px; }
.bxh-card-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 20px; }
.bxh-card-wide .icon { margin-bottom: 0; flex: none; }
@media (max-width: 560px) { .bxh-card-wide { flex-direction: column; align-items: flex-start; } }

.stack-strip { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 22px; }
.stack-strip .label { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted-2); }
.stack-strip svg { width: 21px; height: 21px; color: var(--muted); }
.stack-strip__item { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); cursor: help; }
.stack-strip__item:focus-visible { outline: 2px solid var(--brand1); outline-offset: 5px; border-radius: 2px; }

/* ---------- security spotlight ---------- */
.sec-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items: center; margin-top: 8px; }
@media (max-width: 920px) { .sec-grid { grid-template-columns: 1fr; } }
.sec-list { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.sec-item { display: flex; gap: 14px; }
.sec-item .icon { width: 34px; height: 34px; border-radius: 9px; background: var(--surface-2); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--violet); flex: none; }
.sec-item .icon svg { width: 16px; height: 16px; }
.bxsites-home .sec-item h4 { font-family: var(--display); font-size: .92rem; margin: 0 0 4px; }
.sec-item p { color: var(--muted); font-size: .86rem; line-height: 1.55; margin: 0; }
.matrix-card { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface); padding: 22px; box-shadow: 0 24px 60px var(--shadow-color-soft); }
.matrix-card .cap { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 14px; }

/* ---------- ai-native section ---------- */
.ai-native-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
@media (max-width: 920px) { .ai-native-grid { grid-template-columns: 1fr; } }
.stat-stack { display: flex; justify-content: center; }
.stat-card { border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); padding: 26px; box-shadow: 0 24px 60px var(--shadow-color-soft); width: 100%; max-width: 440px; }
.stat-eyebrow { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; text-align: center; }
.stat-row { display: flex; align-items: center; justify-content: center; gap: 18px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.stat-number { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--text); display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.stat-number small { font-family: var(--mono); font-weight: 500; font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); margin-top: 3px; }
.stat-number--win { color: var(--brand2); }
.stat-label { font-size: .78rem; color: var(--muted); text-align: center; }
.stat-vs { font-family: var(--mono); font-size: .72rem; color: var(--muted-2); flex: none; }
.stat-foot { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); font-size: .82rem; color: var(--muted); }
.stat-foot b { color: var(--brand2); font-family: var(--display); }
.stat-caption { margin: 16px 0 0; font-size: .78rem; color: var(--muted-2); text-align: center; line-height: 1.55; }
.stat-caption a { white-space: nowrap; }

/* ---------- compare table ---------- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .88rem; }
.compare th, .compare td { padding: 14px 18px; text-align: center; border-bottom: 1px solid var(--border); }
.bxsites-home .compare th { font-family: var(--display); font-weight: 700; font-size: .86rem; background: var(--surface); }
.compare td:first-child, .compare th:first-child { text-align: left; color: var(--text); font-weight: 600; }
.compare tr:last-child td { border-bottom: none; }
.compare .us { color: var(--brand1); background: var(--glow); }
.compare .yes { font-weight: 700; }
.compare .no { color: var(--muted-2); }

/* ---------- platform stack diagram ---------- */
.stack-diagram {
	position: relative;
	display: grid; grid-template-columns: 1fr 240px; gap: 28px; align-items: start;
	max-width: 980px; margin: 52px auto 0;
}
@media (max-width: 860px) { .stack-diagram { grid-template-columns: 1fr; } }

.stack-aura {
	position: absolute; inset: -60px -10% -60px 10%; z-index: 0; pointer-events: none;
	background: conic-gradient(from 0deg, rgba(47,124,246,.16), rgba(139,92,246,.12), rgba(22,185,129,.14), rgba(47,124,246,.16));
	filter: blur(44px); opacity: .5; border-radius: 50%;
}
[data-theme="dark"] .stack-aura { opacity: .8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stack-aura { opacity: .8; } }
/* A continuously-rotating large blur is one of the most GPU-expensive things
   CSS can do - cheap on desktop, but a common cause of scroll jank on phones.
   Keep the movement on desktop, drop it to a static glow below 860px (the
   same breakpoint the stack itself switches to a single column at). */
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
	.stack-aura { animation: bxh-aura-spin 22s linear infinite; will-change: transform; }
}
@keyframes bxh-aura-spin { to { transform: rotate(360deg); } }

.stack-main { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: stretch; }

.connector { display: flex; justify-content: center; height: 46px; position: relative; }
.connector .line { width: 2px; height: 100%; background: var(--border-strong); position: relative; }
.connector .pulse {
	position: absolute; left: 50%; bottom: -4px; margin-left: -4px; width: 8px; height: 8px; border-radius: 50%;
	background: var(--brand1); box-shadow: 0 0 12px var(--brand2); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) { .connector .pulse { animation: bxh-rise 2.6s ease-in-out infinite; } }
.connector.d2 .pulse { animation-delay: .9s !important; }
@keyframes bxh-rise { 0% { bottom: -4px; opacity: 0; } 12% { opacity: 1; } 85% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }

.layer {
	background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px;
	padding: 22px 24px; box-shadow: 0 20px 50px var(--shadow-color-soft);
	position: relative;
}
.layer-tag {
	font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
	display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap;
}
.layer-tag .tag-main { display: flex; align-items: center; gap: 8px; }
.layer-tag .tag-icon { width: 18px; height: 18px; flex: none; }
.layer-tag .tag-icon svg { width: 100%; height: 100%; }
.layer-tag .tag-name { color: var(--text); font-size: .78rem; letter-spacing: .02em; }
.layer-tag .role { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: .78rem; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
	font-family: var(--mono); font-size: .74rem; color: var(--text);
	background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 999px;
	padding: .32rem .7rem; display: inline-flex; align-items: center; gap: 6px;
}
.pill::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brand2); flex: none; }
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
	.pill { animation: bxh-bob 4.5s ease-in-out infinite; }
	.pill:nth-child(2n) { animation-delay: -1.1s; }
	.pill:nth-child(3n) { animation-delay: -2.3s; }
	.pill:nth-child(5n) { animation-delay: -3.4s; }
}
@keyframes bxh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.layer-modules { border-color: color-mix(in srgb, var(--brand1) 35%, var(--border-strong)); }
.layer-language { border-color: color-mix(in srgb, var(--brand2) 35%, var(--border-strong)); }

.layer-platform {
	border-color: color-mix(in srgb, var(--brand1) 45%, var(--border-strong));
	box-shadow: 0 20px 60px var(--shadow-color), 0 0 0 1px var(--glow);
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) { .layer-platform { animation: bxh-breathe 5s ease-in-out infinite; } }
@keyframes bxh-breathe {
	0%, 100% { box-shadow: 0 20px 60px var(--shadow-color), 0 0 0 1px var(--glow); }
	50% { box-shadow: 0 24px 70px var(--shadow-color), 0 0 0 3px var(--glow); }
}

.platform-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.platform-logo { width: 44px; height: 44px; flex: none; }
.platform-logo svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 14px var(--shadow-color-soft)); }
.platform-name { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.platform-sub { color: var(--muted); font-size: .85rem; margin-top: 2px; }

.engine-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 560px) { .engine-row { grid-template-columns: 1fr; } }
.engine-card {
	background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 14px;
	padding: 14px; text-align: center; transition: transform .15s ease, border-color .15s ease;
}
.engine-card:hover { transform: translateY(-3px); border-color: var(--brand1); }
.engine-icon { width: 34px; height: 34px; margin: 0 auto 10px; position: relative; }
.engine-icon svg { width: 100%; height: 100%; }
.engine-icon::after {
	content: ""; position: absolute; inset: -8px; border-radius: 50%;
	background: radial-gradient(circle, var(--glow), transparent 70%); opacity: 0; z-index: -1;
}
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
	.engine-1 .engine-icon::after { animation: bxh-pulseglow 3.6s ease-in-out infinite; }
	.engine-2 .engine-icon::after { animation: bxh-pulseglow 3.6s ease-in-out infinite; animation-delay: 1.2s; }
	.engine-3 .engine-icon::after { animation: bxh-pulseglow 3.6s ease-in-out infinite; animation-delay: 2.4s; }
}
@keyframes bxh-pulseglow { 0%, 100% { opacity: 0; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
.bxsites-home .engine-card b { display: block; font-family: var(--display); font-size: .9rem; font-weight: 700; }
.engine-card small { display: block; color: var(--muted); font-size: .72rem; margin-top: 3px; }

.stack-tooling { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
@media (max-width: 860px) { .stack-tooling { flex-direction: row; flex-wrap: wrap; } }
.tooling-label {
	font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2);
	display: flex; align-items: center; gap: 6px;
}
.tool-card {
	display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px;
	background: var(--surface); border: 1px dashed var(--border-strong);
	transition: transform .15s ease, border-color .15s ease;
	flex: 1 1 200px;
}
.tool-card:hover { transform: translateY(-3px); border-color: var(--brand2); border-style: solid; }
.tool-card .icon { width: 30px; height: 30px; flex: none; }
.tool-card .icon svg { width: 100%; height: 100%; }
.bxsites-home .tool-card b { display: block; font-family: var(--display); font-size: .88rem; }
.tool-card span { display: block; color: var(--muted); font-size: .74rem; margin-top: 2px; }
@media (prefers-reduced-motion: no-preference) and (min-width: 861px) {
	.tool-card { animation: bxh-bob 5s ease-in-out infinite; }
	.tool-card:nth-child(3) { animation-delay: -2.5s; }
}

.foot-caption { text-align: center; color: var(--muted); font-size: .82rem; margin-top: 34px; max-width: 560px; margin-inline: auto; line-height: 1.6; }

/* ---------- cta ---------- */
.cta { position: relative; border-radius: 22px; overflow: hidden; padding: 60px 44px; text-align: center; background: var(--surface); border: 1px solid var(--border-strong); }
.cta::before {
	content: ""; position: absolute; inset: -40%;
	background: conic-gradient(from 180deg, rgba(47,124,246,.18), rgba(22,185,129,.16), rgba(139,92,246,.14), rgba(47,124,246,.18));
	filter: blur(60px); opacity: .28;
}
[data-theme="dark"] .cta::before { opacity: .55; }
.cta > * { position: relative; }
.bxsites-home .cta h2 { font-size: clamp(1.7rem,3vw,2.35rem); }
.cta p { color: var(--muted); max-width: 44ch; margin: 14px auto 0; line-height: 1.6; }
.cta .hero-actions { justify-content: center; margin-top: 30px; }
.sponsor-cta { padding: 42px 32px; }
.sponsor-logo { display: block; width: min(100%, 160px); margin: 16px auto 4px; }
.sponsor-logo img { display: block; width: 100%; height: auto; }

/* ---------- footer ---------- */
.bxh-footer { border-top: 1px solid var(--border); color: var(--muted-2); font-size: .84rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(4,1fr); gap: 32px; padding-block: 56px 36px; }
@media (max-width: 880px) { .footer-top { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand p { color: var(--muted); font-size: .86rem; margin-top: 12px; max-width: 28ch; line-height: 1.6; }
.footer-brand .madeby { margin-top: 18px; color: var(--muted-2); font-size: .76rem; font-family: var(--mono); }
.footer-col h4 { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 14px; }
.footer-col a { display: block; color: var(--muted); font-size: .88rem; margin-bottom: 11px; transition: color .15s; }
.footer-col a:hover { color: var(--text); }
.social-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.social-row a {
	width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-strong);
	display: flex; align-items: center; justify-content: center; color: var(--muted);
}
.social-row a:hover { color: var(--text); border-color: var(--brand2); }
.social-row svg { width: 15px; height: 15px; }
.footer-bottom { border-top: 1px solid var(--border); padding-block: 22px; }
.footrow { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; align-items: center; }
.footlinks { display: flex; gap: 22px; align-items: center; }
.poweredby {
	display: inline-flex; align-items: center; gap: 8px; color: var(--muted);
	font-family: var(--mono); font-size: .78rem; padding-left: 20px; border-left: 1px solid var(--border);
}
.bxsites-home .poweredby b { color: var(--text); font-weight: 600; letter-spacing: .01em; }
.poweredby:hover b { background: var(--grad-diag); -webkit-background-clip: text; background-clip: text; color: transparent; }