/* ─── Enclv Thesis - Brand Identity Colors (from AppColors.swift) ─── */
/*
* Primary  → Brand Indigo  : #4F46E5 (light) / #6680E6 (dark)
* Secondary→ Electric Cyan : #06B6D4 (light) / #33CCFF (dark)
* Background               : #FAFAFA (light) / System black (dark)
* On-Surface text          : #0F172A (light) / white (dark)
* Text Variant             : #64748B
*/
:root {
	/* --- Primary: Brand Indigo (dark-mode values, hoisted to :root) --- */
	--enclv-primary:      #6680E6;   /* Brand Indigo (dark) */
	--enclv-primary-dim:  color(from #6680E6 srgb r g b / 0.15);
	--enclv-primary-border: color(from #6680E6 srgb r g b / 0.32);
	
	/* --- Secondary: Electric Cyan (dark-mode) --- */
	--enclv-cyan:         #33CCFF;
	--enclv-cyan-dim:     color(from #33CCFF srgb r g b / 0.13);
	--enclv-cyan-border:  color(from #33CCFF srgb r g b / 0.30);
	
	/* --- Semantic aliases pointing to brand tokens --- */
	--enclv-blue:         var(--enclv-primary);
	--enclv-blue-light:   var(--enclv-primary);
	--enclv-green:        #34D399;   /* ZK / Enclave emerald */
	--enclv-purple:       var(--enclv-primary);  /* ERC standards: use Indigo */
	--enclv-text-variant: #64748B;
}

/* Light-mode overrides */
@media (prefers-color-scheme: light) {
	:root {
		--enclv-primary:       #4F46E5;
		--enclv-primary-dim:   color(from #4F46E5 srgb r g b / 0.10);
		--enclv-primary-border: color(from #4F46E5 srgb r g b / 0.28);
		--enclv-cyan:          #06B6D4;
		--enclv-cyan-dim:      color(from #06B6D4 srgb r g b / 0.10);
		--enclv-cyan-border:   color(from #06B6D4 srgb r g b / 0.28);
		--enclv-blue:          #4F46E5;
		--enclv-blue-light:    #4F46E5;
		--enclv-purple:        #4F46E5;
	}
}

/* ─── Hero ────────────────────────────────────────────────────────── */

.enclv-hero {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: calc(var(--lineHeight) * 1.1);
	padding: calc(var(--lineHeight) * 3.5) 0 calc(var(--lineHeight) * 1.5) 0;
}

.enclv-brand {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--lineHeight) * 0.55);
	font-size: calc(var(--fontSize) * 2.6);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--primaryText);
}

.enclv-brand img {
	width: 54px;
	height: 54px;
	border-radius: calc(var(--radius-icon) * 1.3);
	border: var(--hairlineThickness) solid color(from var(--primaryText) srgb r g b / 0.1);
	flex-shrink: 0;
}

.enclv-h1 {
	font-size: calc(var(--fontSize) * 2.1);
	font-weight: 680;
	line-height: 1.2;
	letter-spacing: -0.032em;
	color: var(--primaryText);
	max-width: 22ch;
}

@media screen and (min-width: 600px) {
	.enclv-h1 {
		font-size: calc(var(--fontSize) * 2.5);
	}
}

/* Second line of the merged h1: slightly smaller, brand-indigo tint */
.enclv-h1-sub {
	display: block;
	font-size: calc(var(--fontSize) * 1.45);
	font-weight: 500;
	letter-spacing: -0.02em;
	color: var(--enclv-primary);
	line-height: 1.3;
	margin-top: 0.2em;
}

@media screen and (min-width: 600px) {
	.enclv-h1-sub { font-size: calc(var(--fontSize) * 1.65); }
}

.enclv-author {
	display: block;
	font-size: calc(var(--fontSize) * 0.95);
	font-weight: 400;
	color: var(--secondaryText);
	margin-top: 0.8em;
	letter-spacing: 0.01em;
}

/* Light overrides for hero subtitle, mono tokens, and section kickers are
handled automatically via the brand token redefinition in the
@media (prefers-color-scheme: light) :root block above. */

.enclv-lead {
	color: var(--secondaryText);
	font-size: var(--fontSize);
	max-width: 60ch;
	line-height: 1.7;
	margin: 0;
}

.enclv-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: calc(var(--lineHeight) * 0.5);
	align-items: center;
	justify-content: center;
	margin-top: calc(var(--lineHeight) * 0.3);
}

/* Disabled CTA state */
.cta-disabled {
	opacity: 0.42;
	cursor: not-allowed;
	pointer-events: none;
}

.cta-soon-badge {
	display: inline-block;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--tertiaryText);
	background: color(from var(--primaryText) srgb r g b / 0.1);
	border-radius: 100px;
	padding: 1px 6px;
	margin-left: 2px;
	vertical-align: middle;
}

/* Primary CTA: solid blue */
.cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 12px 22px;
	font: inherit;
	font-size: var(--secondaryFontSize);
	font-weight: 620;
	line-height: 1;
	color: #fff;
	background: var(--enclv-blue);
	border: none;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.18s ease, transform 0.18s ease;
	white-space: nowrap;
}

.cta-primary:hover { opacity: 0.88; }
.cta-primary:active { transform: translateY(1px); }
.cta-primary::after { content: none !important; }

/* Secondary CTA: outlined */
.cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 20px;
	font: inherit;
	font-size: var(--secondaryFontSize);
	font-weight: 580;
	line-height: 1;
	color: var(--primaryText);
	background: transparent;
	border: var(--hairlineThickness) solid color(from var(--primaryText) srgb r g b / 0.25);
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.18s ease, background 0.18s ease;
	white-space: nowrap;
}

.cta-secondary:hover {
	border-color: color(from var(--primaryText) srgb r g b / 0.5);
	background: color(from var(--primaryText) srgb r g b / 0.04);
}
.cta-secondary::after { content: none !important; }

/* Hero App Image */
.hero-app-mockup {
	width: 100%;
	height: auto;
	margin: calc(var(--lineHeight) * 1) 0 0 0;
	display: block;
	/* Image is inherently transparent, so no background or border needed */
}


/* ─── Section: The Problem ─────────────────────────────────────────── */

.problem-trilemma {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--lineHeight) * 0.75);
	margin-top: calc(var(--lineHeight) * 1);
}

