/* ==========================================================================
   DigiByte Sections — page-level layout for the new homepage
   ========================================================================== */

/* Blue surface (digibyte.org-style alternating panels) ------------------ */
.surface--blue,
.s-features,
.s-digiassets,
.s-devhub,
.s-community {
	position: relative;
	background: var(--c-surface-blue);
	color: var(--c-on-blue-1);
	border-block: 1px solid rgba(0, 0, 0, 0.18);
}
.surface--blue::before,
.s-features::before,
.s-digiassets::before,
.s-devhub::before,
.s-community::before {
	content: "";
	position: absolute; inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 12%, transparent 88%, rgba(0, 0, 0, 0.18));
	z-index: 0;
}
.surface--blue > *,
.s-features > *,
.s-digiassets > *,
.s-devhub > *,
.s-community > * { position: relative; z-index: 1; }

.surface--blue h1, .surface--blue h2, .surface--blue h3,
.surface--blue h4, .surface--blue h5, .surface--blue h6,
.s-features h1, .s-features h2, .s-features h3, .s-features h4, .s-features h5, .s-features h6,
.s-digiassets h1, .s-digiassets h2, .s-digiassets h3, .s-digiassets h4, .s-digiassets h5, .s-digiassets h6,
.s-devhub h1, .s-devhub h2, .s-devhub h3, .s-devhub h4, .s-devhub h5, .s-devhub h6,
.s-community h1, .s-community h2, .s-community h3, .s-community h4, .s-community h5, .s-community h6 {
	color: var(--c-on-blue-0);
}
.surface--blue p, .surface--blue .lead,
.s-features p, .s-features .lead,
.s-digiassets p, .s-digiassets .lead,
.s-devhub p, .s-devhub .lead,
.s-community p, .s-community .lead { color: var(--c-on-blue-1); }

.surface--blue h6, .s-features h6, .s-digiassets h6, .s-devhub h6, .s-community h6 { color: var(--c-on-blue-2); }

.surface--blue .eyebrow,
.s-features .eyebrow, .s-digiassets .eyebrow, .s-devhub .eyebrow, .s-community .eyebrow {
	color: var(--c-on-blue-0);
}

.surface--blue .gradient-text, .surface--blue .gradient-text--brand,
.s-features .gradient-text, .s-features .gradient-text--brand,
.s-digiassets .gradient-text, .s-digiassets .gradient-text--brand,
.s-devhub .gradient-text, .s-devhub .gradient-text--brand,
.s-community .gradient-text, .s-community .gradient-text--brand {
	background: none;
	-webkit-background-clip: initial; background-clip: initial;
	color: var(--c-on-blue-0);
}

.surface--blue a,
.s-features a, .s-digiassets a, .s-devhub a, .s-community a { color: var(--c-on-blue-1); }
.surface--blue a:hover,
.s-features a:hover, .s-digiassets a:hover, .s-devhub a:hover, .s-community a:hover { color: var(--c-on-blue-0); }

.surface--blue .card, .surface--blue .stat,
.s-features .card, .s-features .stat,
.s-digiassets .card, .s-digiassets .stat,
.s-devhub .card, .s-devhub .stat,
.s-community .card, .s-community .stat {
	background: var(--glass-blue);
	border-color: var(--c-on-blue-border);
	color: var(--c-on-blue-1);
}
.surface--blue .card:hover,
.s-features .card:hover, .s-digiassets .card:hover, .s-devhub .card:hover, .s-community .card:hover {
	background: var(--glass-blue-strong);
	border-color: rgba(255, 255, 255, 0.32);
}
.surface--blue .card__title, .surface--blue .stat__value,
.s-features .card__title, .s-features .stat__value,
.s-digiassets .card__title, .s-digiassets .stat__value,
.s-devhub .card__title, .s-devhub .stat__value,
.s-community .card__title, .s-community .stat__value { color: var(--c-on-blue-0); }
.surface--blue .card__body,
.s-features .card__body, .s-digiassets .card__body, .s-devhub .card__body, .s-community .card__body { color: var(--c-on-blue-1); }
.surface--blue .stat__label,
.s-features .stat__label, .s-digiassets .stat__label, .s-devhub .stat__label, .s-community .stat__label { color: var(--c-on-blue-2); }
.surface--blue .card__icon,
.s-features .card__icon, .s-digiassets .card__icon, .s-devhub .card__icon, .s-community .card__icon {
	background: rgba(255, 255, 255, 0.14);
	color: #ffffff;
}

.surface--blue .chip,
.s-features .chip, .s-digiassets .chip, .s-devhub .chip, .s-community .chip {
	color: var(--c-on-blue-0);
	background: rgba(255, 255, 255, 0.10);
	border-color: var(--c-on-blue-border);
}

.surface--blue .btn--ghost,
.s-features .btn--ghost, .s-digiassets .btn--ghost, .s-devhub .btn--ghost, .s-community .btn--ghost {
	--btn-bg: rgba(255, 255, 255, 0.12);
	--btn-bd: rgba(255, 255, 255, 0.28);
	--btn-fg: #ffffff;
}
.surface--blue .btn--ghost:hover,
.s-features .btn--ghost:hover, .s-digiassets .btn--ghost:hover, .s-devhub .btn--ghost:hover, .s-community .btn--ghost:hover {
	--btn-bd: #ffffff;
	--btn-glow: rgba(255, 255, 255, 0.25);
}
.surface--blue .btn--outline,
.s-features .btn--outline, .s-digiassets .btn--outline, .s-devhub .btn--outline, .s-community .btn--outline {
	--btn-bg: transparent;
	--btn-bd: #ffffff;
	--btn-fg: #ffffff;
}
.surface--blue .btn--outline:hover,
.s-features .btn--outline:hover, .s-digiassets .btn--outline:hover, .s-devhub .btn--outline:hover, .s-community .btn--outline:hover {
	--btn-bg: rgba(255, 255, 255, 0.12);
	--btn-glow: rgba(255, 255, 255, 0.30);
	color: #ffffff;
}

