/**
 * SignalMind — Home hero
 *
 * Loaded on the front page only. Two halves: the message on the left, and a
 * representation of the product console on the right built entirely from HTML
 * and CSS — no images, no canvas, no charting library.
 *
 * The console scales from a single property. `.sm-app` sets a font-size and
 * everything inside it is expressed in `em`, so one declaration per breakpoint
 * resizes the whole mock in proportion instead of thirty.
 *
 * @package SignalMind
 */

/* ==========================================================================
   Section frame
   ========================================================================== */

.sm-hero--home {
	/* Tighter than the generic .sm-hero: this one has to fit a viewport. */
	padding-block: calc(var(--sm-header-height) + var(--sm-space-6)) var(--sm-space-12);
	min-height: 100vh;
	min-height: 100svh;
}

/*
 * The announcement bar sits above the hero and has already eaten the top of
 * the viewport, so a flat 100svh here would push the console past the fold by
 * exactly the bar's height. Subtract it — and only while the bar is actually
 * showing, since ui.js can remove it for a returning visitor.
 */
.sm-site:has(> .sm-announce:not([hidden])) .sm-hero--home {
	min-height: calc(100svh - var(--sm-announce-height));
}

.sm-hero__layout {
	display: grid;
	gap: var(--sm-space-12);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	width: 100%;
}

@media (min-width: 1024px) {
	.sm-hero__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
		gap: var(--sm-space-10);
	}
}

@media (min-width: 1280px) {
	.sm-hero__layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: var(--sm-space-16);
	}
}

/* ==========================================================================
   Backdrop
   Four decorative layers, none of which paint over the content.
   ========================================================================== */

.sm-hero__bg {
	position: absolute;
	inset: 0;
	z-index: var(--sm-z-behind);
	overflow: hidden;
	pointer-events: none;
}

/* Drifting colour fields. Radial gradients rather than blurred boxes: no
   filter means no per-frame rasterisation of a large surface. */
.sm-hero__orb {
	position: absolute;
	border-radius: var(--sm-radius-circle);
	opacity: 0.5;
}

.sm-hero__orb--a {
	top: -22%;
	left: -12%;
	width: 62vw;
	height: 62vw;
	max-width: 900px;
	max-height: 900px;
	background: radial-gradient(circle at center, rgba(0, 229, 168, 0.22) 0%, rgba(0, 229, 168, 0) 62%);
	animation: sm-orb-a 26s var(--sm-ease-in-out) infinite;
}

.sm-hero__orb--b {
	top: -18%;
	right: -16%;
	width: 58vw;
	height: 58vw;
	max-width: 860px;
	max-height: 860px;
	background: radial-gradient(circle at center, rgba(0, 194, 255, 0.2) 0%, rgba(0, 194, 255, 0) 64%);
	animation: sm-orb-b 32s var(--sm-ease-in-out) infinite;
}

.sm-hero__orb--c {
	bottom: -34%;
	left: 32%;
	width: 52vw;
	height: 52vw;
	max-width: 760px;
	max-height: 760px;
	background: radial-gradient(circle at center, rgba(0, 122, 200, 0.16) 0%, rgba(0, 122, 200, 0) 66%);
	animation: sm-orb-c 38s var(--sm-ease-in-out) infinite;
}

/* Hairline grid, masked so it never reaches the section edges. */
.sm-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 72px 72px;
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 78%);
}

/*
 * Grain. Built from two crossed micro-gradients rather than a noise texture:
 * an image would break the no-images rule and a data-URI SVG filter costs a
 * full-surface filter pass. At this opacity the pattern reads as film grain.
 */
.sm-hero__grain {
	position: absolute;
	inset: 0;
	opacity: 0.5;
	mix-blend-mode: overlay;
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 4px);
}

/* Hands the section off to the page background below it. */
.sm-hero__fade {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 24vh;
	background-image: linear-gradient(180deg, transparent, var(--sm-color-bg));
}

/* ==========================================================================
   Message
   ========================================================================== */

.sm-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--sm-space-6);
	max-width: 34rem;
}

