/* ══════════════════════════════════════════
   CROWN CAPITAL FX  ·  LUXURY DARK THEME
   Black · Gold · Ivory  ·  Est. 2010
══════════════════════════════════════════ */

:root {
	--ink: #09090b;
	--ink2: #0f0f12;
	--ink3: #141418;
	--ink4: #1c1c22;
	--ink5: #252530;
	--gold: #c8973e;
	--gold-lt: #e8b85a;
	--gold-dim: #c8973e22;
	--gold-line: #c8973e40;
	--ivory: #f4ede0;
	--ivory-dim: #f4ede099;
	--ivory-mut: #8a8070;
	--ivory-fnt: #5a5448;
	--red: #e05252;
	--green: #4caf81;
	--border: #1e1e24;
	--border-g: #c8973e28;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Instrument Sans', sans-serif;
	background: var(--ink);
	color: var(--ivory);
	overflow-x: hidden;
}

	/* Subtle grain overlay */
	body::after {
		content: '';
		position: fixed;
		inset: 0;
		z-index: 9999;
		pointer-events: none;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
		background-size: 180px;
		opacity: 0.028;
		mix-blend-mode: overlay;
	}

::-webkit-scrollbar {
	width: 3px;
}

::-webkit-scrollbar-track {
	background: var(--ink);
}

::-webkit-scrollbar-thumb {
	background: var(--gold);
}

/* ── DIAGONAL GOLD ORNAMENT LINE ── */
.ornament {
	width: 100%;
	overflow: hidden;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, var(--gold-line) 20%, var(--gold) 50%, var(--gold-line) 80%, transparent 100%);
}

/* ════════════════════════════════
   NAVIGATION
════════════════════════════════ */
nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 56px;
	background: rgba(9,9,11,0.96);
	backdrop-filter: blur(20px) saturate(1.5);
	border-bottom: 1px solid var(--border);
	transition: border-color 0.4s;
}

	nav.scrolled {
		border-bottom-color: var(--gold-line);
	}

.nav-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}

.brand-crest {
	width: 38px;
	height: 38px;
	position: relative;
	flex-shrink: 0;
}

	.brand-crest svg {
		width: 100%;
		height: 100%;
	}

.brand-words {
	display: flex;
	flex-direction: column;
}

.brand-name {
	font-family: 'DM Serif Display', serif;
	font-size: 1.12rem;
	letter-spacing: 0.5px;
	line-height: 1;
	color: var(--ivory);
}

	.brand-name strong {
		color: var(--gold);
		font-weight: 400;
	}

.brand-tag {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.5rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--ivory-fnt);
	margin-top: 3px;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
}

	.nav-menu a {
		font-family: 'IBM Plex Mono', monospace;
		font-size: 0.65rem;
		letter-spacing: 2px;
		text-transform: uppercase;
		text-decoration: none;
		color: var(--ivory-mut);
		transition: color 0.3s;
		padding-bottom: 2px;
		border-bottom: 1px solid transparent;
		transition: all 0.3s;
	}

		.nav-menu a:hover {
			color: var(--gold);
			border-bottom-color: var(--gold-line);
		}

.nav-actions {
	display: flex;
	gap: 10px;
	align-items: center;
}

.btn-nav-out {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.62rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 9px 22px;
	color: var(--ivory-mut);
	border: 1px solid var(--border);
	background: none;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s;
}

	.btn-nav-out:hover {
		border-color: var(--gold-line);
		color: var(--ivory);
	}

.btn-nav-fill {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.62rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 9px 24px;
	color: var(--ink);
	background: linear-gradient(135deg, var(--gold), var(--gold-lt));
	border: none;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s;
	font-weight: 600;
}

	.btn-nav-fill:hover {
		background: linear-gradient(135deg, var(--gold-lt), var(--gold-lt));
		box-shadow: 0 4px 20px var(--gold-dim);
	}