@media screen and (min-width: 560px) {
	.problem-trilemma { grid-template-columns: repeat(3, 1fr); }
}

.trilemma-card {
	padding: calc(var(--lineHeight) * 0.8) calc(var(--lineHeight) * 0.85);
	border-radius: 12px;
	background: var(--secondaryBackgroundColor);
	border: var(--hairlineThickness) solid color(from var(--primaryText) srgb r g b / 0.1);
	display: flex;
	flex-direction: column;
	gap: calc(var(--lineHeight) * 0.35);
}

.trilemma-card__icon {
	font-size: 22px;
	line-height: 1;
}

.trilemma-card__label {
	font-size: var(--secondaryFontSize);
	font-weight: 660;
	color: var(--primaryText);
	letter-spacing: -0.01em;
}

.trilemma-card__desc {
	font-size: calc(var(--secondaryFontSize) - 0.5px);
	color: var(--secondaryText);
	line-height: 1.6;
}

/* ─── Section: The Solution ────────────────────────────────────────── */

.solution-pillars {
	display: flex;
	flex-direction: column;
	gap: calc(var(--lineHeight) * 0.85);
	margin-top: calc(var(--lineHeight) * 1);
}

.pillar {
	display: flex;
	flex-direction: column;
	gap: calc(var(--lineHeight) * 0.3);
	padding: calc(var(--lineHeight) * 0.9) calc(var(--lineHeight) * 1);
	border-radius: 14px;
	background: var(--secondaryBackgroundColor);
	border: var(--hairlineThickness) solid color(from var(--primaryText) srgb r g b / 0.09);
	position: relative;
	overflow: hidden;
}

/* Accent left-border stripe */
.pillar::before {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 3px;
}

/* Secure Enclave pillar → Brand Indigo */
.pillar--blue::before   { background: var(--enclv-primary); }
/* RIP-7212 pillar → Enclave emerald */
.pillar--green::before  { background: var(--enclv-green); }
/* ERC Standards pillar → Electric Cyan */
.pillar--purple::before { background: var(--enclv-cyan); }

.pillar__eyebrow {
	font-size: calc(var(--secondaryFontSize) - 1px);
	font-weight: 660;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pillar--blue   .pillar__eyebrow { color: var(--enclv-primary); }
.pillar--green  .pillar__eyebrow { color: var(--enclv-green); }
.pillar--purple .pillar__eyebrow { color: var(--enclv-cyan); }

.pillar__title {
	font-size: var(--fontSize);
	font-weight: 640;
	color: var(--primaryText);
	letter-spacing: -0.01em;
	line-height: 1.3;
}

.pillar__desc {
	font-size: var(--secondaryFontSize);
	color: var(--secondaryText);
	line-height: 1.65;
	max-width: 68ch;
	margin: 0;
}

.pillar__stat {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: calc(var(--lineHeight) * 0.2);
	font-size: calc(var(--secondaryFontSize) - 1px);
	font-weight: 620;
}

.pillar--green .pillar__stat  { color: var(--enclv-green); }
.pillar--blue  .pillar__stat  { color: var(--enclv-primary); }
.pillar--purple .pillar__stat { color: var(--enclv-cyan); }

/* ─── Section: Technical Architecture ─────────────────────────────── */

.arch-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--lineHeight) * 0.75);
	margin-top: calc(var(--lineHeight) * 1);
}

@media screen and (min-width: 560px) {
	.arch-grid { grid-template-columns: 1fr 1fr; }
}