.sm-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-2);
	padding: var(--sm-space-1-5) var(--sm-space-3-5);
	border: var(--sm-border-width) solid var(--sm-color-border-brand);
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-color-primary-subtle);
	font-size: var(--sm-text-xs);
	font-weight: var(--sm-weight-semibold);
	letter-spacing: var(--sm-tracking-wider);
	text-transform: uppercase;
	color: var(--sm-color-primary);
}

.sm-hero__badge-dot {
	width: 6px;
	height: 6px;
	border-radius: var(--sm-radius-circle);
	background-color: currentColor;
	box-shadow: 0 0 0 3px var(--sm-alpha-primary-16);
	animation: sm-pulse 2.6s var(--sm-ease-in-out) infinite;
}

/*
 * 36px is the project's hard ceiling for an h1, so the weight, the tracking
 * and the space around the headline carry the presence that size normally
 * would. Line height is unusually tight for the same reason.
 */
.sm-hero__title {
	font-size: var(--sm-text-h1);
	font-weight: var(--sm-weight-extrabold);
	line-height: 1.14;
	letter-spacing: -0.03em;
	color: var(--sm-color-text);
	text-wrap: balance;
}

.sm-hero__title-accent {
	display: block;
	background-image: linear-gradient(96deg, var(--sm-primary-300) 0%, var(--sm-accent-300) 58%, var(--sm-accent-200) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	/* Keeps the descenders of the gradient line from being clipped. */
	padding-bottom: 0.08em;
}

.sm-hero__lead {
	max-width: 33rem;
	font-size: var(--sm-text-md);
	line-height: var(--sm-leading-relaxed);
	color: var(--sm-color-text-muted);
}

.sm-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sm-space-3);
	margin-top: var(--sm-space-2);
}

.sm-hero__cta .sm-btn__icon {
	transition: var(--sm-transition-transform);
}

.sm-hero__cta:hover .sm-btn__icon {
	transform: translateX(3px);
}

.sm-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sm-space-2) var(--sm-space-5);
	margin: var(--sm-space-2) 0 0;
	padding: 0;
	list-style: none;
}

.sm-hero__trust li + li {
	margin-top: 0;
}

.sm-hero__trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--sm-space-1-5);
	font-size: var(--sm-text-xs);
	color: var(--sm-color-text-subtle);
}

.sm-hero__trust-item .sm-icon {
	color: var(--sm-color-primary);
}

/* ==========================================================================
   Preview frame
   ========================================================================== */

.sm-hero__preview {
	position: relative;
	width: 100%;
}

/* A soft pool of light under the console, so it sits on the page rather than
   floating in front of it. */
.sm-hero__preview::before {
	content: "";
	position: absolute;
	inset: 12% -6% -14%;
	z-index: var(--sm-z-behind);
	border-radius: var(--sm-radius-circle);
	background: radial-gradient(closest-side, rgba(0, 229, 168, 0.16), transparent 78%);
}

/* ==========================================================================
   Console
   ========================================================================== */

.sm-app {
	/* The single knob every internal size is derived from. */
	font-size: 12px;

	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: var(--sm-border-width) solid var(--sm-alpha-white-12);
	border-radius: 1.4em;
	background-color: rgba(11, 15, 21, 0.82);
	backdrop-filter: blur(var(--sm-blur-lg)) saturate(150%);
	-webkit-backdrop-filter: blur(var(--sm-blur-lg)) saturate(150%);
	box-shadow:
		0 48px 90px -32px rgba(0, 0, 0, 0.9),
		0 18px 40px -24px rgba(0, 0, 0, 0.7),
		inset 0 1px 0 var(--sm-alpha-white-8);
	color: var(--sm-color-text-secondary);
	line-height: 1.35;
	transform: perspective(1800px) rotateY(-7deg) rotateX(3deg);
	transition: transform var(--sm-duration-slower) var(--sm-ease-out);
}

/* Window chrome */

.sm-app__chrome {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 0.85em 1.1em;
	border-bottom: var(--sm-border-width) solid var(--sm-alpha-white-8);
	background-color: var(--sm-alpha-white-2);
}