.surface--blue ::selection,
.s-features ::selection, .s-digiassets ::selection, .s-devhub ::selection, .s-community ::selection {
	background: rgba(255, 255, 255, 0.30);
	color: #ffffff;
}

/* Feature-row visuals on blue surfaces — opaque tile, white icon/stat */
.surface--blue .feature-row__visual,
.s-features .feature-row__visual,
.s-digiassets .feature-row__visual,
.s-devhub .feature-row__visual,
.s-community .feature-row__visual {
	background:
		radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.22), transparent 65%),
		linear-gradient(160deg, #0a4fbf 0%, #002352 100%);
	border-color: rgba(255, 255, 255, 0.28);
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.surface--blue .feature-row__visual::before,
.s-features .feature-row__visual::before,
.s-digiassets .feature-row__visual::before,
.s-devhub .feature-row__visual::before,
.s-community .feature-row__visual::before {
	border-color: rgba(255, 255, 255, 0.22);
}
.surface--blue .feature-row__icon,
.s-features .feature-row__icon,
.s-digiassets .feature-row__icon,
.s-devhub .feature-row__icon,
.s-community .feature-row__icon {
	color: #ffffff;
	filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.55));
}
.surface--blue .feature-row__stat,
.s-features .feature-row__stat,
.s-digiassets .feature-row__stat,
.s-devhub .feature-row__stat,
.s-community .feature-row__stat {
	background: linear-gradient(180deg, #ffffff 0%, #d8e8f8 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
}
.surface--blue .feature-row__stat-unit,
.s-features .feature-row__stat-unit,
.s-digiassets .feature-row__stat-unit,
.s-devhub .feature-row__stat-unit,
.s-community .feature-row__stat-unit {
	color: rgba(255, 255, 255, 0.75);
}

/* Top ticker ------------------------------------------------------------ */
.top-ticker {
	position: relative;
	z-index: var(--z-sticky);
	height: var(--ticker-h);
	display: flex; align-items: center;
	overflow: hidden;
	background: rgba(5, 7, 13, 0.8);
	border-bottom: 1px solid var(--c-border);
	font-family: var(--ff-mono);
	font-size: var(--fs-0);
	letter-spacing: var(--ls-wide);
	color: var(--c-ink-2);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
}
.top-ticker__track {
	display: inline-flex; gap: 3rem;
	width: max-content;
	animation: marquee 60s linear infinite;
	padding-inline-start: 100%;
}
.top-ticker__item { display: inline-flex; gap: var(--s-2); align-items: center; white-space: nowrap; }
.top-ticker__item strong { color: var(--c-ink-0); font-weight: 600; }
.top-ticker__item .up { color: var(--c-success); }
.top-ticker__item .down { color: var(--c-danger); }

/* Nav bar --------------------------------------------------------------- */
.nav {
	position: sticky;
	top: 0;
	z-index: var(--z-nav);
	min-height: var(--nav-h);
	display: flex; align-items: center;
	background: var(--c-brand-navy);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	transition: background var(--d-3) var(--ease-out), border-color var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.nav.is-scrolled {
	background: var(--c-brand-navy);
	border-bottom-color: rgba(255, 255, 255, 0.10);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.nav__row { position: relative; }
.nav__row { display: flex; align-items: center; gap: var(--s-5); width: 100%; }
.nav__brand { display: inline-flex; align-items: center; gap: var(--s-3); }
.nav__brand img { display: block; }
.nav__symbol { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 0 14px rgba(31, 123, 232, 0.55)); transition: transform var(--d-3) var(--ease-out), filter var(--d-3) var(--ease-out); }
.nav__brand:hover .nav__symbol { transform: rotate(-12deg) scale(1.05); filter: drop-shadow(0 0 22px rgba(47, 138, 255, 0.85)); }
.nav__brand-text {
	font-family: var(--ff-display);
	font-weight: 700;
	letter-spacing: var(--ls-snug);
	color: #ffffff;
	font-size: var(--fs-4);
}
.nav__list {
	display: flex; align-items: center; gap: var(--s-1);
	margin-inline-start: var(--s-5);
	flex: 1;
}
.nav__list a {
	display: inline-flex; align-items: center;
	padding: 0.5rem 0.9rem;
	font-family: var(--ff-display);
	font-size: var(--fs-1);
	font-weight: 500;
	color: rgba(255, 255, 255, 0.78);
	border-radius: var(--r-pill);
	white-space: nowrap;
	transition: color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out);
}
.nav__list a:hover, .nav__list a.is-active {
	color: #ffffff;
	background: rgba(255, 255, 255, 0.08);
}
.nav__cta { display: inline-flex; gap: var(--s-2); align-items: center; }

/* Scope-button overrides so ghost + lang buttons read on navy */
.nav .btn--ghost {
	--btn-bg: rgba(255, 255, 255, 0.06);
	--btn-bd: rgba(255, 255, 255, 0.22);
	--btn-fg: #ffffff;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.nav .btn--ghost:hover { --btn-bd: rgba(255, 255, 255, 0.55); --btn-glow: rgba(255, 255, 255, 0.20); }

.nav__toggle {
	display: none;
	width: 44px; height: 44px;
	align-items: center; justify-content: center;
	border-radius: var(--r-2);
	border: 1px solid var(--c-border);
	color: var(--c-ink-0);
}
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after {
	content: ""; display: block;
	width: 22px; height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform var(--d-3) var(--ease-out), opacity var(--d-3) var(--ease-out);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -7px; left: 0; }
.nav__toggle span::after { position: absolute; top: 7px; left: 0; }
.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
	.nav__row { gap: var(--s-3); }
	.nav__list, .nav__cta-extra { display: none; }
	.nav__toggle { display: inline-flex; }
	.nav__list { margin-inline-start: 0; }
	.nav__cta { margin-inline-start: auto; gap: var(--s-1); }
	.nav.is-open .nav__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		position: absolute;
		top: calc(100% + 1px);
		left: 0; right: 0;
		padding: var(--s-4);
		background: var(--c-brand-navy);
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
		box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
		gap: var(--s-1);
		max-height: calc(100vh - var(--nav-h));
		overflow-y: auto;
		z-index: calc(var(--z-nav) + 1);
	}
	.nav.is-open .nav__list li { width: 100%; }
	.nav.is-open .nav__list a {
		display: flex; width: 100%;
		padding: 0.85rem 1rem;
		font-size: var(--fs-2);
	}
}
@media (max-width: 560px) {
	.nav__cta .btn--primary { display: none; }
}