.mob-nav-btn {
	display: none;
	background: none;
	border: 1px solid var(--border);
	color: var(--ivory-mut);
	padding: 8px 14px;
	cursor: pointer;
}

/* ════════════════════════════════
   HERO
════════════════════════════════ */
.hero {
	min-height: 100vh;
	padding-top: 70px;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

	/* Background radial glow */
	.hero::before {
		content: '';
		position: absolute;
		top: -200px;
		right: -200px;
		width: 700px;
		height: 700px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(200,151,62,0.06) 0%, transparent 65%);
		pointer-events: none;
	}

/* Diagonal decorative lines */
.hero-diag {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}

	.hero-diag::before, .hero-diag::after {
		content: '';
		position: absolute;
		width: 1px;
		height: 200%;
		background: linear-gradient(180deg, transparent, var(--gold-line), transparent);
	}

	.hero-diag::before {
		left: 48px;
		top: -50%;
		transform: rotate(12deg);
	}

	.hero-diag::after {
		right: 48px;
		top: -50%;
		transform: rotate(-8deg);
		opacity: 0.5;
	}

.hero-body {
	flex: 1;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	padding: 60px 56px 80px;
	position: relative;
	z-index: 2;
}

.hero-left {
}

.hero-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 36px;
}

	.hero-kicker::before {
		content: '';
		width: 30px;
		height: 1px;
		background: var(--gold);
	}

.hero h1 {
	font-family: 'DM Serif Display', serif;
	font-size: clamp(3.4rem, 5.8vw, 6rem);
	font-weight: 400;
	line-height: 1.0;
	margin-bottom: 32px;
	letter-spacing: -0.5px;
	color: var(--ivory);
}

	.hero h1 .ital {
		font-style: italic;
		color: var(--gold);
		display: block;
	}

	.hero h1 .sm {
		font-size: 0.48em;
		font-family: 'Instrument Sans', sans-serif;
		font-style: normal;
		font-weight: 300;
		letter-spacing: 4px;
		text-transform: uppercase;
		color: var(--ivory-fnt);
		display: block;
		margin-top: 16px;
	}

.hero-desc {
	font-size: 1.0rem;
	color: var(--ivory-mut);
	line-height: 1.9;
	font-weight: 300;
	max-width: 440px;
	margin-bottom: 44px;
}

.hero-btns {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}

.btn-primary-hero {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 36px;
	background: linear-gradient(135deg, var(--gold) 0%, var(--gold-lt) 100%);
	color: var(--ink);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.35s;
	position: relative;
	overflow: hidden;
}

	.btn-primary-hero::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(135deg, var(--gold-lt), #ffd77a);
		opacity: 0;
		transition: opacity 0.3s;
	}

	.btn-primary-hero:hover::before {
		opacity: 1;
	}

	.btn-primary-hero:hover {
		box-shadow: 0 8px 32px rgba(200,151,62,0.35);
		transform: translateY(-2px);
	}

	.btn-primary-hero span {
		position: relative;
		z-index: 1;
	}

	.btn-primary-hero .arr {
		position: relative;
		z-index: 1;
		font-size: 0.9rem;
	}

.btn-ghost-hero {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 15px 36px;
	background: transparent;
	color: var(--ivory-mut);
	border: 1px solid var(--border);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.7rem;
	font-weight: 400;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	transition: all 0.3s;
}

	.btn-ghost-hero:hover {
		border-color: var(--gold-line);
		color: var(--ivory);
	}

/* Hero right — data terminal */
.hero-right {
	padding-left: 48px;
}

.terminal {
	background: var(--ink2);
	border: 1px solid var(--border);
	border-top: 2px solid var(--gold);
	overflow: hidden;
}

.terminal-bar {
	background: var(--ink3);
	border-bottom: 1px solid var(--border);
	padding: 10px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.terminal-dots {
	display: flex;
	gap: 6px;
}

.terminal-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ink5);
}

	.terminal-dot.active {
		background: var(--gold);
	}