.sm-app__dots {
	display: inline-flex;
	gap: 0.42em;
}

.sm-app__dots i {
	width: 0.62em;
	height: 0.62em;
	border-radius: var(--sm-radius-circle);
	background-color: var(--sm-alpha-white-16);
}

.sm-app__url {
	flex: 1 1 auto;
	padding: 0.32em 0.9em;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-4);
	font-size: 0.82em;
	color: var(--sm-color-text-subtle);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sm-app__live {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.24em 0.6em;
	border-radius: var(--sm-radius-sm);
	background-color: var(--sm-color-primary-subtle);
	font-size: 0.72em;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.1em;
	color: var(--sm-color-primary);
}

.sm-app__live i {
	width: 0.42em;
	height: 0.42em;
	border-radius: var(--sm-radius-circle);
	background-color: currentColor;
	animation: sm-pulse 2s var(--sm-ease-in-out) infinite;
}

/* Body */

.sm-app__body {
	display: flex;
	min-height: 0;
}

.sm-app__rail {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55em;
	flex: none;
	width: 3.4em;
	padding: 1em 0;
	border-right: var(--sm-border-width) solid var(--sm-alpha-white-8);
	background-color: var(--sm-alpha-white-2);
}

.sm-app__rail-mark {
	width: 1.5em;
	height: 1.5em;
	margin-bottom: 0.6em;
	border-radius: 0.45em;
	background-image: var(--sm-gradient-brand);
	box-shadow: 0 0 0 1px var(--sm-alpha-primary-24);
}

.sm-app__rail-item {
	display: grid;
	place-items: center;
	width: 2em;
	height: 2em;
	border-radius: 0.55em;
	color: var(--sm-color-text-disabled);
	transition: var(--sm-transition-colors);
}

.sm-app__rail-item.is-active {
	background-color: var(--sm-color-primary-subtle);
	color: var(--sm-color-primary);
}

.sm-app__main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.85em;
	padding: 1em;
}

.sm-app__top {
	display: flex;
	align-items: center;
	gap: 0.7em;
}

.sm-app__heading {
	font-size: 1.05em;
	font-weight: var(--sm-weight-semibold);
	letter-spacing: -0.01em;
	color: var(--sm-color-text);
}

.sm-app__chip {
	padding: 0.2em 0.6em;
	border: var(--sm-border-width) solid var(--sm-alpha-white-8);
	border-radius: var(--sm-radius-pill);
	font-size: 0.72em;
	color: var(--sm-color-text-subtle);
	white-space: nowrap;
}

.sm-app__search {
	display: grid;
	place-items: center;
	width: 1.9em;
	height: 1.9em;
	margin-left: auto;
	border-radius: 0.5em;
	background-color: var(--sm-alpha-white-4);
	color: var(--sm-color-text-subtle);
}

.sm-app__avatar {
	width: 1.9em;
	height: 1.9em;
	border-radius: var(--sm-radius-circle);
	background-image: linear-gradient(135deg, var(--sm-accent-700), var(--sm-primary-700));
	box-shadow: inset 0 0 0 1px var(--sm-alpha-white-16);
}

/* Panels */

.sm-app__panel,
.sm-app__market {
	border: var(--sm-border-width) solid var(--sm-alpha-white-8);
	border-radius: 0.85em;
	background-color: var(--sm-alpha-white-2);
	transition: border-color var(--sm-duration-base) var(--sm-ease-standard),
		background-color var(--sm-duration-base) var(--sm-ease-standard),
		transform var(--sm-duration-base) var(--sm-ease-out);
}

.sm-app__panel:hover,
.sm-app__market:hover {
	border-color: var(--sm-alpha-primary-24);
	background-color: var(--sm-alpha-white-4);
	transform: translateY(-2px);
}

.sm-app__panel {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	padding: 0.85em;
	min-width: 0;
}

.sm-app__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6em;
}

.sm-app__panel-title {
	font-size: 0.86em;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text);
}

.sm-app__count,
.sm-app__pill {
	font-size: 0.7em;
	color: var(--sm-color-text-subtle);
	white-space: nowrap;
}