/* Hero ------------------------------------------------------------------ */
.hero {
	position: relative;
	display: flex; align-items: flex-start;
	overflow: hidden;
	isolation: isolate;
	padding-block: 0;
}
.hero__canvas {
	position: absolute; inset: 0;
	z-index: -1;
}
.hero__canvas canvas { width: 100%; height: 100%; display: block; }
.hero__overlay {
	position: absolute; inset: 0;
	background: radial-gradient(ellipse 60% 50% at 28% 50%, rgba(3, 16, 42, 0.45), transparent 70%);
	z-index: -1;
	pointer-events: none;
}
.hero__inner {
	display: grid;
	gap: var(--s-6);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	padding-block: var(--s-5) var(--s-7);
	width: 100%;
}
@media (min-width: 1024px) {
	.hero__inner { grid-template-columns: 1.2fr 1fr; }
}

/* Glass slab behind the hero copy column for legibility over animation */
.hero__content {
	position: relative;
	padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.75rem);
	border-radius: var(--r-5);
	background: linear-gradient(135deg, rgba(10, 35, 80, 0.50), rgba(3, 16, 42, 0.35));
	border: 1px solid rgba(78, 163, 255, 0.16);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-end: var(--s-5); }
.hero__title {
	font-size: clamp(2.2rem, 1.6rem + 3.2vw, 4rem);
	letter-spacing: var(--ls-tight);
	line-height: 1.08;
	margin-block-end: var(--s-5);
	text-shadow: 0 2px 24px rgba(5, 7, 13, 0.55);
}
.hero__title .accent { background: var(--g-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead {
	font-size: var(--fs-3);
	color: var(--c-ink-1);
	max-width: 56ch;
	margin-block-end: var(--s-6);
	text-shadow: 0 1px 16px rgba(5, 7, 13, 0.6);
}
.hero__ctas {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--s-3);
	margin-block-end: var(--s-6);
}
.hero__metrics {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: var(--s-3);
	max-width: 600px;
	margin-inline: auto;
	justify-items: center;
}
.hero__metric {
	padding: var(--s-3) var(--s-4);
	background: rgba(3, 16, 42, 0.45);
	border: 1px solid rgba(78, 163, 255, 0.14);
	border-radius: var(--r-3);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	text-align: center;
	width: 100%;
}
.hero__metric .stat__value { font-size: var(--fs-4); }
@media (min-width: 1024px) {
	.hero__ctas, .hero__metrics { justify-content: flex-start; margin-inline: 0; }
	.hero__metrics { justify-items: stretch; }
	.hero__metric { text-align: left; }
}

/* Hero side art (3D coin / glyph) */
.hero__art {
	position: relative;
	aspect-ratio: 1;
	max-width: 520px;
	margin-inline: auto;
}
.hero__art-coin {
	position: absolute; inset: 0;
	display: grid; place-items: center;
}
.hero__art-coin img,
.hero__art-coin canvas {
	width: 100%; height: 100%;
	animation: float-y 6s var(--ease-in-out) infinite;
}
.hero__art-ring {
	position: absolute; inset: -10%;
	border-radius: 50%;
	border: 1px dashed rgba(0, 229, 255, 0.25);
	animation: ring-spin 30s linear infinite;
}
.hero__art-ring--2 { inset: -25%; border-color: rgba(20, 80, 255, 0.2); animation-duration: 60s; animation-direction: reverse; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* Trust marquee --------------------------------------------------------- */
.s-trust { padding-block: var(--s-7); border-block: 1px solid var(--c-border); }
.s-trust .container { display: grid; gap: var(--s-5); }
.s-trust__label { text-align: center; }
.s-trust .marquee img {
	height: 36px;
	width: auto;
	max-width: 140px;
	object-fit: contain;
	opacity: 0.75;
	filter: brightness(0) invert(1) opacity(0.85);
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Features grid --------------------------------------------------------- */
.s-features .grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--s-5);
}

/* Why DigiByte — alternating thematic rows */
.feature-rows { display: grid; gap: var(--s-8); }
.feature-row {
	display: grid;
	gap: var(--s-6);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 860px) {
	.feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.feature-row--reverse .feature-row__visual { order: 2; }
	.feature-row--reverse .feature-row__body   { order: 1; }
}
.feature-row__visual {
	position: relative;
	width: clamp(220px, 70%, 300px);
	aspect-ratio: 1;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--s-3);
	padding: var(--s-6);
	border-radius: var(--r-5);
	background:
		radial-gradient(circle at 50% 50%, rgba(0, 229, 255, 0.18), transparent 60%),
		linear-gradient(135deg, rgba(20, 80, 255, 0.10), rgba(0, 229, 255, 0.05));
	border: 1px solid rgba(0, 229, 255, 0.15);
	overflow: hidden;
}
.feature-row__visual::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	border: 1px dashed rgba(0, 229, 255, 0.18);
	animation: ring-spin 80s linear infinite;
	pointer-events: none;
}
.feature-row__icon {
	font-size: clamp(2rem, 4vw, 2.6rem);
	color: var(--c-neon-cyan);
	filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.45));
	line-height: 1;
}
.feature-row__stat {
	font-family: var(--ff-display);
	font-weight: 700;
	font-size: clamp(3rem, 7vw, 4.6rem);
	line-height: 1;
	background: var(--g-brand);
	-webkit-background-clip: text;
	        background-clip: text;
	color: transparent;
	letter-spacing: -0.02em;
}
.feature-row__stat-unit {
	font-family: var(--ff-mono);
	font-size: var(--fs-1);
	color: var(--c-ink-3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.feature-row__body h3 {
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	letter-spacing: var(--ls-tight);
	margin-block: var(--s-2) var(--s-3);
	line-height: 1.15;
}
.feature-row__body p {
	color: var(--c-ink-2);
	font-size: var(--fs-2);
	max-width: 60ch;
}

/* Live dashboard -------------------------------------------------------- */
.s-dashboard__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-4);
}
@media (min-width: 640px) {
	.s-dashboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.s-dashboard__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.s-dashboard .stat {
	gap: var(--s-2);
	transition: border-color var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out), box-shadow var(--d-3) var(--ease-out);
}
.s-dashboard .stat:hover {
	transform: translateY(-2px);
	border-color: rgba(0, 229, 255, 0.30);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
.s-dashboard .stat__value { font-size: clamp(2rem, 3.5vw, 2.8rem); }
.s-dashboard .stat__delta { color: rgba(255, 255, 255, 0.55); }

/* Tokenomics + 3D coin -------------------------------------------------- */
.s-tokenomics__layout {
	display: grid;
	gap: var(--s-7);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
@media (min-width: 1024px) {
	.s-tokenomics__layout { grid-template-columns: 1fr 1fr; }
}
.s-tokenomics__visual {
	max-width: 560px;
	margin-inline: auto;
	width: 100%;
}
@media (min-width: 1024px) {
	.s-tokenomics__visual {
		position: sticky;
		top: calc(var(--nav-h) + var(--s-4));
	}
}
.s-tokenomics__visual canvas,
.s-tokenomics__visual img { width: 100%; height: 100%; }

/* Tokenomics emission-schedule chart */
.tokenomics-chart {
	position: relative;
	padding: var(--s-4);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-4);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-card);
	margin: 0;
}
.tokenomics-chart__caption {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	margin-block-end: var(--s-3);
}
.tokenomics-chart__live {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.tokenomics-chart__price {
	font-family: var(--ff-mono);
	font-size: var(--fs-2);
	color: var(--c-neon-cyan);
	font-variant-numeric: tabular-nums;
}
.tokenomics-chart svg { display: block; width: 100%; height: auto; }
.tokenomics-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-4);
	margin-block-start: var(--s-3);
	color: var(--c-ink-3);
	font-family: var(--ff-mono);
	font-size: var(--fs-0);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.tokenomics-chart__legend i { font-size: 0.5em; vertical-align: middle; margin-inline-end: 4px; }