.terminal-title {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.58rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ivory-fnt);
}

.terminal-live {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 2px;
	color: var(--green);
	display: flex;
	align-items: center;
	gap: 5px;
}

.live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0%,100% {
		opacity: 1
	}

	50% {
		opacity: 0.3
	}
}

.terminal-body {
	padding: 20px 18px;
}

/* Mini chart SVG area */
.mini-chart {
	margin-bottom: 18px;
	position: relative;
}

.mini-chart-label {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	color: var(--ivory-fnt);
	letter-spacing: 1px;
	margin-bottom: 4px;
	display: flex;
	justify-content: space-between;
}

	.mini-chart-label .chg-up {
		color: var(--green);
	}

/* Stats grid in terminal */
.term-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
}

.term-stat {
	background: var(--ink2);
	padding: 16px 14px;
	transition: background 0.3s;
}

	.term-stat:hover {
		background: var(--ink3);
	}

.term-stat-lbl {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.56rem;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ivory-fnt);
	margin-bottom: 6px;
}

.term-stat-val {
	font-family: 'DM Serif Display', serif;
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1;
	color: var(--ivory);
}

	.term-stat-val.gold {
		color: var(--gold);
	}

	.term-stat-val.g {
		color: var(--green);
	}

.term-stat-note {
	font-size: 0.68rem;
	color: var(--ivory-fnt);
	margin-top: 2px;
}

/* ════════════════════════════════
   TICKER
════════════════════════════════ */
.ticker-bar {
	background: var(--ink2);
	border-top: 1px solid var(--gold-line);
	border-bottom: 1px solid var(--border);
	padding: 9px 0;
	overflow: hidden;
}

.ticker-inner {
	display: flex;
	animation: tick-scroll 45s linear infinite;
	white-space: nowrap;
}

.tick-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 28px;
	border-right: 1px solid var(--border);
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.7rem;
}

.tick-sym {
	color: var(--gold);
	font-weight: 600;
}

.tick-val {
	color: var(--ivory-dim);
}

.tick-pos {
	color: var(--green);
	font-size: 0.65rem;
}

.tick-neg {
	color: var(--red);
	font-size: 0.65rem;
}

@keyframes tick-scroll {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-50%)
	}
}

/* ════════════════════════════════
   TRUST NUMBERS
════════════════════════════════ */
.numbers-row {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	border-bottom: 1px solid var(--border);
}

.num-cell {
	padding: 40px 20px;
	text-align: center;
	border-right: 1px solid var(--border);
	transition: background 0.3s;
	cursor: default;
	position: relative;
}

	.num-cell::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 2px;
		background: var(--gold);
		transition: width 0.4s;
	}

	.num-cell:hover::after {
		width: 60%;
	}

	.num-cell:hover {
		background: var(--ink2);
	}

	.num-cell:last-child {
		border-right: none;
	}

.num-val {
	font-family: 'DM Serif Display', serif;
	font-size: 2rem;
	font-weight: 400;
	color: var(--gold);
	line-height: 1;
	display: block;
}

.num-lbl {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.56rem;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ivory-fnt);
	display: block;
	margin-top: 7px;
}

/* ════════════════════════════════
   SECTION COMMONS
════════════════════════════════ */
.section {
	padding: 108px 56px;
}

	.section.dark2 {
		background: var(--ink2);
	}

	.section.dark3 {
		background: var(--ink3);
	}

.sec-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 20px;
}

	.sec-eyebrow::before {
		content: '';
		width: 32px;
		height: 1px;
		background: var(--gold);
	}

.sec-h {
	font-family: 'DM Serif Display', serif;
	font-size: clamp(2.2rem, 4vw, 3.5rem);
	font-weight: 400;
	line-height: 1.05;
	margin-bottom: 18px;
	color: var(--ivory);
}

	.sec-h em {
		font-style: italic;
		color: var(--gold);
	}

	.sec-h .blk {
		color: var(--ivory);
		font-style: normal;
	}