.sm-app__pill {
	padding: 0.16em 0.5em;
	border-radius: var(--sm-radius-sm);
	background-color: var(--sm-color-primary-subtle);
	color: var(--sm-color-primary);
	font-weight: var(--sm-weight-semibold);
}

.sm-app__row {
	display: grid;
	gap: 0.85em;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

.sm-app__row--even {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

/* ==========================================================================
   Market overview cards
   ========================================================================== */

.sm-app__markets {
	display: grid;
	gap: 0.7em;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sm-app__market {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 0.75em;
	min-width: 0;
}

.sm-app__market-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
}

.sm-app__ticker {
	font-size: 0.78em;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.06em;
	color: var(--sm-color-text-muted);
}

.sm-app__delta {
	font-size: 0.72em;
	font-weight: var(--sm-weight-semibold);
	font-variant-numeric: tabular-nums;
}

.sm-app__delta.is-up,
.sm-app__fact-value.is-up {
	color: var(--sm-color-bull);
}

.sm-app__delta.is-down {
	color: var(--sm-color-bear);
}

.sm-app__price {
	font-size: 1.02em;
	font-weight: var(--sm-weight-semibold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	color: var(--sm-color-text);
}

/*
 * Sparklines. Each is one element clipped to an area polygon, with a second
 * clipped layer tracing the same points 7% lower to leave a crisp stroke along
 * the top edge. Seven samples per series, plotted left to right.
 */
.sm-app__spark {
	position: relative;
	display: block;
	height: 2.4em;
	margin-top: 0.15em;
}

.sm-app__spark::before,
.sm-app__spark::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sm-app__spark::before {
	background-image: linear-gradient(180deg, currentColor 0%, transparent 88%);
	opacity: 0.22;
}

.sm-app__spark::after {
	background-color: currentColor;
}

.sm-app__spark.is-up {
	color: var(--sm-color-bull);
}

.sm-app__spark.is-down {
	color: var(--sm-color-bear);
}

.sm-app__spark--a::before {
	clip-path: polygon(0% 76%, 16.6% 62%, 33.3% 68%, 50% 48%, 66.6% 40%, 83.3% 30%, 100% 18%, 100% 100%, 0% 100%);
}

.sm-app__spark--a::after {
	clip-path: polygon(
		0% 76%, 16.6% 62%, 33.3% 68%, 50% 48%, 66.6% 40%, 83.3% 30%, 100% 18%,
		100% 25%, 83.3% 37%, 66.6% 47%, 50% 55%, 33.3% 75%, 16.6% 69%, 0% 83%
	);
}

.sm-app__spark--b::before {
	clip-path: polygon(0% 70%, 16.6% 66%, 33.3% 58%, 50% 62%, 66.6% 50%, 83.3% 44%, 100% 34%, 100% 100%, 0% 100%);
}

.sm-app__spark--b::after {
	clip-path: polygon(
		0% 70%, 16.6% 66%, 33.3% 58%, 50% 62%, 66.6% 50%, 83.3% 44%, 100% 34%,
		100% 41%, 83.3% 51%, 66.6% 57%, 50% 69%, 33.3% 65%, 16.6% 73%, 0% 77%
	);
}

.sm-app__spark--c::before {
	clip-path: polygon(0% 34%, 16.6% 42%, 33.3% 38%, 50% 52%, 66.6% 60%, 83.3% 56%, 100% 70%, 100% 100%, 0% 100%);
}

.sm-app__spark--c::after {
	clip-path: polygon(
		0% 34%, 16.6% 42%, 33.3% 38%, 50% 52%, 66.6% 60%, 83.3% 56%, 100% 70%,
		100% 77%, 83.3% 63%, 66.6% 67%, 50% 59%, 33.3% 45%, 16.6% 49%, 0% 41%
	);
}

/* ==========================================================================
   Recent signals
   ========================================================================== */

.sm-app__signals {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-app__signals li + li {
	margin-top: 0;
}

.sm-app__signal {
	display: flex;
	align-items: center;
	gap: 0.65em;
	padding: 0.45em 0.55em;
	border-radius: 0.5em;
	background-color: var(--sm-alpha-white-2);
}

.sm-app__side {
	flex: none;
	padding: 0.22em 0.5em;
	border-radius: 0.35em;
	font-size: 0.66em;
	font-weight: var(--sm-weight-bold);
	letter-spacing: 0.06em;
}

.sm-app__side.is-buy {
	background-color: var(--sm-color-success-surface);
	color: var(--sm-color-bull);
}

.sm-app__side.is-sell {
	background-color: var(--sm-color-danger-surface);
	color: var(--sm-color-bear);
}

.sm-app__signal-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.sm-app__signal-symbol {
	font-size: 0.82em;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text);
}

.sm-app__signal-meta {
	font-size: 0.68em;
	color: var(--sm-color-text-subtle);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sm-app__conf {
	display: flex;
	align-items: center;
	gap: 0.5em;
	flex: none;
}

.sm-app__conf-value {
	font-size: 0.7em;
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text-muted);
	min-width: 2.4em;
	text-align: right;
}

/* Meters */

.sm-app__meter {
	display: block;
	width: 4.4em;
	height: 0.32em;
	border-radius: var(--sm-radius-pill);
	background-color: var(--sm-alpha-white-8);
	overflow: hidden;
}

.sm-app__meter-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background-image: var(--sm-gradient-brand);
}

.sm-app__meter-fill--health {
	background-image: linear-gradient(90deg, var(--sm-success-500), var(--sm-primary-400));
}

.sm-app__meter-fill.is-w92 { width: 92%; }
.sm-app__meter-fill.is-w81 { width: 81%; }
.sm-app__meter-fill.is-w74 { width: 74%; }
.sm-app__meter-fill.is-w66 { width: 66%; }

/* ==========================================================================
   AI analysis
   ========================================================================== */

.sm-app__panel--ai {
	align-items: stretch;
}

/* Risk ring: a conic sweep with the centre punched out by a masked core. */
.sm-app__ring {
	position: relative;
	display: grid;
	place-items: center;
	width: 6.2em;
	height: 6.2em;
	margin: 0.2em auto 0;
	border-radius: var(--sm-radius-circle);
	background-image: conic-gradient(
		from 180deg,
		var(--sm-primary-500) 0deg,
		var(--sm-accent-500) 190deg,
		var(--sm-alpha-white-8) 259deg,
		var(--sm-alpha-white-8) 360deg
	);
}

.sm-app__ring::before {
	content: "";
	position: absolute;
	inset: 0.62em;
	border-radius: var(--sm-radius-circle);
	background-color: #0b0f15;
	box-shadow: inset 0 0 0 1px var(--sm-alpha-white-6);
}

.sm-app__ring-core {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}

.sm-app__ring-value {
	font-size: 1.5em;
	font-weight: var(--sm-weight-bold);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	color: var(--sm-color-text);
}

.sm-app__ring-label {
	font-size: 0.66em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sm-color-text-subtle);
}

.sm-app__stat {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.sm-app__stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	font-size: 0.74em;
	color: var(--sm-color-text-subtle);
}

.sm-app__stat-value {
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text-secondary);
}