.arch-card {
	padding: calc(var(--lineHeight) * 0.85) calc(var(--lineHeight) * 0.9);
	border-radius: 14px;
	background: var(--secondaryBackgroundColor);
	border: var(--hairlineThickness) solid color(from var(--primaryText) srgb r g b / 0.09);
	display: flex;
	flex-direction: column;
	gap: calc(var(--lineHeight) * 0.35);
}

.arch-card__label {
	font-size: calc(var(--secondaryFontSize) - 0.5px);
	font-weight: 660;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--tertiaryText);
}

.arch-card__title {
	font-size: var(--fontSize);
	font-weight: 640;
	color: var(--primaryText);
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.arch-card__desc {
	font-size: var(--secondaryFontSize);
	color: var(--secondaryText);
	line-height: 1.6;
	margin: 0;
}

.arch-card__detail {
	font-size: calc(var(--secondaryFontSize) - 1px);
	font-weight: 560;
	color: var(--tertiaryText);
	margin: 0;
}

/* ─── Tech Stack bento grid (inline) ─────────────────────────────── */

.bt-grid {
	display: grid;
	width: 100%;
	margin-top: calc(var(--lineHeight) * 1);
	gap: 6px;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
	"bt-chain bt-mobile"
	"bt-contracts bt-backend"
	"bt-attest bt-infra";
}

/* Single-column on narrow viewports */
@media screen and (max-width: 500px) {
	.bt-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
		"bt-chain"
		"bt-mobile"
		"bt-contracts"
		"bt-backend"
		"bt-attest"
		"bt-infra";
	}
}

.bt-card {
	background: var(--secondaryBackgroundColor);
	border-radius: 14px;
	border: var(--hairlineThickness) solid color(from var(--primaryText) srgb r g b / 0.08);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}




/* Category cards */
.bt-card-category {
	padding: calc(var(--lineHeight) * 0.75) calc(var(--lineHeight) * 0.85);
}

.bt-card-chain    { grid-area: bt-chain; }
.bt-card-mobile   { grid-area: bt-mobile; }
.bt-card-contracts{ grid-area: bt-contracts; }
.bt-card-backend  { grid-area: bt-backend; }
.bt-card-attest   { grid-area: bt-attest; }
.bt-card-infra    { grid-area: bt-infra; }

/* Category name: matches section kicker weight and scale */
.bt-category-name {
	font-family: inherit;
	font-size: var(--secondaryFontSize);
	font-weight: 660;
	letter-spacing: -0.01em;
	margin-bottom: 4px;
}

/* Subtitle line under the name */
.bt-category-focus {
	font-family: inherit;
	font-size: calc(var(--secondaryFontSize) - 1px);
	font-weight: 400;
	color: var(--secondaryText);
	margin-bottom: calc(var(--lineHeight) * 0.4);
	line-height: 1.4;
}

.bt-pills-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}

/* Pills: same size as the rest of the page's secondary text */
.bt-pill {
	display: inline-block;
	font-family: inherit;
	font-size: calc(var(--secondaryFontSize) - 1.5px);
	font-weight: 500;
	color: var(--secondaryText);
	background: color(from var(--primaryText) srgb r g b / 0.07);
	border-radius: 100px;
	padding: 2px 9px;
	margin: 2px 3px 2px 0;
	white-space: nowrap;
}



/* ─── Inline mono code tokens ──────────────────────────────────────── */

.mono-token {
	font-family: ui-monospace, monospace;
	font-size: 0.88em;
	padding: 1px 5px;
	border-radius: 5px;
	background: color(from var(--primaryText) srgb r g b / 0.07);
	color: var(--enclv-blue-light);
	border: var(--hairlineThickness) solid color(from var(--primaryText) srgb r g b / 0.1);
}

/* mono-token light mode color via --enclv-primary brand token automatically */

/* ─── Content section normalisation ───────────────────────────────── */

.enclv-section {
	display: block;
	padding-top: calc(var(--lineHeight) * 2.5);
}

.enclv-section:last-of-type {
	padding-bottom: calc(var(--lineHeight) * 2.5);
}

.enclv-section-title {
	font-size: calc(var(--fontSize) * 1.85);
	font-weight: 640;
	letter-spacing: -0.025em;
	line-height: calc(var(--lineHeight) * 1.4);
	color: var(--primaryText);
	margin: 0 0 calc(var(--lineHeight) * 0.4) 0;
}

.enclv-section-kicker {
	font-size: var(--secondaryFontSize);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--enclv-blue-light);
	margin-bottom: calc(var(--lineHeight) * 0.5);
}

/* .enclv-section-kicker light color via --enclv-primary brand token automatically */

.enclv-body-copy {
	font-size: var(--fontSize);
	color: var(--secondaryText);
	line-height: 1.7;
	margin: 0 0 calc(var(--lineHeight) * 0.9) 0;
	max-width: 68ch;
}

.enclv-body-copy:last-child { margin-bottom: 0; }
.enclv-body-copy strong { color: var(--primaryText); font-weight: 580; }