.sec-p {
	color: var(--ivory-mut);
	font-size: 0.95rem;
	line-height: 1.9;
	font-weight: 300;
	max-width: 540px;
}

/* ════════════════════════════════
   MARKETS SECTION
════════════════════════════════ */
.mkt-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	margin-top: 60px;
}

.mkt-tile {
	background: var(--ink2);
	padding: 38px 30px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: background 0.3s;
}

	.mkt-tile::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background: var(--gold);
		transform: scaleX(0);
		transform-origin: left;
		transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
	}

	.mkt-tile:hover::before {
		transform: scaleX(1);
	}

	.mkt-tile:hover {
		background: var(--ink3);
	}

.mkt-tile-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: 22px;
}

.mkt-emo {
	font-size: 1.8rem;
	line-height: 1;
	filter: grayscale(30%) brightness(0.9);
}

.mkt-badge {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 1.5px;
	padding: 3px 8px;
	border: 1px solid transparent;
}

	.mkt-badge.pos {
		color: var(--green);
		border-color: rgba(76,175,129,0.25);
		background: rgba(76,175,129,0.06);
	}

	.mkt-badge.neg {
		color: var(--red);
		border-color: rgba(224,82,82,0.25);
		background: rgba(224,82,82,0.06);
	}

.mkt-tile-name {
	font-family: 'DM Serif Display', serif;
	font-size: 1.35rem;
	font-weight: 400;
	color: var(--ivory);
	margin-bottom: 12px;
}

.mkt-tile-desc {
	font-size: 0.8rem;
	color: var(--ivory-fnt);
	line-height: 1.75;
	margin-bottom: 20px;
}

.mkt-chips {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

.mkt-chip {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 0.5px;
	padding: 3px 9px;
	border: 1px solid var(--border);
	color: var(--ivory-fnt);
	background: var(--ink);
	transition: all 0.25s;
}

.mkt-tile:hover .mkt-chip {
	border-color: var(--gold-line);
	color: var(--ivory-mut);
}

/* ════════════════════════════════
   WHY CCFX — 3+3 GRID
════════════════════════════════ */
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	margin-top: 60px;
}

.why-tile {
	background: var(--ink2);
	padding: 40px 30px;
	transition: background 0.3s;
	position: relative;
	overflow: hidden;
}

	.why-tile:hover {
		background: var(--ink3);
	}

.why-tile-num {
	font-family: 'DM Serif Display', serif;
	font-size: 5.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--border);
	position: absolute;
	top: 10px;
	right: 18px;
	pointer-events: none;
	transition: color 0.4s;
	font-style: italic;
}

.why-tile:hover .why-tile-num {
	color: rgba(200,151,62,0.12);
}

.why-icon {
	width: 48px;
	height: 48px;
	border: 1px solid var(--border);
	background: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	margin-bottom: 20px;
	transition: border-color 0.3s;
}

.why-tile:hover .why-icon {
	border-color: var(--gold-line);
}

.why-tile-name {
	font-family: 'DM Serif Display', serif;
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--ivory);
	margin-bottom: 10px;
}

.why-tile-text {
	font-size: 0.82rem;
	color: var(--ivory-fnt);
	line-height: 1.8;
}

/* ════════════════════════════════
   ACCOUNTS
════════════════════════════════ */
.acct-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 60px;
}

.acct-tile {
	background: var(--ink2);
	border: 1px solid var(--border);
	padding: 44px 34px;
	position: relative;
	overflow: hidden;
	transition: border-color 0.3s, box-shadow 0.3s;
}

	.acct-tile:hover {
		border-color: var(--gold-line);
		box-shadow: 0 0 40px rgba(200,151,62,0.06);
	}

	.acct-tile.starred {
		border-top: 2px solid var(--gold);
		background: linear-gradient(160deg, rgba(200,151,62,0.04) 0%, var(--ink2) 60%);
	}