.sm-app__stat .sm-app__meter {
	width: 100%;
}

.sm-app__facts {
	display: grid;
	gap: 0.4em;
	padding-top: 0.6em;
	border-top: var(--sm-border-width) solid var(--sm-alpha-white-6);
}

.sm-app__fact {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	font-size: 0.74em;
}

.sm-app__fact-label {
	color: var(--sm-color-text-subtle);
}

.sm-app__fact-value {
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text-secondary);
}

/* ==========================================================================
   Watchlist
   ========================================================================== */

.sm-app__watch {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sm-app__watch li + li {
	margin-top: 0;
}

.sm-app__watch-row {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-size: 0.78em;
}

.sm-app__watch-symbol {
	flex: none;
	width: 3.4em;
	font-weight: var(--sm-weight-semibold);
	color: var(--sm-color-text-secondary);
}

.sm-app__watch-dist {
	flex: none;
	margin-left: auto;
	font-variant-numeric: tabular-nums;
	color: var(--sm-color-text-subtle);
}

.sm-app__watch-dist.is-near {
	color: var(--sm-color-warning);
	font-weight: var(--sm-weight-semibold);
}

.sm-app__watch-dist.is-watch {
	color: var(--sm-color-text-muted);
}

/* Mini bar charts. Heights come from a per-row pattern, so no two rows read
   as the same series. */
.sm-app__bars {
	display: flex;
	align-items: flex-end;
	gap: 0.16em;
	flex: 1 1 auto;
	height: 1.5em;
	min-width: 0;
}

.sm-app__bars i {
	flex: 1 1 0;
	border-radius: 0.1em;
	background-color: var(--sm-alpha-white-16);
}

.sm-app__bars--a i:nth-child(1) { height: 38%; }
.sm-app__bars--a i:nth-child(2) { height: 55%; }
.sm-app__bars--a i:nth-child(3) { height: 46%; }
.sm-app__bars--a i:nth-child(4) { height: 70%; }
.sm-app__bars--a i:nth-child(5) { height: 62%; }
.sm-app__bars--a i:nth-child(6) { height: 86%; }
.sm-app__bars--a i:nth-child(7) { height: 100%; background-color: var(--sm-color-primary); }

.sm-app__bars--b i:nth-child(1) { height: 52%; }
.sm-app__bars--b i:nth-child(2) { height: 40%; }
.sm-app__bars--b i:nth-child(3) { height: 64%; }
.sm-app__bars--b i:nth-child(4) { height: 50%; }
.sm-app__bars--b i:nth-child(5) { height: 78%; }
.sm-app__bars--b i:nth-child(6) { height: 68%; }
.sm-app__bars--b i:nth-child(7) { height: 92%; background-color: var(--sm-color-primary); }

.sm-app__bars--c i:nth-child(1) { height: 66%; }
.sm-app__bars--c i:nth-child(2) { height: 48%; }
.sm-app__bars--c i:nth-child(3) { height: 58%; }
.sm-app__bars--c i:nth-child(4) { height: 42%; }
.sm-app__bars--c i:nth-child(5) { height: 54%; }
.sm-app__bars--c i:nth-child(6) { height: 46%; }
.sm-app__bars--c i:nth-child(7) { height: 60%; }

.sm-app__bars--d i:nth-child(1) { height: 74%; }
.sm-app__bars--d i:nth-child(2) { height: 60%; }
.sm-app__bars--d i:nth-child(3) { height: 68%; }
.sm-app__bars--d i:nth-child(4) { height: 44%; }
.sm-app__bars--d i:nth-child(5) { height: 52%; }
.sm-app__bars--d i:nth-child(6) { height: 36%; }
.sm-app__bars--d i:nth-child(7) { height: 42%; }

/* ==========================================================================
   Heatmap
   ========================================================================== */

.sm-app__heat {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 0.25em;
}

.sm-app__cell {
	aspect-ratio: 1;
	border-radius: 0.22em;
	transition: transform var(--sm-duration-fast) var(--sm-ease-out);
}

.sm-app__cell:hover {
	transform: scale(1.18);
}

.sm-app__cell.is-u3,
.sm-app__legend-item i.is-u3 { background-color: rgba(0, 229, 168, 0.85); }
.sm-app__cell.is-u2 { background-color: rgba(0, 229, 168, 0.52); }
.sm-app__cell.is-u1 { background-color: rgba(0, 229, 168, 0.26); }
.sm-app__cell.is-f,
.sm-app__legend-item i.is-f { background-color: rgba(255, 255, 255, 0.07); }
.sm-app__cell.is-d1 { background-color: rgba(242, 75, 75, 0.26); }
.sm-app__cell.is-d2,
.sm-app__legend-item i.is-d2 { background-color: rgba(242, 75, 75, 0.52); }
.sm-app__cell.is-d3 { background-color: rgba(242, 75, 75, 0.85); }

.sm-app__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3em 0.8em;
	margin-top: auto;
	padding-top: 0.2em;
}

