/* ==========================================================================
   My Crypto Locker - public landing theme
   Dark fintech: navy/black ground, electric-blue + gold accents taken from the
   logo, glass surfaces, aurora glow, animated ticker and scroll reveals.
   Self-contained: no CSS framework, no external images.
   ========================================================================== */

:root {
	/* brand ------------------------------------------------------------- */
	--blue: #2ea8ff;
	--blue-deep: #1668d8;
	--gold: #f7b13c;
	--gold-deep: #d98816;
	--grad-brand: linear-gradient(135deg, #2ea8ff, #1668d8);
	--grad-gold: linear-gradient(135deg, #ffd479, #e5941c);
	--grad-text: linear-gradient(100deg, #7fd0ff 0%, #2ea8ff 42%, #ffc65c 100%);

	/* ground ------------------------------------------------------------ */
	--bg: #05080f;
	--bg-2: #080d1a;
	--panel: rgba(255, 255, 255, .038);
	--panel-2: rgba(255, 255, 255, .06);
	--stroke: rgba(255, 255, 255, .09);
	--stroke-2: rgba(255, 255, 255, .16);

	/* ink --------------------------------------------------------------- */
	--ink: #e9eefc;
	--ink-dim: #97a3bd;
	--ink-faint: #66708a;

	--up: #23d18b;
	--down: #ff5f6d;

	--r: 14px;
	--r-lg: 22px;
	--container: 1220px;
	--f-head: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
	--f-body: "Inter", "Segoe UI", system-ui, sans-serif;
	--f-mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.6;
	/* `clip`, not `hidden`. overflow-x:hidden turns the body into a scroll
	   container, which makes `position: sticky` inside it stick to the body
	   rather than the viewport - on mobile browsers that leaves the header
	   mispositioned or cut off. `clip` gives the same safety net against stray
	   horizontal overflow without creating a scroll container. */
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-decoration: none; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4 { font-family: var(--f-head); font-weight: 600; line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.02em; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 22px; }

.grad-text {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ============================ ambient background ========================= */
/* Aurora blobs + dot grid live behind everything and drift slowly, so no
   section ever sits on flat black. */
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.blob-1 { width: 620px; height: 620px; top: -220px; left: -160px; background: radial-gradient(circle, #1668d8, transparent 68%); animation: drift 22s ease-in-out infinite; }
.blob-2 { width: 540px; height: 540px; top: 8%; right: -200px; background: radial-gradient(circle, #b9761a, transparent 68%); opacity: .34; animation: drift 27s ease-in-out infinite reverse; }
.blob-3 { width: 700px; height: 700px; top: 52%; left: 26%; background: radial-gradient(circle, #123f8a, transparent 70%); opacity: .3; animation: drift 34s ease-in-out infinite; }

@keyframes drift {
	0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
	50%      { transform: translate3d(60px, -50px, 0) scale(1.12); }
}

.ambient-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 30%, transparent 78%);
	mask-image: radial-gradient(ellipse 90% 62% at 50% 0%, #000 30%, transparent 78%);
}

.page { position: relative; z-index: 1; }

/* ================================ header ================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	transition: background .25s, border-color .25s, backdrop-filter .25s;
	border-bottom: 1px solid transparent;
}
.site-header.stuck {
	background: rgba(5, 8, 15, .78);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-bottom-color: var(--stroke);
}
.site-header .container { display: flex; align-items: center; gap: 16px; min-height: 74px; }

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand img { height: 42px; width: auto; filter: drop-shadow(0 3px 12px rgba(46, 168, 255, .45)); }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--f-head); font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; }
.brand-tag { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; }

.nav { display: flex; align-items: center; gap: 2px; margin-left: 26px; list-style: none; padding: 0; }
.nav a {
	display: block;
	padding: 8px 13px;
	color: var(--ink-dim);
	font-size: 14.5px;
	font-weight: 500;
	border-radius: 9px;
	transition: color .18s, background .18s;
}
.nav a:hover, .nav a.active { color: #fff; background: var(--panel-2); }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.nav-toggle {
	display: none;
	background: var(--panel-2);
	border: 1px solid var(--stroke);
	color: var(--ink);
	border-radius: 10px;
	width: 40px;
	height: 40px;
	font-size: 19px;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

/* ================================ buttons ================================ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: 11px;
	font-family: var(--f-body);
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .16s, box-shadow .16s, background .16s, border-color .16s;
}
.btn:hover { transform: translateY(-2px); }

.btn-primary { background: var(--grad-brand); box-shadow: 0 8px 26px rgba(30, 128, 232, .38); }
.btn-primary:hover { box-shadow: 0 12px 34px rgba(30, 128, 232, .52); }

.btn-gold { background: var(--grad-gold); color: #241603; box-shadow: 0 8px 26px rgba(226, 152, 32, .32); }
.btn-gold:hover { box-shadow: 0 12px 34px rgba(226, 152, 32, .46); }

.btn-ghost { background: var(--panel); border-color: var(--stroke-2); color: var(--ink); }
.btn-ghost:hover { background: var(--panel-2); border-color: var(--blue); color: #fff; }

.btn-lg { padding: 15px 30px; font-size: 15.5px; border-radius: 13px; }
.btn-sm { padding: 9px 16px; font-size: 13.5px; border-radius: 9px; }

/* ============================= section frame ============================= */

.section { padding: 84px 0; position: relative; }
.section-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.section-head.left { margin-left: 0; text-align: left; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 1px solid var(--stroke-2);
	border-radius: 999px;
	background: var(--panel);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--blue);
	margin-bottom: 18px;
}
.eyebrow i { font-size: 13px; }

.section-head h2 { font-size: 42px; margin-bottom: 14px; }
.section-head p { color: var(--ink-dim); font-size: 17px; margin: 0; }

/* ================================= hero ================================== */

.hero { padding: 66px 0 54px; }
/* minmax(0,…) rather than a bare fr: an auto-floored track takes its width from
   the widest unbreakable thing inside (the balance-card rows), which pushed the
   hero wider than the viewport on phones. */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 56px; align-items: center; }

.hero h1 { font-size: 66px; font-weight: 700; letter-spacing: -.035em; margin-bottom: 22px; }
.hero h1 span { display: block; }
.hero-lead { font-size: 18.5px; color: var(--ink-dim); max-width: 520px; margin-bottom: 30px; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 34px; }

.hero-trust { display: flex; gap: 26px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-dim); }
.trust-item i { color: var(--up); font-size: 16px; }

/* --- glass balance card ------------------------------------------------- */
.hero-visual { position: relative; min-width: 0; }

.glass {
	position: relative;
	background: linear-gradient(160deg, rgba(255, 255, 255, .085), rgba(255, 255, 255, .025));
	border: 1px solid var(--stroke);
	border-radius: var(--r-lg);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
}

.balance-card { padding: 26px; animation: float 7s ease-in-out infinite; }
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-14px); }
}

.bc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.bc-label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.bc-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--up); }
.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 rgba(35, 209, 139, .7); animation: pulse 2s infinite; }
@keyframes pulse {
	70%  { box-shadow: 0 0 0 9px rgba(35, 209, 139, 0); }
	100% { box-shadow: 0 0 0 0 rgba(35, 209, 139, 0); }
}

.bc-value { font-family: var(--f-head); font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.bc-value small { font-size: 22px; color: var(--ink-faint); font-weight: 500; }
.bc-delta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--up); }