.acct-tier {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.58rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 3px 10px;
	display: inline-block;
	margin-bottom: 24px;
	border: 1px solid var(--border);
	color: var(--ivory-fnt);
}

	.acct-tier.gold-tier {
		border-color: var(--gold-line);
		color: var(--gold);
		background: var(--gold-dim);
	}

.acct-name {
	font-family: 'DM Serif Display', serif;
	font-size: 1.75rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--ivory);
	margin-bottom: 6px;
}

.acct-sub {
	font-size: 0.8rem;
	color: var(--ivory-fnt);
	margin-bottom: 32px;
}

.acct-sep {
	height: 1px;
	background: var(--border);
	margin-bottom: 26px;
}

.acct-specs {
	list-style: none;
	margin-bottom: 36px;
}

.acct-spec {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid var(--border);
}

	.acct-spec:last-child {
		border: none;
	}

.acct-spec-k {
	font-size: 0.82rem;
	color: var(--ivory-fnt);
}

.acct-spec-v {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.76rem;
	font-weight: 500;
	color: var(--ivory-dim);
}

.acct-tile.starred .acct-spec-v {
	color: var(--gold);
}

.acct-cta {
	display: block;
	text-align: center;
	padding: 14px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.65rem;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.3s;
	border: 1px solid var(--border);
	color: var(--ivory-fnt);
	background: transparent;
}

	.acct-cta:hover {
		border-color: var(--gold-line);
		color: var(--ivory);
	}

	.acct-cta.primary-cta {
		background: linear-gradient(135deg, var(--gold), var(--gold-lt));
		color: var(--ink);
		border: none;
		font-weight: 600;
	}

		.acct-cta.primary-cta:hover {
			box-shadow: 0 4px 24px rgba(200,151,62,0.3);
		}

/* ════════════════════════════════
   PLATFORMS
════════════════════════════════ */
.plat-layout {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 64px;
	align-items: center;
	margin-top: 60px;
}

.plat-tabs {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.plat-tab {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 20px;
	cursor: pointer;
	border: 1px solid var(--border);
	background: var(--ink2);
	transition: all 0.3s;
	position: relative;
}

	.plat-tab::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 2px;
		background: var(--gold);
		transform: scaleY(0);
		transition: transform 0.3s;
	}

	.plat-tab.on, .plat-tab:hover {
		background: var(--ink3);
		border-color: var(--gold-line);
	}

		.plat-tab.on::before {
			transform: scaleY(1);
		}

.plat-tab-ico {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	background: var(--ink);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	transition: border-color 0.3s;
}

.plat-tab:hover .plat-tab-ico, .plat-tab.on .plat-tab-ico {
	border-color: var(--gold-line);
}

.plat-tab-info h4 {
	font-family: 'DM Serif Display', serif;
	font-size: 1rem;
	font-weight: 400;
	color: var(--gold);
	margin-bottom: 3px;
}

.plat-tab-info p {
	font-size: 0.76rem;
	color: var(--ivory-fnt);
	line-height: 1.5;
}

/* Chart panel */
.chart-panel {
	background: var(--ink2);
	border: 1px solid var(--border);
	border-top: 1px solid var(--gold-line);
	padding: 30px;
}

.chart-panel-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 8px;
}

.chart-panel-pair {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--gold);
}

.chart-panel-status {
	display: flex;
	align-items: center;
	gap: 5px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.58rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--green);
}

	.chart-panel-status::before {
		content: '';
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--green);
		animation: pulse 1.8s infinite;
	}

.chart-meta {
	display: flex;
	gap: 20px;
	margin-bottom: 18px;
}

.chart-meta-item {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.62rem;
	color: var(--ivory-fnt);
}

	.chart-meta-item span {
		color: var(--green);
	}