.sm-app__legend-item {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.66em;
	color: var(--sm-color-text-subtle);
}

.sm-app__legend-item i {
	width: 0.7em;
	height: 0.7em;
	border-radius: 0.15em;
}

/* ==========================================================================
   Motion
   Entrance is staggered down the left column, then the console arrives.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.sm-hero__content > * {
		animation: sm-hero-in 800ms var(--sm-ease-out) backwards;
	}

	.sm-hero__content > :nth-child(1) { animation-delay: 60ms; }
	.sm-hero__content > :nth-child(2) { animation-delay: 140ms; }
	.sm-hero__content > :nth-child(3) { animation-delay: 220ms; }
	.sm-hero__content > :nth-child(4) { animation-delay: 300ms; }
	.sm-hero__content > :nth-child(5) { animation-delay: 380ms; }

	.sm-hero__preview {
		animation: sm-hero-in 1000ms var(--sm-ease-out) 260ms backwards;
	}

	.sm-app {
		animation: sm-app-float 9s var(--sm-ease-in-out) 1.4s infinite;
	}

	.sm-app:hover {
		animation-play-state: paused;
		transform: perspective(1800px) rotateY(-3deg) rotateX(1.5deg) scale(1.012);
	}
}

@keyframes sm-hero-in {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes sm-app-float {
	0%,
	100% {
		transform: perspective(1800px) rotateY(-7deg) rotateX(3deg) translate3d(0, 0, 0);
	}

	50% {
		transform: perspective(1800px) rotateY(-7deg) rotateX(3deg) translate3d(0, -10px, 0);
	}
}

@keyframes sm-orb-a {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(4%, 6%, 0) scale(1.08); }
}

@keyframes sm-orb-b {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(-5%, 4%, 0) scale(1.06); }
}

@keyframes sm-orb-c {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(3%, -5%, 0) scale(1.1); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (min-width: 1440px) {
	.sm-app {
		font-size: 13.5px;
	}
}

@media (max-width: 1279px) {
	.sm-app {
		font-size: 11px;
	}
}

/* Laptop screens are wide but short. Scale the console down by height as well
   as width so a 100vh hero still shows the whole of it without scrolling. */