.s-tokenomics__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--s-3);
	margin-block-start: var(--s-5);
}

/* DigiAssets flow ------------------------------------------------------- */
.flow-steps {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	counter-reset: step;
}
.flow-step {
	position: relative;
	padding-inline-start: var(--s-7);
	counter-increment: step;
}
.flow-step::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0; top: 0;
	font-family: var(--ff-mono);
	font-size: var(--fs-5);
	color: transparent;
	-webkit-text-stroke: 1px var(--c-neon-cyan);
}
.flow-step h3 { font-size: var(--fs-3); margin-block-end: var(--s-2); }
/* Flow-step cards are visual-only — no hover affordance */
.flow-step.card { cursor: default; }
.flow-step.card:hover { transform: none; border-color: var(--glass-border); box-shadow: var(--shadow-card); }

/* Digi-ID --------------------------------------------------------------- */
.s-digiid {
	background:
		radial-gradient(ellipse at 15% 30%, rgba(0, 229, 255, 0.10), transparent 55%),
		radial-gradient(ellipse at 85% 80%, rgba(20, 80, 255, 0.10), transparent 55%),
		linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
	border-block: 1px solid var(--glass-border);
}
.s-digiid__layout {
	display: grid;
	gap: var(--s-7);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) { .s-digiid__layout { grid-template-columns: 1fr 1fr; } }

/* Benefit list rows: keep the icon in a fixed leading column and let the
   label wrap in place, so long items don't push the whole span to a new
   row and orphan the icon (visible on narrow mobile viewports). */
.s-digiid ul.stack > li.cluster {
	flex-wrap: nowrap;
	align-items: flex-start;
}
.s-digiid ul.stack > li.cluster > i {
	flex: 0 0 auto;
	padding-block-start: 0.25em;
}
.s-digiid ul.stack > li.cluster > span {
	flex: 1 1 0;
	min-width: 0;
}
.qr-demo {
	aspect-ratio: 1;
	max-width: 360px;
	margin-inline: auto;
	position: relative;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-4);
	display: grid; place-items: center;
	padding: var(--s-5);
	overflow: hidden;
}
.qr-demo svg { width: 100%; height: 100%; max-width: 280px; }
.qr-demo__scan {
	position: absolute;
	left: 8%; right: 8%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--c-neon-cyan), transparent);
	box-shadow: 0 0 16px var(--c-neon-cyan);
	animation: qr-scan 2.6s var(--ease-in-out) infinite;
}
@keyframes qr-scan {
	0% { top: 12%; }
	50% { top: 86%; }
	100% { top: 12%; }
}
/* Hide the QR demo on mobile - it eats a lot of real estate for a decorative element. */
@media (max-width: 767px) {
	.s-digiid__visual { display: none; }
}

/* DigiDollar ------------------------------------------------------------ */
/* Reuses the hero coin-art primitives (.hero__art-coin, .hero__art-ring)
   so the visual matches the hero DGB coin while presenting the DigiDollar
   logo, chip and copy in the two-column Digi-ID layout. */