.chart-data-row {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.chart-data-pill {
	padding: 7px 14px;
	border: 1px solid var(--border);
	background: var(--ink);
	transition: border-color 0.3s;
}

	.chart-data-pill:hover {
		border-color: var(--gold-line);
	}

	.chart-data-pill .dl {
		font-family: 'IBM Plex Mono', monospace;
		font-size: 0.56rem;
		letter-spacing: 1.5px;
		text-transform: uppercase;
		color: var(--ivory-fnt);
		display: block;
		margin-bottom: 2px;
	}

	.chart-data-pill .dv {
		font-family: 'IBM Plex Mono', monospace;
		font-size: 0.76rem;
		color: var(--gold);
		font-weight: 500;
	}

/* ════════════════════════════════
   HOW IT WORKS
════════════════════════════════ */
.steps-row {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	margin-top: 60px;
}

.step-tile {
	background: var(--ink2);
	padding: 48px 28px;
	transition: background 0.3s;
	position: relative;
}

	.step-tile:hover {
		background: var(--ink3);
	}

.step-counter {
	font-family: 'DM Serif Display', serif;
	font-size: 5rem;
	font-weight: 400;
	font-style: italic;
	line-height: 1;
	color: var(--ink4);
	margin-bottom: 24px;
	display: block;
	transition: color 0.4s;
}

.step-tile:hover .step-counter {
	color: rgba(200,151,62,0.15);
}

.step-gold-line {
	width: 36px;
	height: 1px;
	background: var(--gold);
	margin-bottom: 20px;
}

.step-tile-name {
	font-family: 'DM Serif Display', serif;
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--ivory);
	margin-bottom: 10px;
}

.step-tile-text {
	font-size: 0.8rem;
	color: var(--ivory-fnt);
	line-height: 1.8;
}

/* ════════════════════════════════
   CTA BAND
════════════════════════════════ */
.cta-band {
	background: var(--ink2);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
	padding: 110px 56px;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 80px;
	align-items: center;
	position: relative;
	overflow: hidden;
}

	.cta-band::before {
		content: '';
		position: absolute;
		top: -150px;
		left: -150px;
		width: 500px;
		height: 500px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(200,151,62,0.05) 0%, transparent 70%);
		pointer-events: none;
	}

	.cta-band::after {
		content: '';
		position: absolute;
		bottom: -100px;
		right: -100px;
		width: 350px;
		height: 350px;
		border-radius: 50%;
		background: radial-gradient(circle, rgba(200,151,62,0.04) 0%, transparent 70%);
		pointer-events: none;
	}

.cta-wordmark {
	position: absolute;
	bottom: -20px;
	right: 40px;
	font-family: 'DM Serif Display', serif;
	font-size: 7rem;
	font-style: italic;
	font-weight: 400;
	color: rgba(200,151,62,0.04);
	pointer-events: none;
	white-space: nowrap;
	letter-spacing: -2px;
}

.cta-left {
	position: relative;
	z-index: 1;
}

.cta-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 20px;
}

	.cta-eyebrow::before {
		content: '◆';
		font-size: 0.45rem;
	}

.cta-h {
	font-family: 'DM Serif Display', serif;
	font-size: clamp(2.4rem, 4.5vw, 4.2rem);
	font-weight: 400;
	line-height: 1.05;
	margin-bottom: 20px;
}

	.cta-h em {
		font-style: italic;
		color: var(--gold);
	}

.cta-p {
	font-size: 0.95rem;
	color: var(--ivory-mut);
	line-height: 1.9;
	font-weight: 300;
}

.cta-right {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cta-stat-strip {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	margin-top: 4px;
}

.cta-stat-box {
	background: var(--ink2);
	padding: 18px 16px;
	text-align: center;
}

.cta-sv {
	font-family: 'DM Serif Display', serif;
	font-size: 1.6rem;
	color: var(--gold);
}

.cta-sl {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.52rem;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--ivory-fnt);
	margin-top: 2px;
}

/* ════════════════════════════════
   FOOTER
════════════════════════════════ */
footer {
	background: var(--ink);
	border-top: 1px solid var(--border);
	padding: 68px 56px 36px;
}