@media (min-width: 1024px) and (max-height: 940px) {
	.sm-app {
		font-size: 10.5px;
	}
}

@media (min-width: 1024px) and (max-height: 840px) {
	.sm-app {
		font-size: 9.5px;
	}
}

@media (min-width: 1024px) and (max-height: 740px) {
	.sm-app {
		font-size: 8.8px;
	}

	.sm-hero--home {
		padding-block: calc(var(--sm-header-height) + var(--sm-space-4)) var(--sm-space-8);
	}
}

/* Below the two-column breakpoint the console stacks under the message, sits
   flat rather than tilted, and stops floating — a moving panel directly under
   the call to action reads as a distraction on a small screen. */
@media (max-width: 1023px) {
	.sm-hero--home {
		min-height: 0;
		padding-block: calc(var(--sm-header-height) + var(--sm-space-10)) var(--sm-section-y-sm);
	}

	.sm-hero__content {
		max-width: 40rem;
	}

	.sm-app,
	.sm-app:hover {
		font-size: 12px;
		transform: none;
		animation: none;
	}

	.sm-hero__preview::before {
		inset: 20% 0 -8%;
	}
}

@media (max-width: 767px) {
	.sm-app {
		font-size: 10.5px;
	}

	.sm-app__row,
	.sm-app__row--even {
		grid-template-columns: minmax(0, 1fr);
	}

	.sm-hero__trust {
		gap: var(--sm-space-2) var(--sm-space-4);
	}
}

@media (max-width: 519px) {
	/* Two stacked buttons of different widths read as an accident. Matching
	   them turns the pair back into one deliberate action block. */
	.sm-hero__actions {
		align-items: stretch;
		width: 100%;
	}

	.sm-hero__actions .sm-btn {
		width: 100%;
	}
}

@media (max-width: 479px) {
	.sm-app {
		font-size: 9.5px;
	}

	/* The rail is decoration at this width and costs horizontal room the
	   panels need. */
	.sm-app__rail {
		display: none;
	}

	.sm-app__markets {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0.5em;
	}
}