.s-digidollar {
	background:
		radial-gradient(ellipse at 85% 20%, rgba(0, 229, 255, 0.10), transparent 55%),
		radial-gradient(ellipse at 15% 80%, rgba(20, 80, 255, 0.10), transparent 55%),
		linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0));
	border-block: 1px solid var(--glass-border);
}
.s-digidollar__layout {
	display: grid;
	gap: var(--s-7);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}
@media (min-width: 1024px) { .s-digidollar__layout { grid-template-columns: 1fr 1fr; } }

/* Coin-art container matches .hero__art so .hero__art-coin/.hero__art-ring
   inherit the same absolute positioning + aspect ratio. */
.s-digidollar__visual {
	position: relative;
	aspect-ratio: 1;
	max-width: 420px;
	margin-inline: auto;
	width: 100%;
}
/* Two full-badge SVGs stack in the same grid cell so the green variant can
   cross-fade in on hover/focus. The SVGs are transparent outside the badge
   circle, so no clip is needed. */
.s-digidollar__visual .hero__art-coin { position: relative; }
.s-digidollar__visual .hero__art-coin img {
	grid-area: 1 / 1;
	background: transparent;
	transition: opacity 240ms var(--ease-in-out, ease-in-out);
}
.s-digidollar__logo--hover {
	opacity: 0;
	filter: drop-shadow(0 0 32px rgba(46, 204, 113, 0.45));
}
.s-digidollar__visual:hover .s-digidollar__logo--base,
.s-digidollar__visual:focus-within .s-digidollar__logo--base { opacity: 0; }
.s-digidollar__visual:hover .s-digidollar__logo--hover,
.s-digidollar__visual:focus-within .s-digidollar__logo--hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.s-digidollar__visual .hero__art-coin img { transition: none; }
}
.s-digidollar__chip {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	display: flex;
	justify-content: center;
	pointer-events: none;
}
.s-digidollar__chip .chip { pointer-events: auto; }

/* Benefit list rows: same fixed-icon column rule as Digi-ID so long items
   don't push the icon to a new row on narrow viewports. */
.s-digidollar ul.stack > li.cluster {
	flex-wrap: nowrap;
	align-items: flex-start;
}
.s-digidollar ul.stack > li.cluster > i {
	flex: 0 0 auto;
	padding-block-start: 0.25em;
}
.s-digidollar ul.stack > li.cluster > span {
	flex: 1 1 0;
	min-width: 0;
}

/* On mobile, shrink the coin visual instead of hiding it — the DigiDollar
   logo is the section's focal point. */
@media (max-width: 767px) {
	.s-digidollar__visual { max-width: 260px; }
}

/* Developer hub --------------------------------------------------------- */
.s-devhub {
	background:
		radial-gradient(ellipse at 80% 20%, rgba(0, 229, 255, 0.08), transparent 60%),
		radial-gradient(ellipse at 10% 80%, rgba(20, 80, 255, 0.08), transparent 60%);
	border-block: 1px solid var(--c-border);
}
.s-devhub__layout {
	display: grid;
	gap: var(--s-7);
	grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) { .s-devhub__layout { grid-template-columns: 1.1fr 1fr; } }
.s-devhub__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--s-3);
	margin-block-start: var(--s-5);
}
.devlink {
	display: flex; flex-direction: column; gap: var(--s-1);
	padding: var(--s-4);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-3);
	color: var(--c-ink-1);
	transition: transform var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.devlink:hover { transform: translateY(-2px); border-color: var(--c-neon-cyan); color: var(--c-ink-0); }
.devlink__icon { width: 32px; height: 32px; color: var(--c-neon-cyan); }
.devlink__title { font-family: var(--ff-display); font-weight: 600; }
.devlink__meta { font-family: var(--ff-mono); font-size: var(--fs-0); color: var(--c-ink-3); }

.release-card {
	padding: var(--s-5);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-3);
	display: flex; flex-direction: column; gap: var(--s-3);
}
.release-card__head { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.release-card__tag {
	font-family: var(--ff-mono);
	color: var(--c-neon-cyan);
	font-size: var(--fs-2);
}
/* Release notes — click to expand */
.release-card__notes {
	color: var(--c-ink-2);
	font-size: var(--fs-1);
	border-top: 1px solid var(--c-border);
	padding-block-start: var(--s-3);
}
.release-card__notes > summary {
	cursor: pointer;
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	color: var(--c-neon-cyan);
	font-family: var(--ff-mono);
	font-size: var(--fs-0);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.release-card__notes > summary::-webkit-details-marker { display: none; }
.release-card__notes > summary::after {
	content: "+";
	display: inline-grid;
	place-items: center;
	width: 18px; height: 18px;
	border: 1px solid currentColor;
	border-radius: 50%;
	font-size: 14px;
	line-height: 1;
}
.release-card__notes[open] > summary::after { content: "–"; }
.release-card__notes__body {
	margin-block-start: var(--s-3);
	white-space: pre-wrap;
}

/* Wallets --------------------------------------------------------------- */
.s-wallets__filters {
	display: flex; flex-wrap: wrap; gap: var(--s-2);
	justify-content: center;
	margin-block-end: var(--s-6);
}
.wallets-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: var(--s-3);
}
.wallet-card {
	display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
	padding: var(--s-5) var(--s-3);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-3);
	text-align: center;
	color: var(--c-ink-1);
	transition: transform var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out);
}
.wallet-card:hover { transform: translateY(-3px); border-color: var(--c-neon-cyan); }
.wallet-card img { width: 64px; height: 64px; object-fit: contain; }
.wallet-card img[src*="ledger"],
.wallet-card img[src*="safepal"],
.wallet-card img[src*="secux"] { filter: invert(1); }
.wallet-card__type {
	font-family: var(--ff-mono);
	font-size: var(--fs-0);
	color: var(--c-ink-3);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}