/* mini chart drawn with CSS bars - no chart library needed */
.bc-chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin: 24px 0 20px; }
.bc-chart span {
	flex: 1;
	border-radius: 4px 4px 2px 2px;
	background: linear-gradient(180deg, var(--blue), rgba(46, 168, 255, .12));
	transform-origin: bottom;
	animation: growBar .9s cubic-bezier(.2, .8, .3, 1) backwards;
}
.bc-chart span:last-child { background: linear-gradient(180deg, #ffd479, rgba(247, 177, 60, .15)); }
@keyframes growBar { from { transform: scaleY(.05); opacity: 0; } }

.bc-rows { border-top: 1px solid var(--stroke); padding-top: 16px; display: grid; gap: 11px; }
.bc-row { display: flex; align-items: center; gap: 11px; font-size: 13.5px; min-width: 0; }
.bc-row .name { color: var(--ink-dim); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-row .amt { font-family: var(--f-mono); font-size: 13px; }

/* floating coin orbs */
.orb {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-family: var(--f-head);
	font-weight: 700;
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
	z-index: 2;
}
.orb-1 { width: 62px; height: 62px; font-size: 15px; top: -40px; left: -40px; background: linear-gradient(140deg, #f7931a, #c76f08); animation: float 6s ease-in-out infinite .4s; }
.orb-2 { width: 50px; height: 50px; font-size: 12px; bottom: 30px; left: -34px; background: linear-gradient(140deg, #7b8cf0, #4557c4); animation: float 8s ease-in-out infinite 1.1s; }
.orb-3 { width: 44px; height: 44px; font-size: 10px; top: 30%; right: -26px; background: linear-gradient(140deg, #2ec08a, #16855c); animation: float 7.5s ease-in-out infinite .7s; }

/* ================================ ticker ================================= */

.ticker {
	border-top: 1px solid var(--stroke);
	border-bottom: 1px solid var(--stroke);
	background: rgba(255, 255, 255, .02);
	overflow: hidden;
	padding: 13px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.tick { display: flex; align-items: center; gap: 9px; padding: 0 26px; font-size: 14px; white-space: nowrap; }
.tick b { font-family: var(--f-head); font-weight: 600; }
.tick .px { font-family: var(--f-mono); font-size: 13px; color: var(--ink-dim); }
.tick .chg { font-size: 12.5px; font-weight: 600; }
.chg.up { color: var(--up); }
.chg.down { color: var(--down); }

/* ================================= stats ================================= */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { padding: 26px 24px; text-align: center; border-radius: var(--r); background: var(--panel); border: 1px solid var(--stroke); }
.stat-num { font-family: var(--f-head); font-size: 38px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.stat-label { font-size: 13.5px; color: var(--ink-dim); margin-top: 9px; }

/* =============================== feature grid ============================ */

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }

.card {
	position: relative;
	padding: 28px 26px;
	border-radius: var(--r);
	background: var(--panel);
	border: 1px solid var(--stroke);
	overflow: hidden;
	transition: transform .22s, border-color .22s, background .22s;
}
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(46, 168, 255, .13), transparent 62%);
	opacity: 0;
	transition: opacity .25s;
	pointer-events: none;
}
.card:hover { transform: translateY(-5px); border-color: var(--stroke-2); background: var(--panel-2); }
.card:hover::after { opacity: 1; }

.card-icon {
	width: 50px;
	height: 50px;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #fff;
	margin-bottom: 18px;
	background: var(--grad-brand);
	box-shadow: 0 8px 22px rgba(30, 128, 232, .3);
}
.card-icon.gold { background: var(--grad-gold); color: #241603; box-shadow: 0 8px 22px rgba(226, 152, 32, .28); }
.card-icon.green { background: linear-gradient(135deg, #2ee0a0, #12986a); box-shadow: 0 8px 22px rgba(24, 168, 118, .28); }
.card-icon.violet { background: linear-gradient(135deg, #9d7bff, #6435d6); box-shadow: 0 8px 22px rgba(108, 62, 214, .28); }
.card-icon.rose { background: linear-gradient(135deg, #ff7d8d, #d8384f); box-shadow: 0 8px 22px rgba(211, 60, 82, .28); }
.card-icon.cyan { background: linear-gradient(135deg, #4fe3e3, #14a0b8); box-shadow: 0 8px 22px rgba(22, 158, 181, .28); }

.card h3 { font-size: 19px; margin-bottom: 9px; }
.card p { color: var(--ink-dim); font-size: 14.5px; margin: 0; }

/* ============================== how it works ============================= */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; position: relative; }
.step { padding: 30px 26px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--stroke); position: relative; }
.step-n {
	font-family: var(--f-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--blue);
	margin-bottom: 14px;
}
.step-n::before { content: ""; display: block; width: 40px; height: 3px; border-radius: 2px; background: var(--grad-brand); margin-bottom: 14px; }
.step h3 { font-size: 19px; }
.step p { color: var(--ink-dim); font-size: 14.5px; margin: 0; }

/* ================================= plans ================================= */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan {
	display: flex;
	flex-direction: column;
	padding: 30px 27px;
	border-radius: var(--r-lg);
	background: var(--panel);
	border: 1px solid var(--stroke);
	transition: transform .22s, border-color .22s;
}
.plan:hover { transform: translateY(-5px); border-color: var(--stroke-2); }
.plan.featured {
	background: linear-gradient(170deg, rgba(46, 168, 255, .16), rgba(255, 255, 255, .03));
	border-color: rgba(46, 168, 255, .45);
	box-shadow: 0 22px 60px rgba(22, 104, 216, .22);
}
/* reserve the badge's height on the other tiers so all three headings line up */
.plan:not(.featured)::before { content: ""; display: block; height: 40px; }
.plan-badge {
	align-self: flex-start;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--grad-gold);
	color: #241603;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.plan h3 { font-size: 21px; margin-bottom: 4px; }
.plan-sub { color: var(--ink-faint); font-size: 13.5px; margin-bottom: 20px; }
.plan-rate { font-family: var(--f-head); font-size: 44px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.plan-rate small { font-size: 15px; color: var(--ink-dim); font-weight: 500; letter-spacing: 0; }
.plan-range { font-size: 13.5px; color: var(--ink-dim); margin: 10px 0 22px; }
.plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; flex: 1; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-dim); }
.plan li i { color: var(--up); font-size: 15px; margin-top: 3px; flex: 0 0 auto; }

/* ================================= rates ================================= */

.rates-wrap { border-radius: var(--r-lg); border: 1px solid var(--stroke); background: rgba(255, 255, 255, .026); overflow: hidden; }
.rates-scroll { overflow-x: auto; }
.rates { width: 100%; border-collapse: collapse; min-width: 760px; }
.rates th, .rates td { padding: 15px 20px; text-align: left; white-space: nowrap; }
.rates thead th {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink-faint);
	background: rgba(255, 255, 255, .03);
	border-bottom: 1px solid var(--stroke);
}
.rates tbody tr { border-bottom: 1px solid rgba(255, 255, 255, .05); transition: background .18s; }
.rates tbody tr:last-child { border-bottom: 0; }
.rates tbody tr:hover { background: rgba(46, 168, 255, .05); }

.coin { display: flex; align-items: center; gap: 12px; }
.coin-badge {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-family: var(--f-head);
	font-size: 10px; font-weight: 700;
	letter-spacing: -.3px;
	color: #fff;
	overflow: hidden;
	flex: 0 0 auto;
	box-shadow: 0 5px 16px rgba(0, 0, 0, .45);
}
.coin-name { font-weight: 600; font-size: 14.5px; }
.coin-net { font-size: 12px; color: var(--ink-faint); }
.num { text-align: right; font-family: var(--f-mono); font-size: 13.5px; }
.rates th.num { font-family: var(--f-body); }

.pill {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
}
.pill.up { background: rgba(35, 209, 139, .13); color: var(--up); }
.pill.down { background: rgba(255, 95, 109, .13); color: var(--down); }

.spark { display: block; }

.rates-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap;
	padding: 16px 20px;
	border-top: 1px solid var(--stroke);
	background: rgba(255, 255, 255, .02);
	font-size: 13px;
	color: var(--ink-faint);
}

/* ================================== split ================================ */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.split h2 { font-size: 38px; margin-bottom: 16px; }
.split p { color: var(--ink-dim); }
.split-list { list-style: none; margin: 24px 0 30px; padding: 0; display: grid; gap: 14px; }
.split-list li { display: flex; gap: 13px; }
.split-list i { color: var(--blue); font-size: 18px; margin-top: 2px; flex: 0 0 auto; }
.split-list b { display: block; font-family: var(--f-head); font-size: 15.5px; margin-bottom: 2px; }
.split-list span { color: var(--ink-dim); font-size: 14.5px; }

/* referral tree diagram, drawn with divs */
.tree { padding: 34px 26px; border-radius: var(--r-lg); }
.tree-row { display: flex; justify-content: center; gap: 16px; }
.tree-node {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 74px; height: 74px;
	border-radius: 18px;
	background: var(--panel-2);
	border: 1px solid var(--stroke-2);
	font-size: 11px;
	color: var(--ink-dim);
}
.tree-node i { font-size: 20px; margin-bottom: 3px; }
.tree-node.root { background: var(--grad-brand); border-color: transparent; color: #fff; box-shadow: 0 10px 30px rgba(30, 128, 232, .4); }
.tree-node.gold { border-color: rgba(247, 177, 60, .5); color: var(--gold); }
.tree-link { width: 2px; height: 30px; background: linear-gradient(180deg, var(--blue), transparent); margin: 0 auto; }
.tree-earn {
	margin-top: 26px;
	padding: 16px 20px;
	border-radius: var(--r);
	background: rgba(247, 177, 60, .09);
	border: 1px solid rgba(247, 177, 60, .28);
	text-align: center;
}
.tree-earn b { font-family: var(--f-head); font-size: 36px; font-weight: 700; line-height: 1.1; color: var(--gold); display: block; }
.tree-earn span { font-size: 13px; color: var(--ink-dim); }

/* ================================== faq ================================== */

.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 12px; }
.qa { border-radius: var(--r); background: var(--panel); border: 1px solid var(--stroke); overflow: hidden; }
.qa summary {
	list-style: none;
	cursor: pointer;
	padding: 19px 22px;
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--f-head);
	font-size: 16.5px;
	font-weight: 500;
	color: var(--ink);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
	content: "\002B";
	margin-left: auto;
	font-size: 21px;
	color: var(--blue);
	transition: transform .22s;
	line-height: 1;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa[open] { border-color: var(--stroke-2); }
.qa-body { padding: 0 22px 20px 22px; color: var(--ink-dim); font-size: 14.5px; }
.qa-body p:last-child { margin: 0; }

/* ================================ cta band =============================== */

.cta-band {
	position: relative;
	padding: 60px 48px;
	border-radius: 28px;
	text-align: center;
	overflow: hidden;
	background: linear-gradient(140deg, rgba(46, 168, 255, .2), rgba(247, 177, 60, .13));
	border: 1px solid var(--stroke-2);
}
.cta-band::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 130%, rgba(46, 168, 255, .4), transparent 62%);
	pointer-events: none;
}
.cta-band > * { position: relative; }
.cta-band h2 { font-size: 42px; margin-bottom: 14px; }
.cta-band p { color: var(--ink-dim); font-size: 17px; max-width: 560px; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ================================= footer ================================ */

.site-footer { border-top: 1px solid var(--stroke); background: rgba(0, 0, 0, .35); margin-top: 30px; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding: 60px 0 42px; }
.footer-brand p { color: var(--ink-dim); font-size: 14.5px; max-width: 300px; margin: 18px 0 20px; }
.socials { display: flex; gap: 10px; }
.socials a {
	width: 38px; height: 38px;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	background: var(--panel);
	border: 1px solid var(--stroke);
	color: var(--ink-dim);
	font-size: 17px;
	transition: color .18s, border-color .18s, transform .18s;
}
.socials a:hover { color: #fff; border-color: var(--blue); transform: translateY(-2px); }

.footer-col h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--ink-dim); font-size: 14.5px; }
.footer-col a:hover { color: #fff; }

.footer-coins {
	display: flex; align-items: center; justify-content: space-between;
	gap: 18px; flex-wrap: wrap;
	padding: 18px 0;
	border-top: 1px solid var(--stroke);
}
.coin-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.coin-strip .coin-badge { width: 28px; height: 28px; font-size: 8.5px; }
.secure-badge { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--up); }

.footer-bottom {
	display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
	padding: 18px 0 30px;
	border-top: 1px solid var(--stroke);
	font-size: 13px;
	color: var(--ink-faint);
}
.footer-bottom a { color: var(--ink-faint); }
.footer-bottom a:hover { color: var(--ink-dim); }

.risk-note {
	padding: 16px 0 34px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--ink-faint);
	max-width: 900px;
}

/* ============================== scroll reveal ============================ */

/* Only hide revealables once JS has confirmed it can show them again - the
   .js-reveal flag is set by an inline script in <head>. Without JS the
   content simply renders, rather than staying stuck at opacity 0. */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .8, .3, 1), transform .7s cubic-bezier(.2, .8, .3, 1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.js-reveal .reveal { opacity: 1; transform: none; }
	html { scroll-behavior: auto; }
}

/* =============================== responsive ============================== */

/* Eight nav links plus the header actions only just fit - tighten them up
   before the menu collapses at 1100px. */
@media (max-width: 1240px) {
	.nav { margin-left: 14px; }
	.nav a { padding: 8px 9px; font-size: 14px; white-space: nowrap; }
}

@media (max-width: 1100px) {
	.nav { display: none; }
	.nav-toggle { display: flex; }
	.hero h1 { font-size: 54px; }
	.footer-top { grid-template-columns: 1fr 1fr 1fr; }
	.footer-brand { grid-column: 1 / -1; }
}

/* slide-down mobile menu */
.mobile-menu {
	display: none;
	padding: 10px 0 22px;
	border-top: 1px solid var(--stroke);
	background: rgba(5, 8, 15, .96);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}
.site-header.open .mobile-menu { display: block; }

/* The panel lives inside .site-header, so it was picking up that header's
   `.container { display:flex; min-height:74px }` and laying the link list and
   the buttons out side by side instead of stacked. */
.mobile-menu .container { display: block; min-height: 0; gap: 0; }

.mobile-menu ul { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 2px; }
.mobile-menu a { display: block; padding: 11px 14px; border-radius: 10px; color: var(--ink-dim); font-weight: 500; }
.mobile-menu a:hover, .mobile-menu a.active { background: var(--panel-2); color: #fff; }
.mobile-actions { display: grid; gap: 10px; }
/* re-assert the button shape: `.mobile-menu a` above out-specifies `.btn` and
   would otherwise flatten these two into plain block links */
.mobile-menu .btn { display: inline-flex; width: 100%; padding: 12px 22px; }
.mobile-menu .btn:hover { transform: none; }

@media (max-width: 960px) {
	.plan:not(.featured)::before { display: none; }
	.section { padding: 62px 0; }
	.section-head h2, .cta-band h2 { font-size: 32px; }
	.hero { padding: 40px 0; }
	.hero-grid { grid-template-columns: minmax(0, 1fr); gap: 46px; }
	.hero h1 { font-size: 44px; }
	.hero-lead { font-size: 17px; }
	.hero-visual { max-width: 430px; margin: 0 auto; }
	.stats { grid-template-columns: repeat(2, 1fr); }
	.grid-3, .steps, .plans { grid-template-columns: 1fr; }
	.split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.split h2 { font-size: 30px; }
	.cta-band { padding: 44px 26px; }
	.footer-top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
	/* On a phone the bar carries its own ground at all times. It used to be
	   fully transparent until .stuck kicked in past 10px of scroll, so at the
	   top of the page there was no header to see and page content slid straight
	   under the brand and the burger - it read as the header disappearing and
	   then reappearing on scroll. */
	/* .stuck is matched too, otherwise its 0-2-0 selector would win once you
	   scroll and shift the bar from .92 to .78 - a visible change mid-scroll.
	   The background is fully opaque and the blur is switched off: a
	   backdrop-filter on a sticky element is a known source of clipping and
	   compositing artefacts on mobile browsers, and with an opaque bar there is
	   nothing showing through for it to blur anyway. */
	.site-header,
	.site-header.stuck {
		background: #070b14;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
		border-bottom-color: var(--stroke);
	}

	.site-header .container { min-height: 62px; gap: 10px; }

	/* Nothing in the bar may be squeezed or wrapped out of view; the brand is
	   the only part allowed to give up space. */
	.header-actions { gap: 8px; flex: 0 0 auto; flex-wrap: nowrap; }
	.header-actions > .btn-ghost { display: none; }
	.header-actions > .btn { padding: 9px 13px; font-size: 13px; flex: 0 0 auto; }
	.nav-toggle { flex: 0 0 auto; }
	.brand { min-width: 0; overflow: hidden; }

	/* the panel is opaque for the same reason as the bar */
	.mobile-menu {
		background: #070b14;
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	.brand img { height: 34px; }
	.brand-name { font-size: 15.5px; }
	.section { padding: 52px 0; }
	.section-head { margin-bottom: 34px; }
}

/* Below this the wordmark, the CTA and the burger stop fitting together, and
   the logo alone still identifies the site. */
@media (max-width: 420px) {
	.brand-text { display: none; }
}

@media (max-width: 560px) {
	.hero h1 { font-size: 35px; }
	.section-head h2, .cta-band h2 { font-size: 27px; }
	.section-head p { font-size: 15.5px; }
	.bc-value { font-size: 34px; }
	.stats { grid-template-columns: 1fr; }
	.footer-top { grid-template-columns: 1fr; }
	.hero-cta { gap: 10px; }
	.hero-cta .btn, .cta-actions .btn { width: 100%; }
	.brand-tag { display: none; }
	.orb-1, .orb-2, .orb-3 { display: none; }

	.hero { padding: 28px 0 34px; }
	.hero-grid { gap: 34px; }
	.hero-lead { font-size: 16px; }
	.hero-trust { gap: 10px 18px; }
	.trust-item { font-size: 13px; }

	.balance-card { padding: 20px 18px; animation: none; }
	.bc-chart { height: 74px; margin: 18px 0 16px; }

	/* four 74px nodes plus gaps came to ~398px, wider than the column */
	.tree { padding: 24px 14px; }
	.tree-row { gap: 8px; flex-wrap: wrap; }
	.tree-node { width: 60px; height: 60px; font-size: 10px; border-radius: 14px; }
	.tree-node i { font-size: 17px; }
	.tree-earn b { font-size: 30px; }

	.cta-band { padding: 34px 20px; }
	.footer-coins { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* Very narrow phones - stop the two-word headline from breaking mid-word. */
@media (max-width: 380px) {
	.hero h1 { font-size: 31px; }
	.section-head h2, .cta-band h2 { font-size: 24px; }
	.bc-value { font-size: 30px; }
	.container { padding: 0 16px; }
}