.ft-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 52px;
	margin-bottom: 52px;
	padding-bottom: 52px;
	border-bottom: 1px solid var(--border);
}

.ft-brand-name {
	font-family: 'DM Serif Display', serif;
	font-size: 1.3rem;
	color: var(--ivory);
	margin-bottom: 14px;
}

	.ft-brand-name em {
		font-style: italic;
		color: var(--gold);
	}

.ft-brand-desc {
	font-size: 0.82rem;
	color: var(--ivory-fnt);
	line-height: 1.85;
	max-width: 280px;
	margin-bottom: 20px;
}

.ft-trust-chips {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.ft-chip {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.55rem;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 4px 10px;
	border: 1px solid var(--border);
	color: var(--ivory-fnt);
	transition: all 0.3s;
}

	.ft-chip.gold-chip {
		border-color: var(--gold-line);
		color: var(--gold);
	}

	.ft-chip:hover {
		border-color: var(--gold-line);
		color: var(--ivory-mut);
	}

.ft-col-head {
	font-family: 'IBM Plex Mono', monospace;
	font-size: 0.6rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 20px;
}

.ft-col-links {
	list-style: none;
}

	.ft-col-links li {
		margin-bottom: 10px;
	}

	.ft-col-links a {
		font-size: 0.82rem;
		color: var(--ivory-fnt);
		text-decoration: none;
		transition: color 0.25s;
	}

		.ft-col-links a:hover {
			color: var(--ivory);
		}

.ft-bottom {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	flex-wrap: wrap;
}

.ft-risk {
	font-size: 0.68rem;
	color: var(--ink5);
	line-height: 1.8;
	max-width: 640px;
}

	.ft-risk strong {
		color: var(--ink5);
		filter: brightness(1.5);
	}

.ft-copy {
	font-size: 0.68rem;
	color: var(--ink5);
	text-align: right;
	line-height: 1.7;
	flex-shrink: 0;
}

	.ft-copy span {
		color: var(--gold);
		opacity: 0.5;
	}

/* ════════════════════════════════
   SCROLL REVEAL
════════════════════════════════ */
.sr {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

	.sr.in {
		opacity: 1;
		transform: translateY(0);
	}

.sr-d1 {
	transition-delay: 0.05s;
}

.sr-d2 {
	transition-delay: 0.12s;
}

.sr-d3 {
	transition-delay: 0.19s;
}

.sr-d4 {
	transition-delay: 0.26s;
}

/* ════════════════════════════════
   RESPONSIVE
════════════════════════════════ */
@media(max-width:1100px) {
	.hero-body {
		grid-template-columns: 1fr;
		gap: 60px;
	}

	.hero-right {
		padding-left: 0;
	}

	.mkt-grid {
		grid-template-columns: 1fr 1fr;
	}

	.why-grid {
		grid-template-columns: 1fr 1fr;
	}

	.acct-grid {
		grid-template-columns: 1fr;
		max-width: 460px;
	}

	.plat-layout {
		grid-template-columns: 1fr;
	}

	.ft-top {
		grid-template-columns: 1fr 1fr;
	}

	.cta-band {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	.numbers-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media(max-width:768px) {
	nav {
		padding: 0 20px;
	}

	.nav-menu {
		display: none;
	}

	.mob-nav-btn {
		display: block;
	}

	.hero-body, .section, .cta-band, footer {
		padding-left: 20px;
		padding-right: 20px;
	}

	.mkt-grid, .why-grid, .steps-row {
		grid-template-columns: 1fr;
	}

	.acct-grid {
		max-width: 100%;
		grid-template-columns: 1fr;
	}

	.ft-top {
		grid-template-columns: 1fr;
	}

	.numbers-row {
		grid-template-columns: repeat(2, 1fr);
	}

	.cta-band {
		padding-top: 70px;
		padding-bottom: 70px;
	}
}