.wallet-card.is-hidden { display: none; }

/* Roadmap --------------------------------------------------------------- */
.timeline {
	position: relative;
	padding-inline-start: var(--s-6);
}
.timeline::before {
	content: "";
	position: absolute;
	left: 18px; top: 0; bottom: 0;
	width: 1px;
	background: linear-gradient(180deg, var(--c-neon-cyan), var(--c-neon-violet), transparent);
}
.timeline__item {
	position: relative;
	padding: var(--s-5);
	margin-block-end: var(--s-5);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-3);
}
.timeline__item::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--s-6) + 13px);
	top: var(--s-5);
	width: 12px; height: 12px;
	border-radius: 50%;
	background: var(--c-neon-cyan);
	box-shadow: 0 0 16px var(--c-neon-cyan);
}
.timeline__year { font-family: var(--ff-mono); color: var(--c-neon-cyan); font-size: var(--fs-1); }
.timeline__title { font-size: var(--fs-3); margin-block: var(--s-1) var(--s-2); }

/* Roadmap: wavy neon road with milestone cards & animated DGB cars ----- */
.roadmap { margin-block-start: var(--s-6); }

/* Shared road path (in lane viewBox coordinates: 220 wide, 1760 tall).
   8 milestones, alternating sides every 220px row. */
:root {
	--road-path: path("M 30 110 C 30 220, 190 220, 190 330 C 190 440, 30 440, 30 550 C 30 660, 190 660, 190 770 C 190 880, 30 880, 30 990 C 30 1100, 190 1100, 190 1210 C 190 1320, 30 1320, 30 1430 C 30 1540, 190 1540, 190 1650");
}

/* Desktop stage = 3-column grid: card | road-lane | card.
   Cards alternate columns; lane spans all 8 rows. */
.roadmap__stage {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 220px minmax(0, 1fr);
	grid-template-rows: repeat(8, 220px);
	column-gap: var(--s-4);
	align-items: center;
	max-width: 1200px;
	margin-inline: auto;
}
.roadmap__items {
	display: contents;
	list-style: none;
	margin: 0; padding: 0;
}
.roadmap__item {
	position: relative;
	padding: var(--s-4);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-3);
	-webkit-backdrop-filter: blur(var(--glass-blur));
	backdrop-filter: blur(var(--glass-blur));
	box-shadow: var(--shadow-card);
	max-width: 380px;
	width: 100%;
	align-self: center;
}
.roadmap__item:nth-child(1) { grid-column: 1; grid-row: 1; justify-self: end; }
.roadmap__item:nth-child(2) { grid-column: 3; grid-row: 2; justify-self: start; }
.roadmap__item:nth-child(3) { grid-column: 1; grid-row: 3; justify-self: end; }
.roadmap__item:nth-child(4) { grid-column: 3; grid-row: 4; justify-self: start; }
.roadmap__item:nth-child(5) { grid-column: 1; grid-row: 5; justify-self: end; }
.roadmap__item:nth-child(6) { grid-column: 3; grid-row: 6; justify-self: start; }
.roadmap__item:nth-child(7) { grid-column: 1; grid-row: 7; justify-self: end; }
.roadmap__item:nth-child(8) { grid-column: 3; grid-row: 8; justify-self: start; }
/* Connector stub from each card toward the pin in the road lane */
.roadmap__item::after {
	content: "";
	position: absolute;
	top: 50%;
	width: var(--s-3);
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.5));
}
.roadmap__item:nth-child(odd)::after  { right: calc(-1 * var(--s-3)); transform: translateY(-50%); }
.roadmap__item:nth-child(even)::after { left: calc(-1 * var(--s-3));  transform: translateY(-50%); background: linear-gradient(90deg, rgba(0, 229, 255, 0.5), transparent); }
.roadmap__item--finale {
	border-color: rgba(0, 229, 255, 0.45);
	box-shadow: var(--shadow-pop), 0 0 24px rgba(0, 229, 255, 0.18);
}
.roadmap__year { font-family: var(--ff-mono); color: var(--c-neon-cyan); font-size: var(--fs-1); }
.roadmap__title { font-size: var(--fs-3); margin-block: var(--s-1) var(--s-2); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.roadmap__bullets {
	list-style: none;
	padding: 0;
	margin: var(--s-2) 0 0;
	display: grid;
	gap: var(--s-1);
	font-family: var(--ff-mono);
	font-size: var(--fs-0);
	color: var(--c-ink-2);
}
.roadmap__bullets li { position: relative; padding-inline-start: 1.25rem; }
.roadmap__bullets li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.55em;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-neon-cyan);
	box-shadow: 0 0 6px rgba(0, 229, 255, 0.6);
}

/* Road lane: column 2, spans all 8 explicit rows = 1760px tall.
   SVG viewBox 220x1760 maps 1:1 to rendered pixels. */
.roadmap__lane {
	grid-column: 2;
	grid-row: 1 / -1;
	position: relative;
	width: 220px;
	height: 100%;
}
.roadmap__road {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Animated DGB-logo "cars" driving along the road inside the lane.
   Lane is 220x1760 in CSS px on desktop, matching the SVG viewBox 1:1,
   so offset-path coordinates line up with the rendered road. */
.roadmap__car {
	position: absolute;
	top: 0; left: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.7));
	offset-path: var(--road-path);
	offset-rotate: auto;
	offset-anchor: center;
	animation: roadmap-drive 22s linear infinite;
	pointer-events: none;
	z-index: 2;
}
.roadmap__car--2 {
	width: 32px;
	height: 32px;
	animation-duration: 30s;
	animation-delay: -11s;
	opacity: 0.85;
	filter: drop-shadow(0 0 10px rgba(20, 80, 255, 0.7));
}
@keyframes roadmap-drive {
	from { offset-distance: 0%; }
	to   { offset-distance: 100%; }
}

/* Phone/tablet: collapse to single-column stack, hide the road graphic */
@media (max-width: 860px) {
	.roadmap__stage {
		display: flex;
		flex-direction: column;
		gap: var(--s-4);
		grid-auto-rows: auto;
	}
	.roadmap__items { display: contents; }
	.roadmap__lane { display: none; }
	.roadmap__item {
		max-width: none;
		justify-self: stretch;
	}
	.roadmap__item::after { display: none; }
}

/* Reduced-motion: freeze the cars at fixed positions along the road */
@media (prefers-reduced-motion: reduce) {
	.roadmap__car { animation: none; offset-distance: 35%; }
	.roadmap__car--2 { offset-distance: 72%; }
}

/* Fallback: browsers without offset-path support */
@supports not (offset-path: path("M0 0")) {
	.roadmap__car { display: none; }
}

/* RTL: the SVG road renders L-to-R regardless of direction.
   Mirror the road graphic horizontally and flip card column assignments
   so each card stays paired with its pin. Pin number text is flipped
   back so digits remain readable. */
[dir="rtl"] .roadmap__road { transform: scaleX(-1); transform-origin: center; }
[dir="rtl"] .roadmap__road g text { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
[dir="rtl"] .roadmap__item:nth-child(1) { grid-column: 3; justify-self: start; }
[dir="rtl"] .roadmap__item:nth-child(2) { grid-column: 1; justify-self: end; }
[dir="rtl"] .roadmap__item:nth-child(3) { grid-column: 3; justify-self: start; }
[dir="rtl"] .roadmap__item:nth-child(4) { grid-column: 1; justify-self: end; }
[dir="rtl"] .roadmap__item:nth-child(5) { grid-column: 3; justify-self: start; }
[dir="rtl"] .roadmap__item:nth-child(6) { grid-column: 1; justify-self: end; }
[dir="rtl"] .roadmap__item:nth-child(7) { grid-column: 3; justify-self: start; }
[dir="rtl"] .roadmap__item:nth-child(8) { grid-column: 1; justify-self: end; }

/* Community ------------------------------------------------------------- */
.community-grid {
	display: grid;
	gap: var(--s-3);
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.community-tile {
	display: flex; align-items: center; gap: var(--s-3);
	padding: var(--s-4);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-3);
	color: var(--c-ink-1);
	transition: transform var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
.community-tile:hover { transform: translateY(-2px); color: var(--c-ink-0); }
.community-tile i, .community-tile svg { font-size: 1.5rem; color: var(--c-neon-cyan); }

/* Downloads ------------------------------------------------------------- */
.downloads-grid {
	display: grid;
	gap: var(--s-5);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.download-card {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--r-4);
	display: flex; flex-direction: column; gap: var(--s-4);
}
.download-card__platforms {
	display: flex; flex-wrap: wrap; gap: var(--s-2);
}

/* Featured (solo) variant — used when only one download card is shown.
   Constrains overall width and splits internals into a 2-column layout
   so the card doesn't stretch awkwardly across the full grid. */
.download-card--featured {
	max-width: 1080px;
	margin-inline: auto;
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	align-items: start;
}
.download-card--featured > .download-card__main,
.download-card--featured > .download-card__aside {
	display: flex; flex-direction: column; gap: var(--s-4);
	min-width: 0;
}
.download-card--featured > .download-card__aside {
	padding-inline-start: clamp(1.5rem, 3vw, 2.5rem);
	border-inline-start: 1px solid var(--glass-border);
}
@media (max-width: 760px) {
	.download-card--featured { grid-template-columns: 1fr; }
	.download-card--featured > .download-card__aside {
		padding-inline-start: 0;
		border-inline-start: 0;
		padding-block-start: var(--s-5);
		border-block-start: 1px solid var(--glass-border);
	}
}

/* Footer ---------------------------------------------------------------- */
.footer {
	background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
	border-top: 1px solid var(--c-border);
	padding-block: var(--s-9) var(--s-6);
	margin-block-start: var(--s-9);
}
.footer__grid {
	display: grid;
	gap: var(--s-7);
	grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
}
@media (max-width: 960px) {
	.footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.footer__grid { grid-template-columns: 1fr; }
}
.footer__brand { max-width: 320px; }
.footer__brand-link { display: inline-block; transition: opacity var(--d-2) var(--ease-out); }
.footer__brand-link:hover { opacity: 0.85; }
.footer__logo {
	display: block;
	width: auto;
	height: clamp(48px, 6vw, 64px);
	max-width: 100%;
	filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.18));
}
.footer h6 { margin-block-end: var(--s-3); color: var(--c-ink-2); }
.footer__list { display: flex; flex-direction: column; gap: var(--s-2); }
.footer__list a { color: var(--c-ink-2); font-size: var(--fs-1); }
.footer__list a:hover { color: var(--c-neon-cyan); }
.footer__bottom {
	margin-block-start: var(--s-6);
	padding-block-start: var(--s-5);
	border-top: 1px solid var(--c-border);
	display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between; align-items: center;
	font-family: var(--ff-mono); font-size: var(--fs-0);
	color: var(--c-ink-3);
}
.footer__socials { display: flex; gap: var(--s-3); }
.footer__socials a {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border-radius: 50%;
	border: 1px solid var(--c-border);
	color: var(--c-ink-1);
	transition: color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out);
}
.footer__socials a:hover { color: var(--c-neon-cyan); border-color: var(--c-neon-cyan); transform: translateY(-2px); }

/* Misc page-section wrappers ------------------------------------------- */
.bg-grid {
	position: relative;
	isolation: isolate;
}
.bg-grid::before {
	content: "";
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(0, 229, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(0, 229, 255, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
	mask-image: radial-gradient(ellipse at center, black 0%, transparent 80%);
	z-index: -1;
}

/* Legal / static content pages -------------------------------------------- */
.legal-page {
padding-block: clamp(3rem, 8vw, 6rem);
}
.legal-page .container { max-width: 760px; }
.legal-page h1 {
font-size: var(--fs-7);
margin-block-end: var(--s-3);
background: var(--g-text);
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
.legal-page h2 {
font-size: var(--fs-4);
margin-block: var(--s-7) var(--s-3);
color: var(--c-ink-0);
}
.legal-page p, .legal-page li { color: var(--c-ink-2); line-height: var(--lh-loose); }
.legal-page ul { padding-inline-start: 1.25rem; margin-block: var(--s-3); list-style: disc; }
.legal-page strong { color: var(--c-ink-1); }
.legal-page a { color: var(--c-neon-cyan); text-decoration: underline; text-underline-offset: 3px; }
.legal-page a:hover { color: var(--c-link-hover); }
.legal-page__meta { font-family: var(--ff-mono); font-size: var(--fs-1); color: var(--c-ink-3); margin-block-end: var(--s-6); }

/* Center hero (404 / offline) ------------------------------------------- */
.center-page {
min-height: 100svh;
display: grid; place-items: center;
padding: var(--s-7) var(--container-px);
text-align: center;
}
.center-page__art {
font-family: var(--ff-display);
font-size: clamp(8rem, 20vw, 16rem);
font-weight: 700;
line-height: 1;
background: var(--g-brand);
-webkit-background-clip: text; background-clip: text;
color: transparent;
letter-spacing: var(--ls-tight);
filter: drop-shadow(0 0 30px rgba(0, 229, 255, 0.25));
}
.center-page h1 { font-size: var(--fs-6); margin-block: var(--s-3) var(--s-2); }
.center-page p { color: var(--c-ink-2); max-width: 50ch; margin-inline: auto; }

/* Mini header for static pages ------------------------------------------ */
.mini-header {
min-height: var(--nav-h);
display: flex; align-items: center;
border-bottom: 1px solid var(--c-border);
}
.mini-header .row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.mini-header img { height: 28px; width: auto; }

/* Language menu --------------------------------------------------------- */
.lang-menu { position: relative; }
.lang-menu__panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: min(540px, 92vw);
max-height: calc(100vh - var(--nav-h) - 24px);
overflow-y: auto;
overscroll-behavior: contain;
padding: var(--s-5);
background: var(--c-bg-2);
border: 1px solid var(--c-border-strong);
border-radius: var(--r-4);
box-shadow: var(--shadow-pop);
z-index: var(--z-modal);
-webkit-backdrop-filter: blur(var(--glass-blur-strong));
backdrop-filter: blur(var(--glass-blur-strong));
animation: lang-pop 200ms var(--ease-out);
}
.lang-menu__panel[hidden] { display: none; }
.lang-menu__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--s-1);
}
.lang-menu__grid a {
padding: 0.5rem 0.7rem;
font-size: var(--fs-1);
color: var(--c-ink-1);
border-radius: var(--r-2);
transition: background var(--d-2) var(--ease-out), color var(--d-2) var(--ease-out);
}
.lang-menu__grid a:hover { background: var(--glass-bg-soft); color: var(--c-neon-cyan); }
.lang-menu__edit {
display: block;
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid var(--c-border);
font-family: var(--ff-mono);
font-size: var(--fs-0);
color: var(--c-ink-3);
text-align: center;
}
@keyframes lang-pop {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
/* On narrow screens tighten padding, and give tap targets a bit more room. */
@media (max-width: 767px) {
	.lang-menu__panel {
		/* Break out of the header's positioning context so the panel is
		   pinned to the viewport, not to the globe button on the right edge.
		   Previously it was anchored right: 0 of .lang-menu and rendered
		   at 92-96vw wide, which clipped the left half off-screen. */
		position: fixed;
		top: calc(var(--nav-h) + 8px);
		left: 8px;
		right: 8px;
		width: auto;
		max-width: none;
		max-height: calc(100vh - var(--nav-h) - 24px);
		padding: var(--s-4);
	}
	.lang-menu__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.lang-menu__grid a { padding: 0.6rem 0.7rem; }
}

/* Scroll-to-top button -------------------------------------------------- */
.scroll-top {
position: fixed;
right: clamp(16px, 3vw, 28px);
bottom: clamp(16px, 3vw, 28px);
width: 48px;
height: 48px;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--c-border-strong);
background: var(--c-bg-2);
color: var(--c-ink-1);
cursor: pointer;
opacity: 0;
transform: translateY(12px) scale(0.9);
pointer-events: none;
transition: opacity var(--d-3) var(--ease-out), transform var(--d-3) var(--ease-out), color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), box-shadow var(--d-2) var(--ease-out);
z-index: var(--z-sticky);
-webkit-backdrop-filter: blur(var(--glass-blur));
backdrop-filter: blur(var(--glass-blur));
}
.scroll-top.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.scroll-top:hover {
color: var(--c-neon-cyan);
border-color: var(--c-neon-cyan);
box-shadow: var(--shadow-glow-cyan);
}
.scroll-top:focus-visible {
outline: 2px solid var(--c-neon-cyan);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.scroll-top { transition: opacity var(--d-2) linear; transform: none; }
.scroll-top.is-visible { transform: none; }
}

/* Standalone lang menu button -------------------------------------------- */
.lang-menu__btn {
width: 44px; height: 44px;
display: grid; place-items: center;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.24);
background: transparent;
color: #ffffff;
cursor: pointer;
transition: color var(--d-2) var(--ease-out), border-color var(--d-2) var(--ease-out), background var(--d-2) var(--ease-out);
}
.lang-menu__btn:hover { color: #ffffff; border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.08); }
.lang-menu__btn[aria-expanded="true"] { color: #ffffff; border-color: #ffffff; background: rgba(255, 255, 255, 0.12); }