@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Sora:wght@300;400;500;600;700&display=swap');

/* Status Strip Styles */
.ci-status-strip {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
}

.ci-status-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 14px;
min-width: 0;
position: relative;
padding: 2px 0;
}

.ci-status-row::after {
content: "";
position: absolute;
top: 6px;
left: 52%;
width: 2px;
height: 16px;
background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.95), transparent);
box-shadow: 0 0 10px rgba(56, 189, 248, 0.75);
pointer-events: none;
}

.ci-status-mainline {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}

.ci-status-bolt {
font-size: 14px;
color: #2ad6b5;
font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 20;
line-height: 1;
flex-shrink: 0;
}

.ci-status-bars {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 12px;
color: #2ad6b5;
flex-shrink: 0;
}

.ci-status-bars span {
display: block;
width: 2px;
border-radius: 4px;
background: currentColor;
opacity: 0.9;
animation: ciStatusBars 1.1s ease-in-out infinite;
}

.ci-status-bars span:nth-child(1) { height: 5px; animation-delay: 0s; }
.ci-status-bars span:nth-child(2) { height: 10px; animation-delay: .12s; }
.ci-status-bars span:nth-child(3) { height: 8px; animation-delay: .22s; }
.ci-status-bars span:nth-child(4) { height: 11px; animation-delay: .32s; }

@keyframes ciStatusBars {
0%, 100% { transform: scaleY(0.7); opacity: 0.6; }
50% { transform: scaleY(1); opacity: 1; }
}

.ci-status-stats {
display: flex;
align-items: center;
justify-content: flex-end;
margin-left: auto;
gap: 8px;
white-space: nowrap;
flex-shrink: 0;
text-align: right;
}

.ci-status-stat {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.01em;
}

.ci-status-primary {
transition: opacity 0.22s ease, transform 0.22s ease;
will-change: opacity, transform;
white-space: nowrap;
}

.ci-status-primary.is-swapping {
opacity: 0.2;
transform: translateY(-2px);
}

.ci-status-loader {
position: relative;
width: 100%;
height: 3px;
border-radius: 999px;
background: rgba(87, 116, 162, 0.32);
overflow: hidden;
}

.ci-status-loader-bar {
position: absolute;
top: 0;
bottom: 0;
left: -26%;
width: 26%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(76, 201, 240, 0.05), rgba(96, 165, 250, 0.95) 30%, rgba(196, 112, 255, 0.9) 70%, rgba(42, 214, 181, 0.2));
animation: ciStatusIndeterminate 1.9s ease-in-out infinite;
}

@keyframes ciStatusIndeterminate {
0% { left: -26%; }
100% { left: 100%; }
}

@media (max-width: 640px) {
.ci-status-row {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}

.ci-status-stats {
width: 100%;
justify-content: space-between;
}
}

/* CandleIQ v2.0 — dashboard shell */

:root {
	--ci-left-drawer-width: 286px;
	--ci-right-drawer-width: 429px;
	--ci-bg: #030814;
	--ci-panel: rgba(8, 20, 44, 0.82);
	--ci-panel-2: rgba(12, 28, 60, 0.74);
	--ci-border: rgba(87, 146, 255, 0.22);
	--ci-text-dim: #90a2c5;
	--ci-accent: #2ad6b5;
	--ci-accent-2: #3a86ff;
	--ci-warn: #ffc43d;
}

html,
html, body {
	margin: 0;
	padding: 0;
}

body {
	background: #020617 !important;
	color: #e5edf8;
}

* {
	box-sizing: border-box;
}

.ci-body {
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	background: radial-gradient(1200px 700px at 88% -10%, rgba(59, 130, 246, 0.28), transparent 55%),
		radial-gradient(1000px 700px at -10% 90%, rgba(42, 214, 181, 0.18), transparent 55%),
		var(--ci-bg);
	overflow-x: hidden;
}

.ci-gradient-orb {
	position: fixed;
	border-radius: 999px;
	filter: blur(72px);
	pointer-events: none;
	z-index: 0;
	will-change: transform, opacity, filter;
}

.ci-orb-a {
	width: 480px;
	height: 340px;
	background: radial-gradient(ellipse at center, rgba(0, 255, 179, 0.9), rgba(58, 134, 255, 0.7) 60%, transparent);
	top: 8%;
	left: -8%;
	animation: ciDriftA 18s ease-in-out infinite, ciPulseA 9s ease-in-out infinite;
}

.ci-orb-b {
	width: 560px;
	height: 380px;
	background: radial-gradient(ellipse at center, rgba(100, 160, 255, 0.95), rgba(0, 200, 255, 0.65) 60%, transparent);
	top: -10%;
	right: -10%;
	animation: ciDriftB 21s ease-in-out infinite, ciPulseB 11s ease-in-out infinite reverse;
}

.ci-orb-c {
	width: 420px;
	height: 280px;
	background: radial-gradient(ellipse at center, rgba(255, 196, 61, 0.75), rgba(42, 214, 181, 0.55) 60%, transparent);
	bottom: -8%;
	right: 22%;
	animation: ciDriftC 16s ease-in-out infinite, ciPulseC 8s ease-in-out infinite;
}

.ci-app,
.ci-guest-shell {
	position: relative;
	z-index: 2;
	background: transparent;
}

.ci-scan-line {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 15%;
	width: 1px;
	background: linear-gradient(
		180deg,
		transparent 0%,
		rgba(58, 134, 255, 0.25) 15%,
		rgba(42, 214, 181, 0.55) 40%,
		rgba(58, 134, 255, 0.65) 55%,
		rgba(42, 214, 181, 0.55) 70%,
		rgba(58, 134, 255, 0.25) 85%,
		transparent 100%
	);
	z-index: 1;
	pointer-events: none;
	will-change: left;
	animation: ciScanLine 12s ease-in-out infinite alternate;
}

@keyframes ciScanLine {
	0%   { left: 12%; opacity: 0.5; }
	20%  { opacity: 0.85; }
	50%  { left: 50%; opacity: 0.7; }
	80%  { opacity: 0.85; }
	100% { left: 88%; opacity: 0.5; }
}

.ci-scan-h {
	position: fixed;
	left: 0;
	right: 0;
	height: 1px;
	pointer-events: none;
	z-index: 1;
	will-change: top;
}

.ci-scan-h-a {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(42, 214, 181, 0.25) 15%,
		rgba(42, 214, 181, 0.6) 40%,
		rgba(58, 134, 255, 0.7) 55%,
		rgba(42, 214, 181, 0.6) 70%,
		rgba(42, 214, 181, 0.25) 85%,
		transparent 100%
	);
	animation: ciScanDown 9s linear infinite;
}

.ci-scan-h-b {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(58, 134, 255, 0.25) 15%,
		rgba(58, 134, 255, 0.65) 40%,
		rgba(200, 100, 255, 0.55) 55%,
		rgba(58, 134, 255, 0.65) 70%,
		rgba(58, 134, 255, 0.25) 85%,
		transparent 100%
	);
	animation: ciScanUp 14s linear infinite;
}

@keyframes ciScanDown {
	0%   { top: -2px; opacity: 0; }
	5%   { opacity: 0.7; }
	95%  { opacity: 0.7; }
	100% { top: 100vh; opacity: 0; }
}

@keyframes ciScanUp {
	0%   { top: 100vh; opacity: 0; }
	5%   { opacity: 0.65; }
	95%  { opacity: 0.65; }
	100% { top: -2px; opacity: 0; }
}

.ci-app {
	display: flex;
	min-height: 100vh;
}

.ci-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(1, 8, 23, 0.76);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 30;
}

.ci-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.ci-sidebar {
	width: var(--ci-left-drawer-width);
	background: linear-gradient(180deg, rgba(6, 19, 46, 0.96), rgba(7, 22, 54, 0.88));
	border-right: 1px solid var(--ci-border);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 40;
	transform: translateX(-100%);
	transition: transform 0.28s ease;
}

.ci-sidebar.is-open {
	transform: translateX(0);
}

.ci-right-drawer {
	width: var(--ci-right-drawer-width);
	background: linear-gradient(180deg, rgba(6, 19, 46, 0.96), rgba(7, 22, 54, 0.88));
	border-left: 1px solid var(--ci-border);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: fixed;
	top: 0;
	bottom: 0;
	right: 0;
	z-index: 40;
	display: none;
	transform: translateX(100%);
	transition: transform 0.28s ease;
}

.ci-right-drawer.is-open {
	transform: translateX(0);
}

.ci-right-note {
	font-size: 12px;
	line-height: 1.45;
	color: #bed2f7;
	border: 1px solid rgba(120, 172, 255, 0.22);
	border-radius: 12px;
	padding: 10px 12px;
	background: rgba(11, 27, 61, 0.65);
}

.ci-drawer-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	padding: 2px;
	border-radius: 12px;
	border: 1px solid rgba(120, 172, 255, 0.22);
	background: rgba(11, 27, 61, 0.52);
}

.ci-drawer-tab {
	height: 34px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: transparent;
	color: #9eb6e2;
	font-size: 12px;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ci-drawer-tab:hover {
	color: #e6f0ff;
	border-color: rgba(120, 172, 255, 0.24);
	background: rgba(120, 172, 255, 0.1);
}

.ci-drawer-tab.is-active {
	color: #f1f7ff;
	background: linear-gradient(90deg, rgba(58, 134, 255, 0.32), rgba(42, 214, 181, 0.16));
	border-color: rgba(120, 172, 255, 0.38);
}

.ci-drawer-panel {
	display: none;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	flex: 1;
}

.ci-drawer-panel.is-active {
	display: flex;
}

.ci-drawer-panel-messages {
	padding-bottom: 4px;
}

.ci-right-message-spacer {
	flex: 1;
}

/* Compact chat bar */
.ci-chat-wrap {
	padding-bottom: 2px;
	position: relative;
}

.ci-chat-attach-badge {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	margin-bottom: 6px;
	border-radius: 8px;
	background: rgba(96, 165, 250, 0.1);
	border: 1px solid rgba(96, 165, 250, 0.22);
}

.ci-chat-attach-name {
	flex: 1;
	font-size: 11px;
	color: #7dd3fc;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ci-chat-attach-clear {
	background: none;
	border: none;
	color: #8bacd4;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	line-height: 1;
	transition: color 0.15s ease;
}

.ci-chat-attach-clear:hover {
	color: #ef4444;
}

.ci-chat-bar {
	display: flex;
	align-items: center;
	gap: 6px;
	background: rgba(10, 24, 58, 0.85);
	border: 1px solid rgba(120, 172, 255, 0.18);
	border-radius: 50px;
	padding: 5px 5px 5px 10px;
	backdrop-filter: blur(8px);
}

.ci-chat-icon-btn {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: rgba(120, 172, 255, 0.12);
	color: #93c5fd;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.2s ease;
}

.ci-chat-icon-btn:hover {
	background: rgba(120, 172, 255, 0.22);
}

.ci-chat-icon-btn .material-symbols-rounded {
	font-size: 17px;
}

.ci-chat-input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	font-size: 13px;
	color: #e7efff;
	min-width: 0;
}

.ci-chat-input:focus-visible {
	outline: 2px solid rgba(140, 200, 255, 0.55);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Global keyboard focus ring for buttons and links that don't already have one. */
.ci-landing-primary:focus-visible,
.ci-landing-secondary:focus-visible,
.ci-marathon-btn:focus-visible,
.ci-final-btn:focus-visible,
.ci-logout-btn:focus-visible,
.ci-auth-submit:focus-visible,
.ci-hamburger:focus-visible,
.ci-right-toggle:focus-visible,
.ci-legal-back:focus-visible {
	outline: 2px solid rgba(140, 200, 255, 0.65);
	outline-offset: 3px;
	border-radius: 6px;
}

.ci-chat-input::placeholder {
	color: #6b85aa;
}

.ci-chat-send-btn {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: linear-gradient(135deg, #f59e0b, #ea580c);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.15s ease;
}

.ci-chat-send-btn:hover {
	opacity: 0.88;
	transform: scale(1.06);
}

.ci-chat-send-btn .material-symbols-rounded {
	font-size: 16px;
}

.ci-drawer-toast {
	position: absolute;
	right: 6px;
	bottom: 44px;
	padding: 3px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	opacity: 0;
	transform: translateY(4px);
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	border: 1px solid transparent;
	backdrop-filter: blur(6px);
}

.ci-drawer-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.ci-drawer-toast.is-success {
	color: #d1fae5;
	background: rgba(16, 185, 129, 0.16);
	border-color: rgba(16, 185, 129, 0.4);
}

.ci-drawer-toast.is-error {
	color: #fecaca;
	background: rgba(239, 68, 68, 0.16);
	border-color: rgba(239, 68, 68, 0.4);
}

.ci-right-list {
	margin-top: 2px;
	overflow-y: auto;
	-ms-overflow-style: none;
	scrollbar-width: none;
	padding-right: 2px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 0;
	flex: 1;
}

.ci-right-list::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}

.ci-rh-empty {
	color: #9bb0d6;
	text-align: center;
	padding: 18px 10px;
	font-size: 13px;
	border: 1px dashed rgba(120, 172, 255, 0.28);
	border-radius: 12px;
	background: rgba(10, 28, 63, 0.45);
}

.ci-rh-item {
	border: 1px solid rgba(120, 172, 255, 0.2);
	border-radius: 12px;
	background: rgba(10, 28, 63, 0.58);
	padding: 10px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: all 0.3s ease;
}

.ci-rh-item.htmx-swapping {
	opacity: 0.85;
	transform: scale(0.98);
}

.ci-rh-item.htmx-settling {
	opacity: 1;
	transform: scale(1);
}

.ci-rh-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 8px;
}

.ci-rh-pair {
	margin: 0;
	font-weight: 700;
	color: #eff5ff;
	font-size: 13px;
}

.ci-rh-time {
	font-size: 11px;
	color: #8ea4cc;
	white-space: nowrap;
}

.ci-rh-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.ci-rh-dir,
.ci-rh-confidence,
.ci-rh-outcome {
	font-size: 11px;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-weight: 600;
}

.ci-rh-dir.is-buy {
	color: #34d399;
	border-color: rgba(52, 211, 153, 0.35);
	background: rgba(6, 78, 59, 0.35);
}

.ci-rh-dir.is-sell {
	color: #fb7185;
	border-color: rgba(251, 113, 133, 0.35);
	background: rgba(136, 19, 55, 0.35);
}

.ci-rh-confidence {
	color: #93c5fd;
	border-color: rgba(147, 197, 253, 0.3);
	background: rgba(30, 64, 175, 0.3);
}

.ci-rh-outcome.is-win {
	color: #6ee7b7;
	border-color: rgba(110, 231, 183, 0.36);
	background: rgba(5, 46, 22, 0.42);
}

.ci-rh-outcome.is-loss {
	color: #fda4af;
	border-color: rgba(253, 164, 175, 0.34);
	background: rgba(76, 5, 25, 0.42);
}

.ci-rh-outcome.is-draw,
.ci-rh-outcome.is-pending {
	color: #fde68a;
	border-color: rgba(253, 230, 138, 0.35);
	background: rgba(120, 53, 15, 0.35);
}

.ci-rh-votes .inline-flex {
	width: 100%;
	justify-content: space-between;
}

.ci-rh-votes .inline {
	flex: 1;
}

.ci-rh-votes button {
	width: 100%;
}

.ci-rh-loader {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 12px 10px;
	font-size: 12px;
	color: #8ea4cc;
	border: 1px dashed rgba(120, 172, 255, 0.28);
	border-radius: 12px;
	background: rgba(10, 28, 63, 0.45);
}

.ci-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border: 1px solid rgba(120, 172, 255, 0.23);
	border-radius: 14px;
	background: rgba(11, 27, 61, 0.82);
}

.ci-brand-mark {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	object-fit: contain;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.ci-brand-title {
	font-family: "Exo 2", sans-serif;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: #f6fbff;
	line-height: 1.1;
}

.ci-brand-sub {
	font-size: 11px;
	color: var(--ci-text-dim);
}

.ci-nav {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ci-nav-link {
	text-decoration: none;
	color: #c6d4ef;
	border: 1px solid transparent;
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 14px;
	transition: all 0.2s ease;
	background: rgba(15, 35, 78, 0.18);
}

.ci-nav-link:hover {
	background: rgba(20, 49, 106, 0.45);
	color: #eff6ff;
}

.ci-nav-link.is-active {
	color: #ffd452;
	border-color: rgba(255, 196, 61, 0.45);
	background: linear-gradient(90deg, rgba(255, 196, 61, 0.18), rgba(255, 196, 61, 0.05));
	box-shadow: inset 0 0 0 1px rgba(255, 196, 61, 0.16);
}

.ci-user-card {
	margin-top: auto;
	border: 1px solid rgba(104, 154, 255, 0.25);
	background: rgba(10, 30, 66, 0.72);
	border-radius: 14px;
	padding: 12px;
}

.ci-user-label {
	margin: 0;
	color: var(--ci-text-dim);
	font-size: 11px;
}

.ci-user-name {
	margin: 4px 0 12px;
	font-family: "Exo 2", sans-serif;
	font-weight: 700;
	color: #f2f8ff;
}

.ci-logout-btn {
	width: 100%;
	border: 1px solid rgba(248, 113, 113, 0.45);
	background: rgba(127, 29, 29, 0.28);
	color: #fecaca;
	border-radius: 10px;
	padding: 10px;
	font-size: 13px;
	cursor: pointer;
}

.ci-main-wrap {
	min-width: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}

.ci-topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	background: linear-gradient(90deg, rgba(6, 19, 46, 0.92), rgba(4, 14, 35, 0.72));
	border-bottom: 1px solid var(--ci-border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	min-height: 58px;
}

.ci-topbar-left {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ci-topbar-right {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	flex-wrap: nowrap;
}

#topbar-subscription-summary {
	min-width: 0;
	flex-shrink: 1;
}

#topbar-subscription-summary > a {
	max-width: 100%;
}

@media (max-width: 639px) {
	#topbar-subscription-summary > a {
		padding: 5px 8px;
		gap: 6px;
	}
	#topbar-subscription-summary > a > span:nth-child(2) {
		/* Hide plan name; keep status pill + trial/grace indicators */
		display: none;
	}
	.ci-topbar-title {
		font-size: 14px;
		max-width: 130px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.ci-topbar-right {
		gap: 6px;
	}
}

.ci-topbar-title {
	margin: 0;
	font-size: 15px;
	color: #dbe8ff;
}

.ci-topbar-title span {
	color: #ffd452;
	font-weight: 700;
}

.ci-live-pill {
	font-size: 11px;
	font-weight: 700;
	color: #c8ffef;
	background: rgba(16, 185, 129, 0.24);
	border: 1px solid rgba(16, 185, 129, 0.46);
	border-radius: 999px;
	padding: 5px 10px;
}

.ci-hamburger {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(141, 174, 240, 0.35);
	background: rgba(10, 28, 63, 0.7);
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 0 9px;
}

.ci-right-toggle {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(141, 174, 240, 0.35);
	background: rgba(10, 28, 63, 0.7);
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 0 9px;
}

.ci-right-toggle span {
	height: 2px;
	width: 100%;
	background: #d9e4fb;
}

.ci-hamburger span {
	height: 2px;
	width: 100%;
	background: #d9e4fb;
}

.ci-main-content {
	width: min(1180px, 100%);
	margin: 28px auto 24px;
	padding: 0 14px 16px;
}

.ci-panel {
	border: 1px solid rgba(255, 255, 255, 0.09);
	background: rgba(10, 22, 50, 0.38);
	backdrop-filter: blur(20px) saturate(1.5);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.ci-guest-nav {
	position: sticky;
	top: 0;
	z-index: 30;
	border-bottom: 1px solid var(--ci-border);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	background: rgba(5, 20, 48, 0.85);
	padding: 12px 20px;
}

.ci-guest-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: "Exo 2", sans-serif;
	color: #cde5ff;
	text-decoration: none;
	font-weight: 700;
}

.ci-guest-brand-logo {
	width: 32px;
	height: 32px;
	object-fit: contain;
	border-radius: 9px;
	padding: 0;
	background: transparent;
	border: 0;
}

.ci-guest-main {
	width: min(980px, 100%);
	margin: 22px auto;
	padding: 0 14px;
}

.ci-landing-page {
	background:
		radial-gradient(1400px 700px at 50% -15%, rgba(255, 176, 0, 0.12), transparent 58%),
		linear-gradient(180deg, #050505 0%, #030303 100%) !important;
}

.ci-galaxy-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background:
		radial-gradient(1100px 620px at 60% -12%, rgba(70, 116, 255, 0.22), transparent 62%),
		radial-gradient(900px 520px at 18% 8%, rgba(255, 153, 0, 0.15), transparent 60%),
		linear-gradient(180deg, #030306 0%, #010205 100%);
}

.ci-galaxy-bg canvas {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	filter: saturate(1.12) contrast(1.08);
	opacity: 0.94;
}

/* ─── Hero card (full viewport, image edge-to-edge) ────── */
.ci-landing-page .ci-landing-hero-card-section {
	position: relative;
	display: block;
	width: 100%;
	min-height: 100dvh;
	padding: 0 !important;
	margin: 0 !important;
	overflow: visible;
	/* Sit above the tour section (which is z-index: 2) so the absolutely
	 * positioned KPI floater that overflows below the hero stays on top
	 * of the next section instead of getting clipped behind it.
	 * Note: hero element carries .ci-landing-hero (z-index:2 via the
	 * landing-page rule above) AND .ci-landing-hero-card-section — so we
	 * need matching specificity (.ci-landing-page chained) to win the
	 * cascade for this z-index. */
	z-index: 10;
}

.ci-landing-hero-card {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	min-height: 100dvh;
	height: 100dvh;
	background: #03060f;
	isolation: isolate;
}

.ci-landing-hero-card-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 65% center;
	display: block;
	filter: saturate(1.04) contrast(1.04);
	z-index: 0;
}

/* Heavy dark mask on the left so copy reads on top of the image,
 * smoothly fading away on the right where the AI figure lives. */
.ci-landing-hero-card-mask {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg,
			rgba(3, 6, 15, 0.96) 0%,
			rgba(3, 6, 15, 0.92) 20%,
			rgba(3, 6, 15, 0.72) 40%,
			rgba(3, 6, 15, 0.32) 58%,
			rgba(3, 6, 15, 0.0) 72%
		),
		linear-gradient(180deg,
			rgba(3, 6, 15, 0.0) 0%,
			rgba(3, 6, 15, 0.0) 65%,
			rgba(3, 6, 15, 0.45) 100%
		);
	pointer-events: none;
}

.ci-landing-hero-card-content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: 100dvh;
	padding: 100px clamp(28px, 8vw, 120px) 64px;
}

.ci-landing-hero-card-copy {
	max-width: 540px;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	animation: ciLandingReveal 0.7s ease both;
}

.ci-landing-hero-card-copy .ci-landing-status {
	margin-bottom: 28px;
}

.ci-landing-status-pill-new {
	background: rgba(255, 176, 0, 0.18);
	border: 1px solid rgba(255, 176, 0, 0.42);
	color: #ffd06b;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	padding: 2px 7px;
	border-radius: 4px;
	margin-right: 6px;
}

.ci-landing-title-card {
	font-size: clamp(2.6rem, 5.6vw, 4.4rem);
	line-height: 1.02;
	margin-bottom: 6px;
}

.ci-landing-blurb-card {
	max-width: 480px;
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(231, 239, 255, 0.78);
	margin-top: 22px;
	text-align: left;
}

.ci-landing-cta-row-left {
	justify-content: flex-start;
	gap: 22px;
	margin-top: 32px;
}

.ci-landing-cta-secondary {
	color: rgba(231, 239, 255, 0.65);
	font-size: 0.92rem;
	text-decoration: none;
	transition: color 160ms ease;
}

.ci-landing-cta-secondary strong {
	color: #ffb000;
	font-weight: 600;
	margin-left: 4px;
}

.ci-landing-cta-secondary:hover {
	color: #f1f7ff;
}

/* On smaller screens, dim the entire image more so the centered copy reads,
 * and move the figure's focal point so she's still partially visible behind. */
@media (max-width: 899px) {
	.ci-landing-hero-card-section {
		padding: 0;
	}
	.ci-landing-hero-card {
		min-height: 100dvh;
		height: 100dvh;
		border-radius: 0;
	}
	.ci-landing-hero-card-content {
		min-height: 100dvh;
		padding: 90px 22px 32px;
		align-items: flex-start;
		justify-content: flex-end;
		flex-direction: column;
	}
	.ci-landing-hero-card-img {
		/* Center the AI figure in the visible mobile crop. */
		object-position: 50% 38%;
	}
	.ci-landing-hero-card-mask {
		background:
			linear-gradient(180deg,
				rgba(3, 6, 15, 0.10) 0%,
				rgba(3, 6, 15, 0.35) 35%,
				rgba(3, 6, 15, 0.85) 70%,
				rgba(3, 6, 15, 0.94) 100%
			);
	}
	.ci-landing-hero-card-copy {
		max-width: 100%;
		align-items: flex-start;
	}
	.ci-landing-cta-row-left {
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 14px;
		margin-top: 26px;
	}
}

/* ─── KPI strip (own section, between hero and tour) ─────── */
.ci-landing-kpi-section {
	position: relative;
	z-index: 2;
	padding: clamp(56px, 8vw, 96px) clamp(24px, 5vw, 80px);
}

.ci-landing-kpi-shell {
	max-width: 1240px;
	margin: 0 auto;
}

.ci-landing-kpi-section .ci-landing-kpis {
	width: 100%;
	margin: 0;
	animation: none;
}

.ci-landing-page .ci-guest-shell,
.ci-landing-page .ci-guest-main,
.ci-landing-page .ci-landing-main,
.ci-landing-page .ci-landing-hero,
.ci-landing-page .ci-landing-kpi-section,
.ci-landing-page .ci-tour-section,
.ci-landing-page .ci-ai-section,
.ci-landing-page .ci-why-section,
.ci-landing-page .ci-marathon-section,
.ci-landing-page .ci-process-section,
.ci-landing-page .ci-edge-section,
.ci-landing-page .ci-final-section {
	position: relative;
	z-index: 2;
}

/* Force every wrapping ancestor on the landing page to be edge-to-edge so
 * the hero (and any other full-bleed section) can truly fill the viewport. */
.ci-landing-page,
.ci-landing-page .ci-guest-shell,
.ci-landing-page .ci-guest-main,
.ci-landing-page .ci-landing-main {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	max-width: none !important;
}

.ci-landing-page .ci-landing-grid,
.ci-landing-page .ci-landing-arc,
.ci-landing-page .ci-landing-particles,
.ci-landing-page .ci-ai-grid,
.ci-landing-page .ci-ai-arc,
.ci-landing-page .ci-ai-sparks,
.ci-landing-page .ci-why-grid,
.ci-landing-page .ci-why-arc,
.ci-landing-page .ci-why-particles,
.ci-landing-page .ci-marathon-grid,
.ci-landing-page .ci-marathon-arc,
.ci-landing-page .ci-marathon-particles,
.ci-landing-page .ci-process-grid,
.ci-landing-page .ci-process-arc,
.ci-landing-page .ci-process-particles,
.ci-landing-page .ci-edge-grid,
.ci-landing-page .ci-edge-arc,
.ci-landing-page .ci-edge-particles,
.ci-landing-page .ci-final-grid,
.ci-landing-page .ci-final-arc,
.ci-landing-page .ci-final-particles {
	display: none;
}

.ci-landing-page .ci-gradient-orb,
.ci-landing-page .ci-scan-line,
.ci-landing-page .ci-scan-h {
	display: none;
}

.ci-landing-nav {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 28px;
	position: fixed;
	top: 12px;
	left: 50%;
	transform: translateX(-50%);
	width: min(1180px, calc(100% - 24px));
	margin: 0;
	padding: 12px 18px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	/* Liquid-glass: heavy blur + saturate, plus a subtle inner highlight. */
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02) 35%, rgba(5, 8, 18, 0.55)),
		rgba(5, 8, 18, 0.35);
	backdrop-filter: blur(24px) saturate(160%);
	-webkit-backdrop-filter: blur(24px) saturate(160%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.10),
		inset 0 -1px 0 rgba(0, 0, 0, 0.35),
		0 12px 40px -12px rgba(0, 0, 0, 0.7);
	z-index: 100;
}

@media (max-width: 640px) {
	.ci-landing-nav {
		top: 8px;
		width: calc(100% - 16px);
		padding: 10px 14px;
		gap: 12px;
	}
}

.ci-landing-brand {
	gap: 12px;
	font-family: "Exo 2", sans-serif;
	font-size: 1.08rem;
	letter-spacing: 0.01em;
	color: #f3f3f3;
	text-transform: uppercase;
}

.ci-landing-brand em {
	font-style: normal;
	font-size: 0.5rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 3px 6px;
	border-radius: 999px;
	background: rgba(255, 176, 0, 0.14);
	color: #ffb000;
	border: 1px solid rgba(255, 176, 0, 0.2);
}

.ci-landing-brand .ci-guest-brand-logo {
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.ci-landing-nav-links {
	display: flex;
	justify-content: center;
	gap: 34px;
	min-width: 0;
}

.ci-landing-nav-links a,
.ci-landing-login,
.ci-landing-signup {
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.ci-landing-nav-links a {
	font-size: 0.72rem;
	color: rgba(255, 255, 255, 0.68);
}

.ci-landing-nav-links a:hover,
.ci-landing-login:hover {
	color: #ffffff;
}

.ci-landing-nav-links a.is-active {
	color: #ffffff;
	position: relative;
}

.ci-landing-nav-links a.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, #ffb000, #ff7a00);
}

/* Center marketing links need room; collapse to brand + actions on narrow
   screens (the footer carries the same links for mobile). */
@media (max-width: 860px) {
	.ci-landing-nav { grid-template-columns: auto 1fr; }
	.ci-landing-nav-links { display: none; }
}

.ci-landing-nav-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	justify-self: end;
}

.ci-landing-login {
	font-size: 0.74rem;
	color: rgba(255, 255, 255, 0.76);
}

.ci-landing-signup {
	padding: 11px 16px;
	border-radius: 10px;
	background: #f4f4f4;
	color: #111111;
	font-weight: 600;
	font-size: 0.74rem;
	box-shadow: 0 10px 24px rgba(255, 255, 255, 0.08);
}

.ci-landing-signup:hover,
.ci-landing-primary:hover,
.ci-landing-secondary:hover {
	transform: translateY(-1px);
}

.ci-landing-main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.ci-landing-kpi-card,
.ci-ai-card,
.ci-why-card,
.ci-marathon-card,
.ci-process-card,
.ci-edge-proof,
.ci-edge-replaced-card,
.ci-final-disclaimer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
	border: 1px solid rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(14px) saturate(1.2);
	-webkit-backdrop-filter: blur(14px) saturate(1.2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 12px 28px rgba(0, 0, 0, 0.24);
	transition:
		transform 0.5s cubic-bezier(0.42, 0, 0.18, 1),
		box-shadow 0.5s cubic-bezier(0.42, 0, 0.18, 1),
		border-color 0.5s cubic-bezier(0.42, 0, 0.18, 1),
		background-color 0.5s cubic-bezier(0.42, 0, 0.18, 1);
}

.ci-landing-kpi-card::before,
.ci-ai-card::before,
.ci-why-card::before,
.ci-marathon-card::before,
.ci-process-card::before,
.ci-edge-proof::before,
.ci-edge-replaced-card::before,
.ci-final-disclaimer::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.02));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s cubic-bezier(0.42, 0, 0.18, 1);
	z-index: 0;
}

.ci-landing-kpi-card > *,
.ci-ai-card > *,
.ci-why-card > *,
.ci-marathon-card > *,
.ci-process-card > *,
.ci-edge-proof > *,
.ci-edge-replaced-card > *,
.ci-final-disclaimer > * {
	position: relative;
	z-index: 1;
}

@media (hover: hover) {
	.ci-landing-kpi-card:hover,
	.ci-ai-card:hover,
	.ci-why-card:hover,
	.ci-marathon-card:hover,
	.ci-process-card:hover,
	.ci-edge-proof:hover,
	.ci-edge-replaced-card:hover,
	.ci-final-disclaimer:hover {
		transform: translateY(-6px);
		border-color: rgba(255, 176, 0, 0.34);
		background-color: rgba(255, 255, 255, 0.015);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 22px 40px rgba(0, 0, 0, 0.32), 0 0 28px rgba(255, 176, 0, 0.1);
	}

	.ci-landing-kpi-card:hover::before,
	.ci-ai-card:hover::before,
	.ci-why-card:hover::before,
	.ci-marathon-card:hover::before,
	.ci-process-card:hover::before,
	.ci-edge-proof:hover::before,
	.ci-edge-replaced-card:hover::before,
	.ci-final-disclaimer:hover::before {
		opacity: 1;
	}
}

.ci-landing-hero {
	position: relative;
	min-height: calc(100vh - 96px);
	overflow: hidden;
	padding: 72px 24px 48px;
}

.ci-landing-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 120px 120px;
	opacity: 0.16;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 92%);
}

.ci-landing-arc {
	position: absolute;
	left: 50%;
	width: 140vw;
	height: 520px;
	border-top: 1px solid rgba(255, 176, 0, 0.12);
	border-radius: 50%;
	transform: translateX(-50%);
	opacity: 0.48;
	pointer-events: none;
}

.ci-landing-arc-a { top: 16px; }
.ci-landing-arc-b { top: 98px; width: 128vw; }
.ci-landing-arc-c { top: 180px; width: 116vw; }

.ci-landing-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ci-landing-particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 176, 0, 0.72);
	box-shadow: 0 0 12px rgba(255, 176, 0, 0.38);
	animation: ciLandingFloat 12s linear infinite;
}

.ci-landing-particles span:nth-child(1) { top: 10%; left: 18%; animation-delay: -2s; }
.ci-landing-particles span:nth-child(2) { top: 16%; left: 64%; animation-delay: -4s; }
.ci-landing-particles span:nth-child(3) { top: 23%; left: 78%; animation-delay: -8s; }
.ci-landing-particles span:nth-child(4) { top: 30%; left: 12%; animation-delay: -6s; }
.ci-landing-particles span:nth-child(5) { top: 36%; left: 86%; animation-delay: -9s; }
.ci-landing-particles span:nth-child(6) { top: 42%; left: 26%; animation-delay: -5s; }
.ci-landing-particles span:nth-child(7) { top: 48%; left: 70%; animation-delay: -7s; }
.ci-landing-particles span:nth-child(8) { top: 55%; left: 14%; animation-delay: -3s; }
.ci-landing-particles span:nth-child(9) { top: 61%; left: 84%; animation-delay: -10s; }
.ci-landing-particles span:nth-child(10) { top: 66%; left: 34%; animation-delay: -6s; }
.ci-landing-particles span:nth-child(11) { top: 73%; left: 72%; animation-delay: -11s; }
.ci-landing-particles span:nth-child(12) { top: 79%; left: 22%; animation-delay: -1s; }
.ci-landing-particles span:nth-child(13) { top: 20%; left: 44%; animation-delay: -12s; }
.ci-landing-particles span:nth-child(14) { top: 28%; left: 57%; animation-delay: -7s; }
.ci-landing-particles span:nth-child(15) { top: 38%; left: 49%; animation-delay: -4s; }
.ci-landing-particles span:nth-child(16) { top: 46%; left: 7%; animation-delay: -9s; }
.ci-landing-particles span:nth-child(17) { top: 51%; left: 92%; animation-delay: -5s; }
.ci-landing-particles span:nth-child(18) { top: 59%; left: 52%; animation-delay: -8s; }
.ci-landing-particles span:nth-child(19) { top: 68%; left: 60%; animation-delay: -2s; }
.ci-landing-particles span:nth-child(20) { top: 76%; left: 90%; animation-delay: -6s; }
.ci-landing-particles span:nth-child(21) { top: 82%; left: 40%; animation-delay: -10s; }
.ci-landing-particles span:nth-child(22) { top: 88%; left: 10%; animation-delay: -7s; }
.ci-landing-particles span:nth-child(23) { top: 90%; left: 68%; animation-delay: -4s; }
.ci-landing-particles span:nth-child(24) { top: 13%; left: 32%; animation-delay: -9s; }

.ci-landing-inner {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-top: 18px;
}

.ci-landing-status {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(255, 176, 0, 0.12);
	background: rgba(255, 176, 0, 0.05);
	font-family: "Exo 2", sans-serif;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgba(255, 255, 255, 0.7);
	text-transform: uppercase;
	margin-bottom: 34px;
}

.ci-landing-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #20d3a5;
	box-shadow: 0 0 14px rgba(32, 211, 165, 0.8);
}

.ci-landing-status-sep {
	color: rgba(255, 176, 0, 0.7);
}

.ci-landing-copy {
	max-width: 880px;
	animation: ciLandingReveal 0.8s ease both;
}

.ci-landing-kicker,
.ci-landing-subhead,
.ci-landing-blurb {
	font-family: "Plus Jakarta Sans", sans-serif;
}

.ci-landing-kicker {
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.56);
	font-size: 1.24rem;
	font-weight: 500;
}

.ci-landing-title {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-weight: 300;
	letter-spacing: -0.05em;
	line-height: 0.95;
	color: #d7dbe6;
	font-size: clamp(3.52rem, 8vw, 6.32rem);
}

.ci-landing-title span,
.ci-landing-title strong {
	display: block;
}

.ci-landing-title strong {
	font-weight: 600;
	color: #ffb000;
	margin-top: 8px;
}

.ci-landing-subhead {
	margin: 30px 0 6px;
	color: rgba(255, 255, 255, 0.76);
	font-size: 1.2rem;
	font-weight: 700;
}

.ci-landing-punch {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-size: clamp(1.12rem, 2.4vw, 1.72rem);
	font-weight: 600;
	color: #ffb000;
}

.ci-landing-blurb {
	max-width: 690px;
	margin: 22px auto 0;
	color: rgba(255, 255, 255, 0.46);
	font-size: 0.82rem;
	line-height: 1.7;
}

.ci-landing-cta-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 34px;
	animation: ciLandingReveal 0.8s ease 0.1s both;
}

.ci-landing-primary,
.ci-landing-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 142px;
	padding: 15px 22px;
	border-radius: 14px;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ci-landing-primary {
	background: #f3f3f3;
	color: #101010;
	box-shadow: 0 16px 34px rgba(255, 255, 255, 0.08);
}

.ci-landing-secondary {
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.02);
	color: #ffffff;
}

.ci-landing-kpis {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	width: min(920px, 100%);
	margin-top: 42px;
	animation: ciLandingReveal 0.8s ease 0.2s both;
}

.ci-landing-kpi-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 18px 16px 14px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
	min-height: 122px;
}

.ci-landing-kpi-icon {
	font-size: 0.9rem;
	color: #ffb000;
}

.ci-landing-kpi-card strong {
	font-family: "Sora", sans-serif;
	font-size: 1.6rem;
	line-height: 1;
	font-weight: 500;
	color: #f5f7fb;
}

.ci-landing-kpi-card span:not(.ci-landing-kpi-icon) {
	font-size: 0.67rem;
	color: rgba(255, 255, 255, 0.48);
}

.ci-landing-kpi-card em {
	font-style: normal;
	font-size: 0.66rem;
	font-weight: 700;
	color: #18d39f;
}

.ci-landing-kpi-card em.is-warn {
	color: #ffb000;
}

.ci-landing-scroll-mark {
	margin-top: 12px;
	font-size: 1.65rem;
	color: rgba(255, 255, 255, 0.5);
	animation: ciLandingBob 2.1s ease-in-out infinite;
}

.ci-ai-section {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: 72px 24px 96px;
	overflow: hidden;
}

.ci-ai-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
	background-size: 126px 126px;
	opacity: 0.2;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 95%);
}

.ci-ai-arc {
	position: absolute;
	left: 50%;
	width: 138vw;
	height: 440px;
	transform: translateX(-50%);
	border-top: 1px solid rgba(255, 176, 0, 0.1);
	border-radius: 50%;
	opacity: 0.42;
	pointer-events: none;
}

.ci-ai-arc-a { top: -46px; }
.ci-ai-arc-b { top: 18px; width: 126vw; }

.ci-ai-sparks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ci-ai-sparks span {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: rgba(255, 208, 0, 0.9);
	box-shadow: 0 0 12px rgba(255, 208, 0, 0.35);
	animation: ciAiSpark 9s ease-in-out infinite;
}

.ci-ai-sparks span:nth-child(1) { top: 11%; left: 40%; animation-delay: -1s; }
.ci-ai-sparks span:nth-child(2) { top: 12%; left: 51%; animation-delay: -3s; }
.ci-ai-sparks span:nth-child(3) { top: 16%; left: 64%; animation-delay: -6s; }
.ci-ai-sparks span:nth-child(4) { top: 17%; left: 71%; animation-delay: -2s; }
.ci-ai-sparks span:nth-child(5) { top: 21%; left: 78%; animation-delay: -4s; }
.ci-ai-sparks span:nth-child(6) { top: 8%; left: 21%; animation-delay: -7s; }
.ci-ai-sparks span:nth-child(7) { top: 30%; left: 84%; animation-delay: -5s; }
.ci-ai-sparks span:nth-child(8) { top: 34%; left: 10%; animation-delay: -8s; }
.ci-ai-sparks span:nth-child(9) { top: 42%; left: 91%; animation-delay: -2s; }
.ci-ai-sparks span:nth-child(10) { top: 52%; left: 20%; animation-delay: -6s; }
.ci-ai-sparks span:nth-child(11) { top: 64%; left: 73%; animation-delay: -4s; }
.ci-ai-sparks span:nth-child(12) { top: 71%; left: 31%; animation-delay: -7s; }
.ci-ai-sparks span:nth-child(13) { top: 78%; left: 57%; animation-delay: -3s; }
.ci-ai-sparks span:nth-child(14) { top: 82%; left: 86%; animation-delay: -5s; }

.ci-ai-shell {
	position: relative;
	z-index: 2;
	width: min(1080px, 100%);
	margin: 0 auto;
}

.ci-ai-header {
	text-align: center;
	margin-bottom: 34px;
	animation: ciLandingReveal 0.8s ease both;
}

.ci-ai-header p {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(229, 233, 244, 0.68);
}

.ci-ai-header h2 {
	margin: 2px 0 0;
	font-family: "Sora", sans-serif;
	font-size: clamp(2.6rem, 4.5vw, 3.8rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 600;
	color: #f8fafc;
}

.ci-ai-cards {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
	padding-top: 12px;
}

.ci-ai-cards::before,
.ci-ai-cards::after {
	content: "";
	position: absolute;
	top: 41%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 176, 0, 0.18), transparent);
	pointer-events: none;
}

.ci-ai-cards::before {
	left: 24%;
	width: 18%;
}

.ci-ai-cards::after {
	right: 24%;
	width: 18%;
}

.ci-ai-card {
	position: relative;
	overflow: hidden;
	padding: 22px 22px 20px;
	border-radius: 20px;
	min-height: 312px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: linear-gradient(180deg, rgba(18, 10, 4, 0.85), rgba(11, 7, 4, 0.78));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px rgba(0, 0, 0, 0.28);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	animation: ciLandingReveal 0.8s ease both;
}

.ci-ai-card:nth-child(2) {
	transform: translateY(-24px);
	animation-delay: 0.08s;
}

.ci-ai-card:nth-child(3) {
	animation-delay: 0.16s;
}

.ci-ai-card-amber {
	background: linear-gradient(180deg, rgba(34, 18, 6, 0.88), rgba(18, 10, 4, 0.78));
	border-color: rgba(255, 156, 28, 0.14);
}

.ci-ai-card-center {
	background: linear-gradient(180deg, rgba(46, 20, 2, 0.88), rgba(22, 10, 2, 0.78));
	border-color: rgba(255, 127, 21, 0.16);
}

.ci-ai-card-teal {
	background: linear-gradient(180deg, rgba(4, 26, 22, 0.88), rgba(3, 18, 16, 0.78));
	border-color: rgba(19, 196, 197, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 42px rgba(0, 111, 122, 0.14);
}

.ci-ai-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 18px;
	background: linear-gradient(180deg, #ff8b00, #ff6d00);
	color: #fff8f2;
	box-shadow: 0 14px 24px rgba(255, 109, 0, 0.16);
}

.ci-ai-card-teal .ci-ai-card-icon {
	background: linear-gradient(180deg, #19d0c7, #0fa7e9);
	box-shadow: 0 14px 24px rgba(15, 167, 233, 0.16);
}

.ci-ai-card h3 {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 1.05rem;
	font-weight: 500;
	color: #f6f7fb;
}

.ci-ai-card p {
	margin: 12px 0 0;
	max-width: 245px;
	font-size: 0.82rem;
	line-height: 1.5;
	color: rgba(235, 237, 242, 0.64);
}

.ci-ai-feed,
.ci-ai-trades {
	margin-top: 24px;
	display: grid;
	gap: 8px;
}

.ci-ai-feed-row,
.ci-ai-trade-row {
	display: grid;
	align-items: center;
	border-radius: 8px;
	min-height: 36px;
	padding: 0 10px;
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.03);
}

.ci-ai-feed-row {
	grid-template-columns: 1fr auto auto;
	gap: 8px;
}

.ci-ai-feed-row span,
.ci-ai-symbol {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.72);
}

.ci-ai-feed-row strong,
.ci-ai-trade-row strong {
	font-size: 0.74rem;
	font-weight: 700;
	color: #f8fafc;
}

.ci-ai-feed-row i {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: #17cf9b;
	box-shadow: 0 0 10px rgba(23, 207, 155, 0.48);
	font-style: normal;
}

.ci-ai-feed-row i.is-dim {
	background: rgba(143, 156, 182, 0.45);
	box-shadow: none;
}

.ci-ai-processing-visual {
	position: relative;
	margin-top: 10px;
	min-height: 156px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
}

.ci-ai-pulse-wave {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	border: 1px solid rgba(255, 166, 0, 0.22);
	transform: translate(-50%, -50%) scale(1);
	opacity: 0;
	box-shadow: 0 0 20px rgba(255, 136, 0, 0.08);
	animation: ciAiPulseWave 4.8s ease-out infinite;
	pointer-events: none;
}

.ci-ai-pulse-wave-a {
	animation-delay: 0s;
}

.ci-ai-pulse-wave-b {
	animation-delay: 1.6s;
}

.ci-ai-pulse-wave-c {
	animation-delay: 3.2s;
}

.ci-ai-ring-wrap {
	position: relative;
	z-index: 2;
	width: 128px;
	height: 128px;
	margin: 20px auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ci-ai-ring {
	position: absolute;
	border-radius: 999px;
	border: 1px solid rgba(255, 132, 0, 0.18);
}

.ci-ai-ring-outer {
	display: none;
	box-shadow: 0 0 22px rgba(255, 136, 0, 0.08);
}

.ci-ai-ring-inner {
	display: none;
	border-color: rgba(255, 176, 0, 0.2);
}

.ci-ai-ring-core {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: linear-gradient(180deg, #ff9700, #ff6d00);
	color: #fff;
	font-size: 0.95rem;
	box-shadow: 0 10px 24px rgba(255, 109, 0, 0.24);
}

.ci-ai-metric {
	text-align: center;
	margin-top: 4px;
}

.ci-ai-metric strong {
	display: block;
	font-family: "Sora", sans-serif;
	font-size: 1.4rem;
	font-weight: 500;
	color: #ffb000;
}

.ci-ai-metric span {
	font-size: 0.68rem;
	color: rgba(255, 255, 255, 0.46);
}

.ci-ai-trade-row {
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 8px;
	row-gap: 2px;
	padding-top: 6px;
	padding-bottom: 6px;
}

.ci-ai-badge {
	grid-row: 1 / span 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px 7px;
	border-radius: 5px;
	font-size: 0.58rem;
	font-weight: 800;
	letter-spacing: 0.06em;
}

.ci-ai-badge.buy {
	background: rgba(19, 207, 146, 0.18);
	color: #14d7a0;
}

.ci-ai-badge.sell {
	background: rgba(255, 92, 92, 0.16);
	color: #ff7e7e;
}

.ci-ai-trade-row strong {
	color: #1be3b3;
	justify-self: end;
}

.ci-ai-trade-row small {
	grid-column: 3;
	font-size: 0.6rem;
	color: rgba(255, 255, 255, 0.38);
	justify-self: end;
}

@keyframes ciAiSpark {
	0%, 100% { transform: translateY(0px); opacity: 0.32; }
	50% { transform: translateY(-9px); opacity: 1; }
}

@keyframes ciAiPulseWave {
	0% {
		transform: translate(-50%, -50%) scale(0.85);
		opacity: 0;
	}
	12% {
		opacity: 0.48;
	}
	70% {
		opacity: 0.18;
	}
	100% {
		transform: translate(-50%, -50%) scale(6.4);
		opacity: 0;
	}
}

.ci-why-section {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: 74px 24px 96px;
	overflow: hidden;
}

.ci-why-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
	background-size: 132px 132px;
	opacity: 0.18;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8), transparent 95%);
}

.ci-why-arc {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 136vw;
	height: 420px;
	border-top: 1px solid rgba(255, 176, 0, 0.08);
	border-radius: 50%;
	opacity: 0.38;
	pointer-events: none;
}

.ci-why-arc-a { top: -26px; }
.ci-why-arc-b { top: 48px; width: 120vw; }

.ci-why-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ci-why-particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 196, 0, 0.82);
	box-shadow: 0 0 10px rgba(255, 196, 0, 0.32);
	animation: ciLandingFloat 12s linear infinite;
}

.ci-why-particles span:nth-child(1) { top: 12%; left: 18%; animation-delay: -1s; }
.ci-why-particles span:nth-child(2) { top: 9%; left: 34%; animation-delay: -4s; }
.ci-why-particles span:nth-child(3) { top: 16%; left: 63%; animation-delay: -6s; }
.ci-why-particles span:nth-child(4) { top: 21%; left: 77%; animation-delay: -2s; }
.ci-why-particles span:nth-child(5) { top: 29%; left: 12%; animation-delay: -7s; }
.ci-why-particles span:nth-child(6) { top: 34%; left: 86%; animation-delay: -5s; }
.ci-why-particles span:nth-child(7) { top: 43%; left: 24%; animation-delay: -3s; }
.ci-why-particles span:nth-child(8) { top: 46%; left: 57%; animation-delay: -8s; }
.ci-why-particles span:nth-child(9) { top: 51%; left: 73%; animation-delay: -5s; }
.ci-why-particles span:nth-child(10) { top: 57%; left: 14%; animation-delay: -6s; }
.ci-why-particles span:nth-child(11) { top: 63%; left: 45%; animation-delay: -4s; }
.ci-why-particles span:nth-child(12) { top: 69%; left: 83%; animation-delay: -9s; }
.ci-why-particles span:nth-child(13) { top: 74%; left: 28%; animation-delay: -2s; }
.ci-why-particles span:nth-child(14) { top: 78%; left: 64%; animation-delay: -6s; }
.ci-why-particles span:nth-child(15) { top: 84%; left: 9%; animation-delay: -7s; }
.ci-why-particles span:nth-child(16) { top: 86%; left: 53%; animation-delay: -3s; }
.ci-why-particles span:nth-child(17) { top: 90%; left: 74%; animation-delay: -5s; }
.ci-why-particles span:nth-child(18) { top: 24%; left: 48%; animation-delay: -8s; }

.ci-why-shell {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	margin: 0 auto;
}

.ci-why-header {
	text-align: center;
	margin-bottom: 46px;
	animation: ciLandingReveal 0.8s ease both;
}

.ci-why-header p {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(229, 233, 244, 0.68);
}

.ci-why-header h2 {
	margin: 2px 0 0;
	font-family: "Sora", sans-serif;
	font-size: clamp(2.6rem, 4.5vw, 3.8rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 600;
	color: #f8fafc;
}

.ci-why-cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px;
}

.ci-why-card {
	grid-column: span 2;
	min-height: 168px;
	padding: 22px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(4, 4, 4, 0.74);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	animation: ciLandingReveal 0.8s ease both;
}

.ci-why-card:nth-child(4) {
	animation-delay: 0.08s;
}

.ci-why-card:nth-child(5) {
	animation-delay: 0.16s;
}

.ci-why-card:nth-child(6) {
	animation-delay: 0.24s;
}

.ci-why-card-accent {
	background: linear-gradient(180deg, rgba(30, 18, 5, 0.78), rgba(7, 7, 7, 0.74));
	border-color: rgba(255, 176, 0, 0.14);
}

.ci-why-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	margin-bottom: 18px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.2);
}

.ci-why-icon-amber,
.ci-why-icon-orange {
	background: linear-gradient(180deg, #ffa61b, #ff7c12);
}

.ci-why-icon-teal {
	background: linear-gradient(180deg, #18d0c7, #0daae4);
}

.ci-why-icon-violet {
	background: linear-gradient(180deg, #9051ff, #ff4ec9);
}

.ci-why-icon-brand {
	background: linear-gradient(180deg, #ffc42d, #ff8c00);
	padding: 7px;
}

.ci-why-icon-logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ci-why-card h3 {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #f6f7fb;
}

.ci-why-card p {
	margin: 12px 0 0;
	max-width: 240px;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(235, 237, 242, 0.64);
}

.ci-marathon-section {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: 76px 24px 98px;
	overflow: hidden;
}

.ci-marathon-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
	background-size: 132px 132px;
	opacity: 0.16;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 95%);
}

.ci-marathon-arc {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 136vw;
	height: 420px;
	border-top: 1px solid rgba(255, 176, 0, 0.08);
	border-radius: 50%;
	opacity: 0.36;
	pointer-events: none;
}

.ci-marathon-arc-a { top: -22px; }
.ci-marathon-arc-b { top: 44px; width: 120vw; }

.ci-marathon-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ci-marathon-particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 196, 0, 0.82);
	box-shadow: 0 0 10px rgba(255, 196, 0, 0.32);
	animation: ciLandingFloat 13s linear infinite;
}

.ci-marathon-particles span:nth-child(1) { top: 9%; left: 24%; animation-delay: -1s; }
.ci-marathon-particles span:nth-child(2) { top: 14%; left: 40%; animation-delay: -4s; }
.ci-marathon-particles span:nth-child(3) { top: 18%; left: 62%; animation-delay: -7s; }
.ci-marathon-particles span:nth-child(4) { top: 22%; left: 76%; animation-delay: -2s; }
.ci-marathon-particles span:nth-child(5) { top: 31%; left: 15%; animation-delay: -6s; }
.ci-marathon-particles span:nth-child(6) { top: 37%; left: 86%; animation-delay: -3s; }
.ci-marathon-particles span:nth-child(7) { top: 48%; left: 31%; animation-delay: -9s; }
.ci-marathon-particles span:nth-child(8) { top: 52%; left: 57%; animation-delay: -5s; }
.ci-marathon-particles span:nth-child(9) { top: 58%; left: 73%; animation-delay: -7s; }
.ci-marathon-particles span:nth-child(10) { top: 66%; left: 10%; animation-delay: -4s; }
.ci-marathon-particles span:nth-child(11) { top: 72%; left: 44%; animation-delay: -8s; }
.ci-marathon-particles span:nth-child(12) { top: 76%; left: 83%; animation-delay: -2s; }
.ci-marathon-particles span:nth-child(13) { top: 84%; left: 26%; animation-delay: -6s; }
.ci-marathon-particles span:nth-child(14) { top: 89%; left: 64%; animation-delay: -3s; }

.ci-marathon-shell {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	margin: 0 auto;
}

.ci-marathon-header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 42px;
	animation: ciLandingReveal 0.8s ease both;
}

.ci-marathon-header p {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(229, 233, 244, 0.68);
}

.ci-marathon-header h2 {
	margin: 2px 0 0;
	font-family: "Sora", sans-serif;
	font-size: clamp(2.6rem, 4.5vw, 3.8rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 600;
	color: #f8fafc;
}

.ci-marathon-sub {
	margin: 22px auto 0;
	max-width: 620px;
	text-align: center;
	font-size: 0.82rem !important;
	line-height: 1.6;
	color: rgba(235, 237, 242, 0.62) !important;
	font-weight: 400 !important;
	letter-spacing: normal !important;
}

.ci-marathon-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.ci-marathon-card {
	min-height: 328px;
	padding: 22px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(4, 4, 4, 0.74);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	animation: ciLandingReveal 0.8s ease both;
	display: flex;
	flex-direction: column;
}

.ci-marathon-card-mid {
	animation-delay: 0.08s;
}

.ci-marathon-card-right {
	animation-delay: 0.16s;
}

.ci-marathon-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	margin-bottom: 14px;
	font-size: 1.05rem;
	font-weight: 700;
	color: #fff;
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.2);
}

.ci-marathon-icon-violet {
	background: linear-gradient(180deg, #9051ff, #ff4ec9);
}

.ci-marathon-icon-teal {
	background: linear-gradient(180deg, #18d0c7, #0daae4);
}

.ci-marathon-icon-orange {
	background: linear-gradient(180deg, #ff9c16, #ff5f20);
}

.ci-marathon-pill {
	font-size: 0.64rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	margin-bottom: 12px;
}

.ci-marathon-pill.live {
	color: #12d79b;
}

.ci-marathon-pill.upcoming {
	color: #ffa91c;
}

.ci-marathon-card h3 {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #f6f7fb;
}

.ci-marathon-card p {
	margin: 12px 0 0;
	max-width: 260px;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(235, 237, 242, 0.64);
}

.ci-marathon-meta,
.ci-marathon-stats {
	margin-top: 18px;
	display: grid;
	gap: 8px;
}

.ci-marathon-meta div,
.ci-marathon-stats div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
}

.ci-marathon-meta span,
.ci-marathon-stats span {
	font-size: 0.74rem;
	color: rgba(235, 237, 242, 0.54);
}

.ci-marathon-meta strong,
.ci-marathon-stats strong {
	font-size: 0.82rem;
	font-weight: 700;
	color: #f4f7fb;
}

.ci-marathon-stats strong {
	font-family: "Sora", sans-serif;
	font-size: 1.9rem;
	line-height: 1;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #ffffff;
}

.ci-marathon-stats div {
	align-items: center;
}

.ci-marathon-stats .ok {
	color: #14d7a0;
}

.ci-marathon-stats .gold {
	color: #ffc42d;
}

.ci-marathon-stats .violet {
	color: #c874ff;
}

.ci-marathon-meta .warn {
	color: #ffc42d;
}

.ci-marathon-btn {
	margin-top: auto;
	height: 32px;
	border: 0;
	border-radius: 9px;
	font-size: 0.76rem;
	font-weight: 700;
	color: #ffffff;
	cursor: default;
}

.ci-marathon-btn-violet {
	background: linear-gradient(90deg, #8e4dff, #ff39b2);
}

.ci-marathon-btn-orange {
	background: linear-gradient(90deg, #ff8c00, #ff3d31);
}

.ci-process-section {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: 76px 24px 98px;
	overflow: hidden;
}

.ci-process-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.014) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.014) 1px, transparent 1px);
	background-size: 132px 132px;
	opacity: 0.16;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 95%);
}

.ci-process-arc {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 136vw;
	height: 420px;
	border-top: 1px solid rgba(255, 176, 0, 0.08);
	border-radius: 50%;
	opacity: 0.34;
	pointer-events: none;
}

.ci-process-arc-a { top: -22px; }
.ci-process-arc-b { top: 44px; width: 120vw; }

.ci-process-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ci-process-particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 196, 0, 0.82);
	box-shadow: 0 0 10px rgba(255, 196, 0, 0.32);
	animation: ciLandingFloat 12s linear infinite;
}

.ci-process-particles span:nth-child(1) { top: 10%; left: 21%; animation-delay: -1s; }
.ci-process-particles span:nth-child(2) { top: 14%; left: 36%; animation-delay: -4s; }
.ci-process-particles span:nth-child(3) { top: 19%; left: 58%; animation-delay: -7s; }
.ci-process-particles span:nth-child(4) { top: 23%; left: 76%; animation-delay: -2s; }
.ci-process-particles span:nth-child(5) { top: 31%; left: 13%; animation-delay: -6s; }
.ci-process-particles span:nth-child(6) { top: 35%; left: 86%; animation-delay: -3s; }
.ci-process-particles span:nth-child(7) { top: 46%; left: 28%; animation-delay: -9s; }
.ci-process-particles span:nth-child(8) { top: 51%; left: 47%; animation-delay: -5s; }
.ci-process-particles span:nth-child(9) { top: 57%; left: 69%; animation-delay: -7s; }
.ci-process-particles span:nth-child(10) { top: 66%; left: 9%; animation-delay: -4s; }
.ci-process-particles span:nth-child(11) { top: 71%; left: 43%; animation-delay: -8s; }
.ci-process-particles span:nth-child(12) { top: 76%; left: 82%; animation-delay: -2s; }
.ci-process-particles span:nth-child(13) { top: 84%; left: 24%; animation-delay: -6s; }
.ci-process-particles span:nth-child(14) { top: 89%; left: 62%; animation-delay: -3s; }

.ci-process-shell {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	margin: 0 auto;
}

.ci-process-header {
	text-align: center;
	margin-bottom: 46px;
	animation: ciLandingReveal 0.8s ease both;
}

.ci-process-header p {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(229, 233, 244, 0.68);
}

.ci-process-header h2 {
	margin: 2px 0 0;
	font-family: "Sora", sans-serif;
	font-size: clamp(2.6rem, 4.5vw, 3.8rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 600;
	color: #f8fafc;
}

.ci-process-cards {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 22px;
}

.ci-process-card {
	min-height: 220px;
	padding: 20px 18px;
	border-radius: 14px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(4, 4, 4, 0.74);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
	animation: ciLandingReveal 0.8s ease both;
	text-align: center;
}

.ci-process-card:nth-child(2) {
	animation-delay: 0.06s;
}

.ci-process-card:nth-child(3) {
	animation-delay: 0.12s;
}

.ci-process-card:nth-child(4) {
	animation-delay: 0.18s;
}

.ci-process-step {
	font-family: "Sora", sans-serif;
	font-size: 2.2rem;
	line-height: 1;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: rgba(132, 158, 196, 0.44);
	margin-bottom: 12px;
}

.ci-process-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	margin-bottom: 14px;
	font-size: 1.03rem;
	font-weight: 700;
	color: #fff;
	box-shadow: 0 14px 26px rgba(0, 0, 0, 0.2);
}

.ci-process-icon-orange {
	background: linear-gradient(180deg, #ff9c16, #ff5f20);
}

.ci-process-icon-violet {
	background: linear-gradient(180deg, #9051ff, #ff4ec9);
}

.ci-process-icon-teal {
	background: linear-gradient(180deg, #18d0c7, #0daae4);
}

.ci-process-card h3 {
	margin: 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 1rem;
	font-weight: 500;
	color: #f6f7fb;
}

.ci-process-card p {
	margin: 10px auto 0;
	max-width: 170px;
	font-size: 0.8rem;
	line-height: 1.55;
	color: rgba(235, 237, 242, 0.64);
}

.ci-edge-section {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: 78px 24px 98px;
	overflow: hidden;
}

.ci-edge-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.013) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.013) 1px, transparent 1px);
	background-size: 134px 134px;
	opacity: 0.16;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 96%);
}

.ci-edge-arc {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 136vw;
	height: 420px;
	border-top: 1px solid rgba(255, 176, 0, 0.08);
	border-radius: 50%;
	opacity: 0.32;
	pointer-events: none;
}

.ci-edge-arc-a { top: -26px; }
.ci-edge-arc-b { top: 44px; width: 120vw; }

.ci-edge-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ci-edge-particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 196, 0, 0.8);
	box-shadow: 0 0 10px rgba(255, 196, 0, 0.32);
	animation: ciLandingFloat 12s linear infinite;
}

.ci-edge-particles span:nth-child(1) { top: 10%; left: 20%; animation-delay: -1s; }
.ci-edge-particles span:nth-child(2) { top: 16%; left: 41%; animation-delay: -4s; }
.ci-edge-particles span:nth-child(3) { top: 19%; left: 64%; animation-delay: -7s; }
.ci-edge-particles span:nth-child(4) { top: 24%; left: 77%; animation-delay: -2s; }
.ci-edge-particles span:nth-child(5) { top: 34%; left: 14%; animation-delay: -6s; }
.ci-edge-particles span:nth-child(6) { top: 39%; left: 86%; animation-delay: -3s; }
.ci-edge-particles span:nth-child(7) { top: 52%; left: 27%; animation-delay: -9s; }
.ci-edge-particles span:nth-child(8) { top: 57%; left: 56%; animation-delay: -5s; }
.ci-edge-particles span:nth-child(9) { top: 65%; left: 76%; animation-delay: -7s; }
.ci-edge-particles span:nth-child(10) { top: 74%; left: 9%; animation-delay: -4s; }
.ci-edge-particles span:nth-child(11) { top: 82%; left: 36%; animation-delay: -8s; }
.ci-edge-particles span:nth-child(12) { top: 87%; left: 68%; animation-delay: -2s; }

.ci-edge-shell {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	margin: 0 auto;
	text-align: center;
}

.ci-edge-header {
	animation: ciLandingReveal 0.8s ease both;
}

.ci-edge-header p {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-weight: 300;
	font-size: clamp(2rem, 4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.04em;
	color: rgba(229, 233, 244, 0.68);
}

.ci-edge-header h2 {
	margin: 2px 0 0;
	font-family: "Sora", sans-serif;
	font-size: clamp(2.6rem, 4.5vw, 3.8rem);
	line-height: 0.95;
	letter-spacing: -0.05em;
	font-weight: 600;
	color: #f8fafc;
}

.ci-edge-proof {
	width: min(450px, 100%);
	margin: 20px auto 16px;
	padding: 14px 20px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(5, 5, 5, 0.72);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	text-align: left;
}

.ci-edge-proof ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.ci-edge-proof li {
	position: relative;
	padding-left: 14px;
	font-size: 0.78rem;
	color: rgba(235, 237, 242, 0.7);
	line-height: 1.45;
}

.ci-edge-proof li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 5px;
	height: 5px;
	border-radius: 999px;
	background: #12d7b5;
	box-shadow: 0 0 10px rgba(18, 215, 181, 0.42);
}

.ci-edge-claim {
	margin-top: 10px;
	line-height: 1.35;
}

.ci-edge-claim p {
	margin: 0;
	font-family: "Sora", sans-serif;
	font-size: 1.55rem;
	color: rgba(229, 233, 244, 0.36);
	font-weight: 300;
}

.ci-edge-claim .ci-edge-highlight {
	color: #ffb000;
	font-weight: 600;
	font-size: 1.45rem;
}

.ci-edge-claim .ci-edge-bold {
	color: #f5f7fb;
	font-size: 1.45rem;
	font-weight: 600;
}

.ci-edge-subline {
	margin: 26px 0 0;
	font-size: 0.82rem;
	color: rgba(235, 237, 242, 0.7);
}

.ci-edge-replaced-grid {
	margin: 14px auto 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	width: min(620px, 100%);
}

.ci-edge-replaced-card {
	min-height: 70px;
	padding: 10px 8px;
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	background: rgba(4, 4, 4, 0.74);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
}

.ci-edge-replaced-card span {
	font-size: 0.64rem;
	color: rgba(235, 237, 242, 0.62);
}

.ci-edge-replaced-card strong {
	font-size: 0.74rem;
	color: #f4f7fb;
	line-height: 1;
}

.ci-edge-replaced-card em {
	font-style: normal;
	font-size: 0.62rem;
	color: rgba(235, 237, 242, 0.74);
}

.ci-edge-replaced-card.is-highlight {
	background: linear-gradient(180deg, rgba(42, 23, 2, 0.78), rgba(28, 17, 3, 0.7));
	border-color: rgba(255, 176, 0, 0.16);
}

.ci-edge-replaced-card.is-highlight em {
	color: #ffc42d;
	font-weight: 700;
}

/* Image-backed "AI has already replaced" cards */
.ci-edge-replaced-card {
	min-height: 124px;
	justify-content: flex-end;
	padding: 12px 10px;
	gap: 1px;
}
.ci-edge-replaced-card .ci-edge-replaced-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	opacity: 0.62;
	transition: opacity 0.5s cubic-bezier(0.42, 0, 0.18, 1), transform 0.6s cubic-bezier(0.42, 0, 0.18, 1);
}
.ci-edge-replaced-card .ci-edge-replaced-scrim {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(2, 4, 8, 0.2) 0%, rgba(2, 4, 8, 0.5) 52%, rgba(2, 4, 8, 0.9) 100%);
}
.ci-edge-replaced-card span,
.ci-edge-replaced-card strong,
.ci-edge-replaced-card em {
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}
.ci-edge-replaced-card.is-highlight .ci-edge-replaced-img {
	opacity: 0.72;
}
.ci-edge-replaced-card.is-highlight .ci-edge-replaced-scrim {
	background: linear-gradient(180deg, rgba(42, 23, 2, 0.18) 0%, rgba(34, 20, 3, 0.58) 52%, rgba(18, 11, 2, 0.93) 100%);
}
@media (hover: hover) {
	.ci-edge-replaced-card:hover .ci-edge-replaced-img {
		opacity: 0.82;
		transform: scale(1.06);
	}
}

.ci-edge-footnote {
	margin: 26px 0 0;
	font-size: 0.8rem;
	color: rgba(235, 237, 242, 0.66);
}

.ci-edge-footnote-strong {
	margin: 4px 0 0;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: #f8fafc;
}

.ci-final-section {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100svh;
	padding: 0 24px 96px;
	overflow: hidden;
}

.ci-final-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.013) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.013) 1px, transparent 1px);
	background-size: 134px 134px;
	opacity: 0.16;
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.82), transparent 98%);
}

.ci-final-arc {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 136vw;
	height: 380px;
	border-top: 1px solid rgba(255, 176, 0, 0.08);
	border-radius: 50%;
	opacity: 0.3;
	pointer-events: none;
}

.ci-final-arc-a { top: 10px; }
.ci-final-arc-b { top: 76px; width: 120vw; }

.ci-final-particles {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.ci-final-particles span {
	position: absolute;
	width: 3px;
	height: 3px;
	border-radius: 999px;
	background: rgba(255, 196, 0, 0.8);
	box-shadow: 0 0 10px rgba(255, 196, 0, 0.32);
	animation: ciLandingFloat 12s linear infinite;
}

.ci-final-particles span:nth-child(1) { top: 8%; left: 25%; animation-delay: -1s; }
.ci-final-particles span:nth-child(2) { top: 13%; left: 41%; animation-delay: -4s; }
.ci-final-particles span:nth-child(3) { top: 16%; left: 64%; animation-delay: -7s; }
.ci-final-particles span:nth-child(4) { top: 20%; left: 77%; animation-delay: -2s; }
.ci-final-particles span:nth-child(5) { top: 30%; left: 13%; animation-delay: -6s; }
.ci-final-particles span:nth-child(6) { top: 35%; left: 86%; animation-delay: -3s; }
.ci-final-particles span:nth-child(7) { top: 46%; left: 29%; animation-delay: -9s; }
.ci-final-particles span:nth-child(8) { top: 52%; left: 56%; animation-delay: -5s; }
.ci-final-particles span:nth-child(9) { top: 58%; left: 74%; animation-delay: -7s; }
.ci-final-particles span:nth-child(10) { top: 66%; left: 9%; animation-delay: -4s; }
.ci-final-particles span:nth-child(11) { top: 72%; left: 43%; animation-delay: -8s; }
.ci-final-particles span:nth-child(12) { top: 77%; left: 82%; animation-delay: -2s; }
.ci-final-particles span:nth-child(13) { top: 85%; left: 24%; animation-delay: -6s; }
.ci-final-particles span:nth-child(14) { top: 89%; left: 62%; animation-delay: -3s; }

.ci-final-shell {
	position: relative;
	z-index: 2;
	width: min(980px, 100%);
	margin: 0 auto;
}

.ci-final-cta-wrap {
	margin-top: 0;
	padding: 62px 24px 64px;
	border-top: 1px solid rgba(255, 124, 18, 0.12);
	border-bottom: 1px solid rgba(255, 124, 18, 0.12);
	background: linear-gradient(180deg, rgba(35, 12, 3, 0.82), rgba(23, 9, 3, 0.78));
	text-align: center;
	animation: ciLandingReveal 0.8s ease both;
}

.ci-final-kicker {
	margin: 0;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: #ffa91c;
}

.ci-final-cta-wrap h2 {
	margin: 14px 0 0;
	font-family: "Sora", sans-serif;
	font-size: clamp(2.25rem, 5vw, 3.65rem);
	line-height: 1.02;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: #f8fafc;
}

.ci-final-cta-wrap h2 span {
	display: block;
	font-weight: 400;
	color: #ffb000;
}

.ci-final-sub {
	margin: 18px auto 0;
	max-width: 620px;
	font-size: 0.82rem;
	line-height: 1.6;
	color: rgba(235, 237, 242, 0.62);
}

.ci-final-actions {
	margin-top: 28px;
	display: flex;
	justify-content: center;
	gap: 12px;
}

.ci-final-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 22px;
	border-radius: 8px;
	text-decoration: none;
	font-size: 0.76rem;
	font-weight: 700;
	transition: transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.ci-final-btn:hover {
	transform: translateY(-1px);
}

.ci-final-btn-primary {
	background: linear-gradient(90deg, #ffac00, #ff6d00);
	color: #ffffff;
}

.ci-final-btn-ghost {
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #f6f7fb;
	background: rgba(255, 255, 255, 0.03);
}

.ci-final-disclaimer {
	margin: 32px auto 0;
	width: min(980px, 100%);
	padding: 16px 18px;
	border-radius: 10px;
	border: 1px solid rgba(255, 124, 18, 0.24);
	background: linear-gradient(180deg, rgba(45, 19, 3, 0.72), rgba(28, 13, 3, 0.64));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.ci-final-disclaimer h3 {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	color: #ffb000;
}

.ci-final-disclaimer p {
	margin: 8px 0 0;
	font-size: 0.68rem;
	line-height: 1.6;
	color: rgba(235, 237, 242, 0.72);
}

.ci-final-footer {
	margin: 24px auto 0;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	text-align: center;
}

.ci-final-footer p {
	margin: 0;
	font-size: 0.66rem;
	color: rgba(235, 237, 242, 0.48);
}

.ci-final-footer nav {
	margin-top: 10px;
	display: inline-flex;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

.ci-final-footer nav a {
	font-size: 0.64rem;
	text-decoration: none;
	color: rgba(235, 237, 242, 0.55);
	transition: color 0.2s ease;
}

.ci-final-footer nav a:hover {
	color: #ffffff;
}

@keyframes ciLandingFloat {
	0%, 100% { transform: translateY(0px); opacity: 0.35; }
	50% { transform: translateY(-12px); opacity: 1; }
}

@keyframes ciLandingReveal {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ciLandingBob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(4px); }
}

/* ─── Scroll reveal motion ─────────────────────────────
 * One-shot: elements animate in when they cross the viewport and stay put.
 * No blur (which felt laggy), shorter distance, snappier spring easing.
 * Each element type has its own micro-motion via the data-ci-reveal attribute.
 */
.ci-scroll-reveal {
	opacity: 0;
	transition:
		opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 620ms cubic-bezier(0.16, 1, 0.3, 1);
	transition-delay: var(--ci-scroll-delay, 0ms);
	will-change: opacity, transform;
	animation: none !important;
}

/* Default — slide up from 28px */
.ci-scroll-reveal {
	transform: translate3d(0, 28px, 0);
}

/* Headlines / section headers: small drop with a subtle scale-up for emphasis */
.ci-scroll-reveal[data-ci-reveal="header"] {
	transform: translate3d(0, -18px, 0) scale(0.97);
	transform-origin: center top;
}

/* Left-flowing rows (e.g. alternating product tour copy) */
.ci-scroll-reveal[data-ci-reveal="left"] {
	transform: translate3d(-36px, 14px, 0);
}

/* Right-flowing rows */
.ci-scroll-reveal[data-ci-reveal="right"] {
	transform: translate3d(36px, 14px, 0);
}

/* Generic upward rise (used for cards) */
.ci-scroll-reveal[data-ci-reveal="up"] {
	transform: translate3d(0, 32px, 0);
}

/* Cards get a tiny lift + scale for life */
.ci-scroll-reveal[data-ci-reveal="card"] {
	transform: translate3d(0, 36px, 0) scale(0.97);
	transform-origin: center 80%;
}

/* All variants land at identity. */
.ci-scroll-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.ci-scroll-reveal,
	.ci-scroll-reveal.is-visible {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
	
	.ci-galaxy-bg canvas {
		filter: none;
	}
}

@media (max-width: 960px) {
	.ci-landing-nav {
		/* Keep brand left, actions right — do NOT stack into a single column. */
		grid-template-columns: auto auto;
		justify-items: stretch;
		gap: 12px;
	}

	.ci-landing-nav-links {
		flex-wrap: wrap;
		gap: 18px;
	}

	.ci-landing-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-ai-cards {
		grid-template-columns: 1fr;
		max-width: 540px;
		margin: 0 auto;
	}

	.ci-ai-cards::before,
	.ci-ai-cards::after {
		display: none;
	}

	.ci-ai-card:nth-child(2) {
		transform: none;
	}

	.ci-why-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-why-card,
	.ci-why-card:nth-child(4),
	.ci-why-card:nth-child(5) {
		grid-column: auto;
	}

	.ci-marathon-cards {
		grid-template-columns: 1fr;
		max-width: 540px;
		margin: 0 auto;
	}

	.ci-marathon-card {
		min-height: auto;
	}

	.ci-process-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-edge-replaced-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-final-actions {
		flex-direction: column;
		align-items: center;
	}

	.ci-final-btn {
		width: min(320px, 100%);
	}
}

@media (max-width: 640px) {
	.ci-landing-hero {
		padding: 40px 16px 30px;
		min-height: calc(100vh - 70px);
	}

	.ci-landing-nav {
		width: calc(100% - 16px);
		padding: 10px 12px;
		gap: 10px;
		grid-template-columns: auto auto;
		justify-items: stretch;
	}

	.ci-landing-brand {
		font-size: 0.78rem;
		gap: 8px;
	}

	.ci-landing-brand .ci-guest-brand-logo {
		width: 26px;
		height: 26px;
	}

	.ci-landing-brand em {
		display: none;     /* hide the small "AI" badge on tiny screens */
	}

	.ci-landing-nav-links {
		display: none;
	}

	.ci-landing-nav-actions {
		display: flex;
		justify-content: flex-end;
		gap: 10px;
		width: auto;
	}

	.ci-landing-login {
		font-size: 0.7rem;
		padding: 0 4px;
	}

	.ci-landing-signup {
		padding: 8px 12px;
		font-size: 0.7rem;
		border-radius: 8px;
	}

	.ci-landing-status {
		font-size: 0.51rem;
		letter-spacing: 0.11em;
		gap: 8px;
		margin-bottom: 22px;
	}

	.ci-landing-kicker {
		font-size: 0.84rem;
		margin-bottom: 10px;
	}

	.ci-landing-title {
		font-size: clamp(2.4rem, 13.6vw, 3.52rem);
	}

	.ci-landing-subhead {
		font-size: 0.84rem;
		margin-top: 22px;
	}

	.ci-landing-punch {
		font-size: 1rem;
		line-height: 1.3;
		margin-top: 10px;
	}

	.ci-landing-blurb {
		font-size: 0.75rem;
	}

	.ci-landing-cta-row {
		flex-direction: column;
		width: 100%;
	}

	.ci-landing-primary,
	.ci-landing-secondary {
		width: 100%;
	}

	.ci-landing-kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ci-ai-section {
		padding: 48px 16px 70px;
	}

	.ci-ai-header {
		margin-bottom: 24px;
	}

	.ci-ai-header p {
		font-size: 1.5rem;
	}

	.ci-ai-header h2 {
		font-size: 2rem;
	}

	.ci-ai-card {
		min-height: auto;
		padding: 18px;
		border-radius: 16px;
	}

	.ci-ai-card h3 {
		font-size: 0.96rem;
	}

	.ci-ai-card p {
		font-size: 0.76rem;
	}

	.ci-ai-ring-wrap {
		width: 112px;
		height: 112px;
	}

	.ci-ai-ring-outer {
		width: 90px;
		height: 90px;
	}

	.ci-ai-ring-inner {
		width: 62px;
		height: 62px;
	}

	.ci-why-section {
		padding: 50px 16px 72px;
	}

	.ci-why-header {
		margin-bottom: 28px;
	}

	.ci-why-header p {
		font-size: 1.5rem;
	}

	.ci-why-header h2 {
		font-size: 2rem;
	}

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

	.ci-why-card {
		min-height: auto;
		padding: 18px;
	}

	.ci-why-card h3 {
		font-size: 0.94rem;
	}

	.ci-why-card p {
		font-size: 0.76rem;
	}

	.ci-marathon-section {
		padding: 52px 16px 74px;
	}

	.ci-marathon-header {
		margin-bottom: 30px;
	}

	.ci-marathon-header p {
		font-size: 1.5rem;
	}

	.ci-marathon-header h2 {
		font-size: 2rem;
	}

	.ci-marathon-sub {
		font-size: 0.75rem !important;
	}

	.ci-marathon-card {
		padding: 18px;
	}

	.ci-marathon-card h3 {
		font-size: 0.94rem;
	}

	.ci-marathon-card p {
		font-size: 0.76rem;
	}

	.ci-marathon-stats strong {
		font-size: 1.55rem;
	}

	.ci-process-section {
		padding: 52px 16px 74px;
	}

	.ci-process-header {
		margin-bottom: 28px;
	}

	.ci-process-header p {
		font-size: 1.5rem;
	}

	.ci-process-header h2 {
		font-size: 2rem;
	}

	.ci-process-cards {
		grid-template-columns: 1fr;
	}

	.ci-process-card {
		min-height: auto;
		padding: 18px;
	}

	.ci-process-step {
		font-size: 1.9rem;
	}

	.ci-process-card h3 {
		font-size: 0.94rem;
	}

	.ci-process-card p {
		font-size: 0.76rem;
	}

	.ci-edge-section {
		padding: 54px 16px 76px;
	}

	.ci-edge-header p {
		font-size: 1.5rem;
	}

	.ci-edge-header h2 {
		font-size: 2rem;
	}

	.ci-edge-proof {
		padding: 12px 14px;
	}

	.ci-edge-proof li {
		font-size: 0.74rem;
	}

	.ci-edge-claim p,
	.ci-edge-claim .ci-edge-highlight,
	.ci-edge-claim .ci-edge-bold {
		font-size: 1.15rem;
	}

	.ci-edge-replaced-grid {
		grid-template-columns: 1fr;
	}

	.ci-edge-footnote {
		font-size: 0.76rem;
	}

	.ci-edge-footnote-strong {
		font-size: 0.9rem;
	}

	.ci-final-section {
		padding: 0 16px 74px;
	}

	.ci-final-cta-wrap {
		padding: 46px 14px 48px;
	}

	.ci-final-kicker {
		font-size: 0.6rem;
	}

	.ci-final-cta-wrap h2 {
		font-size: 2rem;
	}

	.ci-final-sub {
		font-size: 0.75rem;
	}

	.ci-final-disclaimer {
		padding: 14px;
	}

	.ci-final-disclaimer h3 {
		font-size: 0.82rem;
	}

	.ci-final-disclaimer p {
		font-size: 0.64rem;
	}

	.ci-final-footer p,
	.ci-final-footer nav a {
		font-size: 0.62rem;
	}
}

@media (min-width: 1024px) {
	.ci-sidebar {
		transform: translateX(0);
		position: fixed;
		overflow-y: auto;
	}

	.ci-main-wrap {
		margin-left: var(--ci-left-drawer-width);
		margin-right: 0;
	}

	.ci-hamburger {
		display: none;
	}

	.ci-right-toggle {
		display: none;
	}
}

@media (min-width: 1280px) {
	.ci-right-drawer {
		display: flex;
		transform: translateX(0);
		position: fixed;
		overflow-y: auto;
	}

	.ci-main-wrap {
		margin-right: var(--ci-right-drawer-width);
	}
}

@keyframes ciDriftA {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	25% { transform: translate3d(90px, 55px, 0) scale(1.1); }
	50% { transform: translate3d(45px, 110px, 0) scale(0.92); }
	75% { transform: translate3d(-42px, 58px, 0) scale(1.06); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ciDriftB {
	0% { transform: translate3d(0, 0, 0) scale(1.03); }
	30% { transform: translate3d(-88px, 64px, 0) scale(0.9); }
	60% { transform: translate3d(-122px, 14px, 0) scale(1.14); }
	80% { transform: translate3d(-46px, 78px, 0) scale(0.96); }
	100% { transform: translate3d(0, 0, 0) scale(1.03); }
}

@keyframes ciDriftC {
	0% { transform: translate3d(0, 0, 0) scale(1); }
	33% { transform: translate3d(-62px, -46px, 0) scale(1.11); }
	66% { transform: translate3d(54px, -72px, 0) scale(0.9); }
	100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes ciPulseA {
	0%, 100% { opacity: 0.42; filter: blur(70px); }
	50% { opacity: 0.76; filter: blur(82px); }
}

@keyframes ciPulseB {
	0%, 100% { opacity: 0.4; filter: blur(74px); }
	50% { opacity: 0.72; filter: blur(86px); }
}

@keyframes ciPulseC {
	0%, 100% { opacity: 0.36; filter: blur(68px); }
	50% { opacity: 0.66; filter: blur(80px); }
}


/* ── Signal Card ──────────────────────────────────────────── */
.ci-signal-card {
	border: 1px solid rgba(99, 113, 158, 0.18);
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(20, 28, 58, 0.85) 0%, rgba(12, 18, 42, 0.92) 100%);
	backdrop-filter: blur(28px) saturate(1.5);
	-webkit-backdrop-filter: blur(28px) saturate(1.5);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
	padding: 22px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/* ── Glassmorphism sub-card ───────────────────────────────── */
.ci-glass {
	background: rgba(255, 255, 255, 0.04) !important;
	backdrop-filter: blur(14px) saturate(1.3);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* ── Top header ───────────────────────────────────────────── */
.ci-sc-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
}
.ci-sc-top-left {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	flex: 1;
	min-width: 0;
}
.ci-sc-icon-box {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(99, 113, 158, 0.25);
	background: rgba(99, 113, 158, 0.08);
	color: #94a3b8;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ci-sc-icon-box .material-symbols-rounded { font-size: 20px; }
.ci-sc-pair-block { flex: 1; min-width: 0; }
.ci-sc-eyebrow {
	font-size: 0.66rem;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 600;
	margin-bottom: 2px;
}
.ci-sc-pair-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.ci-sc-pair-name {
	font-size: 1.85rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.02em;
	font-family: 'Exo 2', sans-serif;
	line-height: 1.1;
	margin: 0;
}
.ci-sc-pair-pills {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.ci-sc-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.ci-sc-pill--live {
	border: 1px solid rgba(52, 211, 153, 0.4);
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
}
.ci-sc-pill--call {
	border: 1px solid rgba(74, 222, 128, 0.4);
	background: rgba(74, 222, 128, 0.12);
	color: #86efac;
}
.ci-sc-pill--put {
	border: 1px solid rgba(248, 113, 113, 0.4);
	background: rgba(248, 113, 113, 0.12);
	color: #fca5a5;
}
.ci-sc-pill-arrow { font-size: 0.7rem; }
.ci-sc-pulse-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #34d399;
	animation: pulseGreen 1.5s ease-in-out infinite;
}
.ci-sc-subtitle {
	font-size: 0.78rem;
	color: #64748b;
	margin-top: 2px;
}
.ci-sc-top-right { flex-shrink: 0; }
.ci-sc-active-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid rgba(52, 211, 153, 0.4);
	background: rgba(52, 211, 153, 0.08);
	color: #34d399;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	white-space: nowrap;
}
.ci-sc-pulse {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #34d399;
	animation: pulseGreen 1.5s ease-in-out infinite;
}
@keyframes pulseGreen {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.5; transform: scale(0.7); }
}

/* ── Stat tiles (3-up) ────────────────────────────────────── */
.ci-sc-stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media (min-width: 768px) {
	.ci-sc-stats { grid-template-columns: repeat(3, 1fr); }
}
.ci-sc-stat {
	border: 1px solid rgba(99, 113, 158, 0.18);
	background: rgba(15, 23, 42, 0.55);
	border-radius: 14px;
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ci-sc-stat-head {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.64rem;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.ci-sc-stat-value {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
	color: #f5f7ff;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.ci-sc-stat-sub {
	font-size: 0.7rem;
	color: #64748b;
	letter-spacing: 0.02em;
}
.ci-sc-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.ci-sc-dot--green  { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
.ci-sc-dot--orange { background: #fb923c; box-shadow: 0 0 8px rgba(251, 146, 60, 0.5); }
.ci-sc-dot--yellow { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }
.ci-sc-flag {
	font-size: 14px !important;
	color: #fb923c;
}
.ci-sc-text--green  { color: #4ade80; }
.ci-sc-text--orange { color: #fb923c; }

/* Confidence bar inside its stat tile */
.ci-sc-bar-track {
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: rgba(30, 41, 59, 0.8);
	overflow: hidden;
	margin: 2px 0;
}
.ci-sc-bar-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #34d399, #3b82f6);
	transition: width 0.7s ease;
}

/* ── Analysis banner ──────────────────────────────────────── */
.ci-sc-analysis-banner {
	border: 1px solid rgba(99, 113, 158, 0.18);
	background: rgba(15, 23, 42, 0.6);
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 0.82rem;
	color: #cbd5e1;
	line-height: 1.5;
}

/* ── Bottom row ───────────────────────────────────────────── */
.ci-sc-bottom {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media (min-width: 768px) {
	.ci-sc-bottom { grid-template-columns: 2fr 1fr; }
}

/* Martingale */
.ci-sc-martingale {
	border: 1px solid rgba(251, 191, 36, 0.28);
	background: rgba(251, 191, 36, 0.04);
	border-radius: 14px;
	padding: 14px 16px;
}
.ci-sc-mart-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.ci-sc-mart-title {
	font-size: 0.82rem;
	font-weight: 700;
	color: #fcd34d;
	letter-spacing: 0.01em;
}
.ci-sc-mart-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
.ci-sc-mart-col { min-width: 0; }
.ci-sc-mart-lbl {
	font-size: 0.62rem;
	color: #94a3b8;
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
}
.ci-sc-mart-time {
	font-family: 'Exo 2', sans-serif;
	color: #fbbf24;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}

/* Signal Status */
.ci-sc-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(99, 113, 158, 0.18);
	background: rgba(15, 23, 42, 0.55);
	gap: 12px;
}
.ci-sc-status-left {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.ci-sc-status-row {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ci-sc-lightning {
	font-size: 0.95rem;
	color: #fb923c;
}
.ci-sc-status-label {
	font-size: 0.8rem;
	font-weight: 700;
	color: #e8f0ff;
}
.ci-sc-status-state {
	font-size: 0.72rem;
	color: #fb923c;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.ci-sc-status-time {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.45rem;
	font-weight: 700;
	color: #f5f7ff;
	line-height: 1;
	letter-spacing: -0.01em;
}

.ci-overview-progress {
	width: 100%;
	height: 8px;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
	background: #1e293b;
	appearance: none;
	-webkit-appearance: none;
}

.ci-overview-progress::-webkit-progress-bar {
	background: #1e293b;
	border-radius: 999px;
}

.ci-overview-progress::-webkit-progress-value {
	background: linear-gradient(90deg, #00c896, #3a86ff);
	border-radius: 999px;
}

.ci-overview-progress::-moz-progress-bar {
	background: linear-gradient(90deg, #00c896, #3a86ff);
	border-radius: 999px;
}

/* ─── Browser-chrome frame for product videos ───────────── */
.ci-tour-frame {
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.85) 0%, rgba(8, 14, 32, 0.95) 100%);
	border: 1px solid rgba(140, 200, 255, 0.18);
	border-radius: 14px;
	box-shadow:
		0 30px 90px -25px rgba(8, 22, 50, 0.85),
		0 0 0 1px rgba(140, 200, 255, 0.06);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.ci-tour-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(120% 60% at 50% 0%, rgba(140, 200, 255, 0.08), transparent 60%);
}

.ci-tour-frame-header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid rgba(140, 200, 255, 0.08);
	background: rgba(6, 14, 32, 0.65);
	position: relative;
	z-index: 1;
}

.ci-tour-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	display: inline-block;
}

.ci-tour-dot.is-red { background: #ff5f57; }
.ci-tour-dot.is-amber { background: #febc2e; }
.ci-tour-dot.is-green { background: #28c840; }

.ci-tour-frame-url {
	margin-left: 14px;
	font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, monospace;
	font-size: 11px;
	color: #6b85aa;
	letter-spacing: 0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ci-tour-frame-screen {
	position: relative;
	aspect-ratio: 16 / 8.5;
	overflow: hidden;
	background: #0a1126;
}

.ci-tour-video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.ci-tour-frame-lg {
	max-width: 980px;
	margin: 36px auto 0;
}

/* Hero preview block under KPI cards */
.ci-landing-hero-preview {
	margin-top: 36px;
	position: relative;
	z-index: 2;
}

.ci-landing-hero-preview-caption {
	margin-top: 12px;
	font-size: 12px;
	text-align: center;
	color: #94a4b8;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* ─── Tour section (replaces AI Integration cards) ──────── */
.ci-tour-section {
	position: relative;
	padding: 96px 24px 120px;
	overflow: hidden;
	background:
		radial-gradient(70% 60% at 20% 0%, rgba(96, 165, 250, 0.08), transparent 60%),
		radial-gradient(70% 70% at 90% 100%, rgba(251, 191, 36, 0.05), transparent 65%),
		linear-gradient(180deg, rgba(4, 12, 30, 0.95), rgba(6, 16, 38, 0.88));
}

.ci-tour-bg-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(140, 200, 255, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(140, 200, 255, 0.04) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black, transparent 80%);
}

.ci-tour-bg-arc {
	position: absolute;
	width: 800px;
	height: 800px;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(80px);
	opacity: 0.18;
}

.ci-tour-bg-arc-a {
	background: radial-gradient(circle, rgba(96, 165, 250, 0.7), transparent 65%);
	top: -200px;
	left: -200px;
}

.ci-tour-bg-arc-b {
	background: radial-gradient(circle, rgba(251, 191, 36, 0.55), transparent 65%);
	bottom: -300px;
	right: -200px;
}

.ci-tour-shell {
	position: relative;
	z-index: 1;
	max-width: 1180px;
	margin: 0 auto;
}

.ci-tour-header {
	text-align: center;
	margin-bottom: 72px;
}

.ci-tour-header p {
	font-family: 'Exo 2', sans-serif;
	font-size: 14px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: #ffc870;
	margin: 0;
}

.ci-tour-header h2 {
	font-family: 'Exo 2', sans-serif;
	font-size: clamp(2.2rem, 5vw, 3.4rem);
	font-weight: 800;
	color: #f1f7ff;
	margin: 8px 0 14px;
	letter-spacing: -0.015em;
}

.ci-tour-sub {
	max-width: 560px;
	margin: 0 auto;
	color: #b6c1d2;
	font-size: 1rem;
	line-height: 1.65;
	text-transform: none;
	letter-spacing: normal;
}

.ci-tour-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 36px;
	align-items: center;
	margin-bottom: 96px;
}

.ci-tour-row:last-child {
	margin-bottom: 0;
}

.ci-tour-copy {
	max-width: 520px;
}

.ci-tour-step {
	display: inline-block;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8cc8ff;
	background: rgba(96, 165, 250, 0.12);
	border: 1px solid rgba(96, 165, 250, 0.28);
	padding: 5px 11px;
	border-radius: 999px;
	margin-bottom: 16px;
}

.ci-tour-copy h3 {
	font-family: 'Exo 2', sans-serif;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 700;
	color: #f1f7ff;
	margin: 0 0 14px;
	line-height: 1.18;
	letter-spacing: -0.01em;
}

.ci-tour-copy > p {
	color: #cdd6e3;
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 18px;
}

.ci-tour-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ci-tour-bullets li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 8px;
	font-size: 0.94rem;
	color: #b6c1d2;
}

.ci-tour-bullets li::before {
	content: "▹";
	position: absolute;
	left: 0;
	top: 0;
	color: #ffc870;
	font-size: 0.95rem;
}

@media (min-width: 900px) {
	.ci-tour-row {
		grid-template-columns: 1fr 1.15fr;
		gap: 64px;
		margin-bottom: 128px;
	}
	.ci-tour-row.is-reverse {
		grid-template-columns: 1.15fr 1fr;
	}
	.ci-tour-row.is-reverse .ci-tour-copy {
		order: 2;
		justify-self: end;
	}
	.ci-tour-row.is-reverse .ci-tour-visual {
		order: 1;
	}
}

/* ─── Market clock (overview + signals) ──────────────── */
.ci-market-clock {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01) 50%, rgba(8, 14, 32, 0.55)),
		rgba(8, 14, 32, 0.45);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.07),
		0 6px 18px -6px rgba(0, 0, 0, 0.45);
	font-size: 0.82rem;
	color: #cbd5e1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ci-market-clock-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #94a4b8;
	flex-shrink: 0;
}

.ci-market-clock.is-open {
	border-color: rgba(52, 211, 153, 0.40);
}
.ci-market-clock.is-open .ci-market-clock-dot {
	background: #34d399;
	box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
	animation: ciMarketPulse 1.8s ease infinite;
}
.ci-market-clock.is-open [data-clock-label] {
	color: #6ee7b7;
	font-weight: 600;
}

.ci-market-clock.is-closed {
	border-color: rgba(251, 191, 36, 0.36);
}
.ci-market-clock.is-closed .ci-market-clock-dot {
	background: #fbbf24;
}
.ci-market-clock.is-closed [data-clock-label] {
	color: #fcd34d;
	font-weight: 600;
}

.ci-market-clock-sep {
	opacity: 0.32;
}

.ci-market-clock-time {
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
	font-size: 0.78rem;
	color: #e2e8f0;
}

.ci-market-clock-tz {
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #94a4b8;
	margin-left: 2px;
}

@keyframes ciMarketPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
	50%      { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}

@media (max-width: 640px) {
	.ci-market-clock {
		padding: 7px 12px;
		gap: 8px;
		font-size: 0.74rem;
	}
	.ci-market-clock-time { font-size: 0.72rem; }
	/* On phones, drop the middle separator + countdown to keep one line */
	.ci-market-clock-sep-mid {
		display: none;
	}
	.ci-market-clock [data-clock-countdown] {
		display: none;
	}
	.ci-market-clock .ci-market-clock-sep:nth-of-type(1) {
		display: none;
	}
}

/* ─── Video lightbox dialog ─────────────────────────── */
.ci-video-dialog {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	opacity: 1;
	transition: opacity 220ms ease;
}

.ci-video-dialog[hidden] {
	display: none !important;
}

.ci-video-dialog.is-closing {
	opacity: 0;
}

.ci-video-dialog-backdrop {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at center, rgba(8, 18, 42, 0.82), rgba(2, 6, 18, 0.95));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	cursor: zoom-out;
}

.ci-video-dialog-content {
	position: relative;
	z-index: 1;
	width: min(96vw, 1280px);
	max-height: 90vh;
	will-change: transform, opacity;
	transform-origin: top left;
}

.ci-tour-frame-dialog {
	box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(140, 200, 255, 0.18);
}

.ci-video-dialog-close {
	margin-left: auto;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(140, 200, 255, 0.25);
	background: rgba(15, 23, 42, 0.6);
	color: #d8e2f0;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 150ms ease, background-color 150ms ease;
}

.ci-video-dialog-close:hover,
.ci-video-dialog-close:focus-visible {
	background: rgba(244, 63, 94, 0.18);
	border-color: rgba(251, 113, 133, 0.5);
	color: #fda4af;
	outline: none;
}

.ci-video-dialog-content .ci-tour-frame-screen {
	aspect-ratio: 16 / 9;
}

.ci-video-dialog-content video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #060d20;
}

/* Per-frame expand button (top-right corner overlay) */
.ci-tour-frame {
	/* allow positioning the expand button */
	isolation: isolate;
}

.ci-tour-frame-expand {
	position: absolute;
	top: 10px;
	right: 14px;
	z-index: 3;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	border: 1px solid rgba(140, 200, 255, 0.22);
	background: rgba(8, 14, 32, 0.65);
	color: #cdd6e3;
	font-size: 15px;
	line-height: 1;
	cursor: zoom-in;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.ci-tour-frame-expand:hover,
.ci-tour-frame-expand:focus-visible {
	transform: scale(1.08);
	background: rgba(140, 200, 255, 0.18);
	border-color: rgba(140, 200, 255, 0.5);
	color: #f1f7ff;
	outline: none;
}

/* Make the video screen itself feel clickable */
.ci-tour-frame .ci-tour-frame-screen {
	cursor: zoom-in;
}

.ci-tour-frame-dialog .ci-tour-frame-screen {
	cursor: default;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── History table (mobile-stacked, md+ grid) ─────────── */
.ci-history-table {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ci-history-head {
	display: none;
}

.ci-history-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.55);
	border: 1px solid rgba(148, 163, 184, 0.12);
	transition: border-color 0.15s ease;
}

.ci-history-row:hover {
	border-color: rgba(148, 163, 184, 0.28);
}

.ci-history-cell {
	display: flex;
	flex-direction: column;
	font-size: 0.92rem;
}

.ci-history-cell[data-label]::before {
	content: attr(data-label);
	display: block;
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #64748b;
	margin-bottom: 2px;
}

.ci-history-vote {
	grid-column: 1 / -1;
	margin-top: 6px;
	padding-top: 10px;
	border-top: 1px dashed rgba(148, 163, 184, 0.18);
}

.ci-history-empty {
	padding: 48px 16px;
	text-align: center;
	color: #94a3b8;
	font-size: 0.92rem;
	border-radius: 12px;
	background: rgba(15, 23, 42, 0.35);
	border: 1px dashed rgba(148, 163, 184, 0.18);
}

@media (min-width: 768px) {
	.ci-history-head,
	.ci-history-row {
		display: grid;
		grid-template-columns: 1.1fr 1fr 1.1fr 1.2fr 1.4fr 1.1fr;
		gap: 12px;
		align-items: center;
		padding: 12px 16px;
	}

	.ci-history-head {
		font-size: 0.72rem;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: #64748b;
		border-bottom: 1px solid rgba(148, 163, 184, 0.18);
		border-radius: 0;
		background: transparent;
		padding-bottom: 10px;
	}

	.ci-history-row {
		border: 1px solid rgba(148, 163, 184, 0.10);
		background: rgba(15, 23, 42, 0.40);
	}

	.ci-history-cell {
		flex-direction: row;
		align-items: center;
	}

	.ci-history-cell[data-label]::before {
		content: none;
	}

	.ci-history-vote {
		grid-column: auto;
		justify-content: center;
		margin-top: 0;
		padding-top: 0;
		border-top: none;
	}
}

/* ─── Billing action banner + inline confirm ─────────── */
.ci-billing-banner {
	border-radius: 10px;
	padding: 12px 16px;
	font-size: 0.92rem;
	font-weight: 500;
	border: 1px solid transparent;
	display: flex;
	align-items: flex-start;
	gap: 10px;
	line-height: 1.45;
}

.ci-billing-banner::before {
	content: "";
	flex: 0 0 8px;
	height: 8px;
	width: 8px;
	margin-top: 8px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.85;
}

.ci-billing-banner[data-variant="success"] {
	background: rgba(16, 185, 129, 0.12);
	border-color: rgba(52, 211, 153, 0.45);
	color: #6ee7b7;
}

.ci-billing-banner[data-variant="error"] {
	background: rgba(244, 63, 94, 0.12);
	border-color: rgba(251, 113, 133, 0.5);
	color: #fda4af;
}

.ci-billing-banner[data-variant="info"] {
	background: rgba(56, 189, 248, 0.10);
	border-color: rgba(125, 211, 252, 0.4);
	color: #bae6fd;
}

.ci-cancel-confirm {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 10px;
	background: rgba(244, 63, 94, 0.08);
	border: 1px solid rgba(251, 113, 133, 0.35);
}

.ci-cancel-confirm a {
	text-underline-offset: 2px;
}

/* ─── Auth submit busy state ─────────────────────────── */
.ci-auth-submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
}

.ci-auth-submit[aria-busy="true"] {
	cursor: not-allowed;
	opacity: 0.78;
}

.ci-auth-submit[aria-busy="true"] .ci-auth-submit-label::after {
	content: "...";
}

.ci-auth-spinner {
	display: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	animation: ci-auth-spin 0.7s linear infinite;
}

.ci-auth-submit[aria-busy="true"] .ci-auth-spinner {
	display: inline-block;
}

@keyframes ci-auth-spin {
	to { transform: rotate(360deg); }
}

/* ─── Auth password strength indicator ─────────────── */
.ci-pw-rules {
	font-size: 0.78rem;
	color: #94a4b8;
	margin-top: 6px;
	line-height: 1.5;
}

.ci-pw-rules li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ci-pw-rules li.is-met {
	color: #34d399;
}

.ci-pw-rules li::before {
	content: "○";
	font-size: 0.7rem;
	opacity: 0.7;
}

.ci-pw-rules li.is-met::before {
	content: "✓";
	opacity: 1;
}

.ci-pw-strength {
	margin-top: 8px;
}

.ci-pw-strength-bar {
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	overflow: hidden;
}

.ci-pw-strength-fill {
	height: 100%;
	width: 0%;
	border-radius: 999px;
	background: #ef4444;
	transition: width 180ms ease, background-color 180ms ease;
}

.ci-pw-strength-label {
	display: block;
	font-size: 0.72rem;
	color: #94a4b8;
	margin-top: 4px;
}

/* ─── Legal pages (Privacy, Terms, Risk Disclosure) ─────────────── */
.ci-legal-page .ci-guest-main {
	padding: 0;
}

.ci-legal-shell {
	max-width: 880px;
	margin: 0 auto;
	padding: 56px 24px 96px;
	color: #e5edf7;
	font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	line-height: 1.65;
}

.ci-legal-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: #8cc8ff;
	text-decoration: none;
	margin-bottom: 24px;
	opacity: 0.85;
	transition: opacity 0.15s ease;
}

.ci-legal-back:hover {
	opacity: 1;
	text-decoration: underline;
}

.ci-legal-header {
	border-bottom: 1px solid rgba(140, 200, 255, 0.18);
	padding-bottom: 24px;
	margin-bottom: 32px;
}

.ci-legal-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 0.72rem;
	color: #8cc8ff;
	margin: 0 0 8px;
}

.ci-legal-header h1 {
	font-family: 'Exo 2', sans-serif;
	font-size: clamp(1.85rem, 3.6vw, 2.6rem);
	font-weight: 700;
	color: #f1f7ff;
	margin: 0 0 10px;
	letter-spacing: -0.01em;
}

.ci-legal-updated {
	font-size: 0.82rem;
	color: #94a4b8;
	margin: 0;
}

.ci-legal-article h2 {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.2rem;
	font-weight: 600;
	color: #ffc870;
	margin: 36px 0 10px;
	letter-spacing: -0.005em;
}

.ci-legal-article p,
.ci-legal-article li {
	font-size: 0.96rem;
	color: #cdd6e3;
}

.ci-legal-article ul {
	margin: 8px 0 16px;
	padding-left: 22px;
	list-style: disc;
}

.ci-legal-article li {
	margin-bottom: 6px;
}

.ci-legal-article strong {
	color: #f1f7ff;
}

.ci-legal-article a {
	color: #8cc8ff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.ci-legal-article a:hover {
	color: #c5e1ff;
}

.ci-legal-lede {
	font-size: 1.02rem;
	color: #d8e2f0;
	background: rgba(140, 200, 255, 0.05);
	border-left: 3px solid rgba(140, 200, 255, 0.45);
	padding: 16px 20px;
	border-radius: 6px;
	margin: 0 0 28px;
}

.ci-legal-warn {
	background: rgba(255, 92, 92, 0.08);
	border: 1px solid rgba(255, 92, 92, 0.35);
	border-radius: 8px;
	padding: 16px 20px;
	margin: 0 0 24px;
	color: #ffdcdc;
	font-size: 0.95rem;
}

.ci-legal-warn strong {
	color: #ff8b8b;
	display: block;
	margin-bottom: 4px;
	font-size: 1rem;
}

.ci-legal-footer {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(140, 200, 255, 0.12);
	text-align: center;
}

.ci-legal-footer nav {
	display: flex;
	gap: 22px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

.ci-legal-footer a {
	font-size: 0.85rem;
	color: #b6c1d2;
	text-decoration: none;
}

.ci-legal-footer a:hover {
	color: #f1f7ff;
	text-decoration: underline;
}

.ci-legal-footer p {
	font-size: 0.78rem;
	color: #6c7a8c;
	margin: 0;
}

/* ─── Telegram delivery page ─────────────────────────────────────────── */

.ci-tg-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.ci-tg-header-left { min-width: 0; }
.ci-tg-title {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.85rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #f5f7ff;
	margin: 0;
}
.ci-tg-sub {
	color: #94a3b8;
	font-size: 0.9rem;
	margin: 4px 0 0;
}
.ci-tg-header-right {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Status pill (Connected / Test passed / etc.) */
.ci-tg-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
	border: 1px solid transparent;
}
.ci-tg-status-pill .ci-tg-status-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}
.ci-tg-status-pill.is-on {
	border-color: rgba(52, 211, 153, 0.4);
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
}
.ci-tg-status-pill.is-off {
	border-color: rgba(148, 163, 184, 0.35);
	background: rgba(148, 163, 184, 0.06);
	color: #94a3b8;
}
.ci-tg-status-pill.is-fail {
	border-color: rgba(248, 113, 113, 0.4);
	background: rgba(248, 113, 113, 0.08);
	color: #fca5a5;
}

/* Enabled toggle (header) */
.ci-tg-enabled {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}
.ci-tg-enabled input { display: none; }
.ci-tg-enabled-track {
	width: 38px; height: 22px;
	border-radius: 999px;
	background: rgba(99, 113, 158, 0.3);
	position: relative;
	transition: background 0.2s ease;
	flex-shrink: 0;
}
.ci-tg-enabled-knob {
	position: absolute;
	top: 3px; left: 3px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: #f5f7ff;
	transition: transform 0.2s ease;
}
.ci-tg-enabled input:checked + .ci-tg-enabled-track { background: #34d399; }
.ci-tg-enabled input:checked + .ci-tg-enabled-track .ci-tg-enabled-knob {
	transform: translateX(16px);
}
.ci-tg-enabled-label { font-size: 0.85rem; font-weight: 600; color: #e8f0ff; }

/* Flash messages */
.ci-tg-flash {
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 0.85rem;
	margin-bottom: 16px;
	border: 1px solid transparent;
}
.ci-tg-flash.is-ok   { border-color: rgba(52, 211, 153, 0.35); background: rgba(52, 211, 153, 0.08); color: #86efac; }
.ci-tg-flash.is-warn { border-color: rgba(251, 191, 36, 0.35); background: rgba(251, 191, 36, 0.08); color: #fcd34d; }
.ci-tg-flash.is-err  { border-color: rgba(248, 113, 113, 0.35); background: rgba(248, 113, 113, 0.08); color: #fca5a5; }

/* Two-column grid */
.ci-tg-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 1024px) {
	.ci-tg-grid { grid-template-columns: 2fr 1fr; }
}
.ci-tg-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ci-tg-aside { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Card */
.ci-tg-card {
	background: linear-gradient(180deg, rgba(20, 28, 58, 0.85) 0%, rgba(12, 18, 42, 0.92) 100%);
	border: 1px solid rgba(99, 113, 158, 0.18);
	border-radius: 18px;
	padding: 18px 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.ci-tg-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.ci-tg-card-head h3 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #e8f0ff;
	letter-spacing: -0.005em;
}
.ci-tg-card-icon {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(52, 211, 153, 0.25);
	border-radius: 8px;
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
	flex-shrink: 0;
	box-sizing: border-box;
	font-size: 18px !important;
	line-height: 30px !important;
	text-align: center;
	font-variation-settings: 'opsz' 20;
	display: block;
}
.ci-tg-card-aside {
	margin-left: auto;
	font-size: 0.78rem;
	color: #94a3b8;
}
.ci-tg-card-aside strong { color: #34d399; }

/* Row of two cards */
.ci-tg-row-2 {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 720px) {
	.ci-tg-row-2 { grid-template-columns: 1fr 1fr; }
}

/* Fields */
.ci-tg-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ci-tg-label {
	font-size: 0.78rem;
	font-weight: 600;
	color: #cbd5e1;
}
.ci-tg-label-sub {
	font-weight: 400;
	color: #64748b;
	font-size: 0.72rem;
	margin-left: 4px;
}
.ci-tg-input {
	width: 100%;
	background: rgba(11, 16, 36, 0.7);
	border: 1px solid rgba(99, 113, 158, 0.25);
	border-radius: 10px;
	padding: 11px 14px;
	color: #f5f7ff;
	font-size: 0.9rem;
	font-family: 'Exo 2', sans-serif;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.ci-tg-input::placeholder { color: #64748b; }
.ci-tg-input:focus {
	outline: none;
	border-color: rgba(52, 211, 153, 0.5);
	box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.12);
}
.ci-tg-input-group {
	display: flex;
	gap: 8px;
	align-items: stretch;
}
.ci-tg-input-group .ci-tg-input { flex: 1; }
.ci-tg-btn-mini {
	padding: 0 14px;
	background: rgba(99, 113, 158, 0.15);
	border: 1px solid rgba(99, 113, 158, 0.3);
	border-radius: 10px;
	color: #cbd5e1;
	font-size: 0.78rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s;
}
.ci-tg-btn-mini:hover {
	background: rgba(99, 113, 158, 0.25);
	color: #f5f7ff;
}
.ci-tg-hint {
	font-size: 0.72rem;
	color: #64748b;
	line-height: 1.4;
}
.ci-tg-hint a { color: #34d399; }
.ci-tg-mono {
	font-family: 'JetBrains Mono', monospace;
	background: rgba(99, 113, 158, 0.12);
	padding: 1px 5px;
	border-radius: 4px;
	font-size: 0.7rem;
	color: #e8f0ff;
}

/* Markets grid */
.ci-tg-market-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
@media (min-width: 640px) {
	.ci-tg-market-grid { grid-template-columns: repeat(3, 1fr); }
}
.ci-tg-market-tile {
	border: 1px solid rgba(99, 113, 158, 0.2);
	background: rgba(15, 23, 42, 0.55);
	border-radius: 14px;
	padding: 14px 16px;
	cursor: pointer;
	transition: all 0.15s ease;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ci-tg-market-tile:hover { border-color: rgba(99, 113, 158, 0.4); }
.ci-tg-market-tile.is-on {
	border-color: rgba(52, 211, 153, 0.5);
	background: rgba(52, 211, 153, 0.06);
}
.ci-tg-market-tile.is-disabled {
	opacity: 0.4;
	cursor: not-allowed;
}
.ci-tg-market-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.ci-tg-market-name {
	font-size: 0.92rem;
	font-weight: 700;
	color: #f5f7ff;
}
.ci-tg-market-state {
	font-size: 0.7rem;
	color: #94a3b8;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
}
.ci-tg-market-tile.is-on .ci-tg-market-state { color: #34d399; }

/* Toggle (markets + generic) */
.ci-tg-toggle {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.ci-tg-toggle input { display: none; }
.ci-tg-toggle-track {
	width: 36px; height: 20px;
	border-radius: 999px;
	background: rgba(99, 113, 158, 0.3);
	position: relative;
	transition: background 0.2s ease;
	display: inline-block;
}
.ci-tg-toggle-knob {
	position: absolute;
	top: 3px; left: 3px;
	width: 14px; height: 14px;
	border-radius: 50%;
	background: #f5f7ff;
	transition: transform 0.2s ease;
}
.ci-tg-toggle input:checked + .ci-tg-toggle-track { background: #34d399; }
.ci-tg-toggle input:checked + .ci-tg-toggle-track .ci-tg-toggle-knob {
	transform: translateX(16px);
}

/* Confidence threshold */
.ci-tg-threshold {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: center;
}
@media (min-width: 720px) {
	.ci-tg-threshold { grid-template-columns: 140px 1fr; }
}
.ci-tg-gauge {
	position: relative;
	width: 120px;
	height: 120px;
	margin: 0 auto;
}
.ci-tg-gauge-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	pointer-events: none;
}
.ci-tg-gauge-pct {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.6rem;
	font-weight: 800;
	color: #34d399;
	line-height: 1;
}
.ci-tg-gauge-lbl {
	font-size: 0.62rem;
	color: #94a3b8;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
}
.ci-tg-threshold-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ci-tg-bars {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 90px;
	padding: 4px 0;
}
.ci-tg-bar {
	flex: 1;
	background: rgba(99, 113, 158, 0.2);
	border-radius: 3px 3px 0 0;
	min-height: 6px;
	transition: background 0.2s ease;
}
.ci-tg-bar.is-active {
	background: linear-gradient(180deg, #22d3ee 0%, #34d399 100%);
	box-shadow: 0 0 8px rgba(52, 211, 153, 0.4);
}
.ci-tg-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 6px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(52, 211, 153, 0.4) 0%, rgba(34, 211, 238, 0.4) 100%);
	outline: none;
	cursor: pointer;
}
.ci-tg-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #f5f7ff;
	border: 3px solid #34d399;
	cursor: grab;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.ci-tg-slider::-moz-range-thumb {
	width: 18px; height: 18px;
	border-radius: 50%;
	background: #f5f7ff;
	border: 3px solid #34d399;
	cursor: grab;
}
.ci-tg-slider-ticks {
	display: flex;
	justify-content: space-between;
	font-size: 0.66rem;
	color: #64748b;
	font-weight: 600;
}

/* Actions */
.ci-tg-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 4px;
}
.ci-tg-actions-left {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.ci-tg-actions-right {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ci-tg-btn {
	padding: 9px 18px;
	border-radius: 10px;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.15s ease;
	border: 1px solid transparent;
	font-family: inherit;
}
.ci-tg-btn-primary {
	background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
	color: #0b1024;
	border-color: rgba(52, 211, 153, 0.6);
	box-shadow: 0 4px 14px rgba(52, 211, 153, 0.25);
}
.ci-tg-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(52, 211, 153, 0.35); }
.ci-tg-btn-ghost {
	background: rgba(99, 113, 158, 0.1);
	color: #cbd5e1;
	border-color: rgba(99, 113, 158, 0.3);
}
.ci-tg-btn-ghost:hover { background: rgba(99, 113, 158, 0.2); color: #f5f7ff; }
.ci-tg-btn-danger {
	background: rgba(248, 113, 113, 0.08);
	color: #fca5a5;
	border-color: rgba(248, 113, 113, 0.35);
}
.ci-tg-btn-danger:hover { background: rgba(248, 113, 113, 0.18); color: #fecaca; }

.ci-tg-test-result {
	margin-top: 4px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.85rem;
	border: 1px solid transparent;
	display: none;
}
.ci-tg-test-result.is-pending { display: block; background: rgba(99, 113, 158, 0.1); color: #cbd5e1; border-color: rgba(99, 113, 158, 0.3); }
.ci-tg-test-result.is-ok { display: block; background: rgba(52, 211, 153, 0.08); color: #86efac; border-color: rgba(52, 211, 153, 0.35); }
.ci-tg-test-result.is-err { display: block; background: rgba(248, 113, 113, 0.08); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }

/* How it works sidebar */
.ci-tg-howto-list {
	margin: 0 0 14px;
	padding-left: 22px;
	color: #cbd5e1;
	font-size: 0.85rem;
	line-height: 1.6;
}
.ci-tg-howto-list li { margin-bottom: 6px; }
.ci-tg-howto-list em { color: #34d399; font-style: normal; font-weight: 600; }
.ci-tg-howto-list a { color: #34d399; }
.ci-tg-howto-note {
	font-size: 0.78rem;
	color: #94a3b8;
	background: rgba(15, 23, 42, 0.5);
	border: 1px solid rgba(99, 113, 158, 0.15);
	border-radius: 10px;
	padding: 10px 12px;
	line-height: 1.5;
	margin: 0;
}
.ci-tg-howto-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid rgba(99, 113, 158, 0.15);
}
.ci-tg-howto-footer small {
	font-size: 0.72rem;
	color: #94a3b8;
	letter-spacing: 0.04em;
}

/* Recent deliveries timeline */
.ci-tg-deliveries { margin-top: 16px; }
.ci-tg-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
.ci-tg-timeline::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 8px;
	bottom: 8px;
	width: 1px;
	background: linear-gradient(180deg, rgba(99, 113, 158, 0.4), rgba(99, 113, 158, 0.1));
}
.ci-tg-event {
	display: grid;
	grid-template-columns: 24px 96px 1fr auto;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px solid rgba(99, 113, 158, 0.1);
}
.ci-tg-event:last-child { border-bottom: none; }
.ci-tg-event-dot {
	width: 12px; height: 12px;
	border-radius: 50%;
	border: 2px solid #0b1024;
	background: #94a3b8;
	box-shadow: 0 0 0 1px rgba(99, 113, 158, 0.4);
	z-index: 1;
}
.ci-tg-event.status-sent    .ci-tg-event-dot { background: #34d399; box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.5), 0 0 8px rgba(52, 211, 153, 0.4); }
.ci-tg-event.status-failed  .ci-tg-event-dot { background: #f87171; box-shadow: 0 0 0 1px rgba(248, 113, 113, 0.5), 0 0 8px rgba(248, 113, 113, 0.4); }
.ci-tg-event.status-skipped .ci-tg-event-dot { background: #fbbf24; box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5); }
.ci-tg-event-time {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.85rem;
	font-weight: 700;
	color: #cbd5e1;
}
.ci-tg-event-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	min-width: 0;
}
.ci-tg-dir-tag {
	font-size: 0.62rem;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 4px;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.ci-tg-dir-tag.is-buy  { background: rgba(74, 222, 128, 0.15); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.35); }
.ci-tg-dir-tag.is-sell { background: rgba(248, 113, 113, 0.15); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.35); }
.ci-tg-event-pair {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: #f5f7ff;
}
.ci-tg-event-err {
	font-size: 0.7rem;
	color: #fca5a5;
	font-style: italic;
}
.ci-tg-event-status {
	font-size: 0.72rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	white-space: nowrap;
	letter-spacing: 0.02em;
}
.ci-tg-event-status.status-sent    { background: rgba(52, 211, 153, 0.08); color: #86efac; border: 1px solid rgba(52, 211, 153, 0.3); }
.ci-tg-event-status.status-failed  { background: rgba(248, 113, 113, 0.08); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.3); }
.ci-tg-event-status.status-skipped { background: rgba(251, 191, 36, 0.08); color: #fcd34d; border: 1px solid rgba(251, 191, 36, 0.3); }

@media (max-width: 640px) {
	.ci-tg-event {
		grid-template-columns: 24px 1fr;
	}
	.ci-tg-event-time { grid-column: 2; grid-row: 1; }
	.ci-tg-event-meta { grid-column: 2; grid-row: 2; }
	.ci-tg-event-status { grid-column: 2; grid-row: 3; justify-self: start; }
}

/* ─── Overview / Daily Briefing ──────────────────────────────────────── */

.ci-ov-hero {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	padding: 18px 20px;
	border-radius: 18px;
	background: linear-gradient(180deg, rgba(20, 28, 58, 0.7) 0%, rgba(12, 18, 42, 0.85) 100%);
	border: 1px solid rgba(99, 113, 158, 0.18);
	flex-wrap: wrap;
}
.ci-ov-avatar {
	width: 48px; height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #22d3ee 0%, #34d399 100%);
	color: #0b1024;
	font-family: 'Exo 2', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(34, 211, 238, 0.3);
	flex-shrink: 0;
}
.ci-ov-greet { flex: 1; min-width: 0; }
.ci-ov-title {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	color: #f5f7ff;
	margin: 0;
	line-height: 1.15;
}
.ci-ov-firstname { color: #34d399; }
.ci-ov-meta {
	color: #94a3b8;
	font-size: 0.85rem;
	margin: 4px 0 0;
}
.ci-ov-meta-strong { color: #e8f0ff; font-weight: 600; }
.ci-ov-hero-badge { flex-shrink: 0; }

/* Generic pill */
.ci-ov-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	white-space: nowrap;
	border: 1px solid transparent;
	text-transform: uppercase;
}
.ci-ov-pill-dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 8px currentColor;
}
.ci-ov-pill--emerald { border-color: rgba(52, 211, 153, 0.4); background: rgba(52, 211, 153, 0.08); color: #34d399; }
.ci-ov-pill--sky     { border-color: rgba(56, 189, 248, 0.4); background: rgba(56, 189, 248, 0.08); color: #7dd3fc; }
.ci-ov-pill--amber   { border-color: rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08); color: #fbbf24; }
.ci-ov-pill--rose    { border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.08); color: #fca5a5; }
.ci-ov-pill--slate   { border-color: rgba(148, 163, 184, 0.4); background: rgba(148, 163, 184, 0.06); color: #94a3b8; }

/* Featured signal hero */
.ci-ov-feature {
	position: relative;
	padding: 22px 26px;
	border-radius: 20px;
	margin-bottom: 18px;
	overflow: hidden;
	border: 1px solid rgba(34, 211, 238, 0.25);
	background:
		radial-gradient(80% 60% at 100% 0%, rgba(34, 211, 238, 0.08), transparent 60%),
		linear-gradient(180deg, rgba(20, 28, 58, 0.9) 0%, rgba(12, 18, 42, 0.95) 100%);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
.ci-ov-feature-bg {
	position: absolute;
	right: -10px; top: 50%;
	transform: translateY(-50%);
	font-family: 'Exo 2', sans-serif;
	font-size: 9rem;
	font-weight: 900;
	color: rgba(99, 113, 158, 0.06);
	letter-spacing: -0.05em;
	pointer-events: none;
	user-select: none;
	line-height: 1;
}
.ci-ov-feature-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	position: relative;
	z-index: 1;
}
.ci-ov-feature-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ci-ov-eyebrow-label {
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: #94a3b8;
	text-transform: uppercase;
}
.ci-ov-tag {
	font-size: 0.62rem;
	padding: 3px 8px;
	border-radius: 4px;
	font-weight: 700;
	letter-spacing: 0.06em;
}
.ci-ov-tag--win {
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
	border: 1px solid rgba(52, 211, 153, 0.35);
}
.ci-ov-feature-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.ci-ov-feature-body {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	position: relative;
	z-index: 1;
}
@media (min-width: 720px) {
	.ci-ov-feature-body { grid-template-columns: 1fr 180px; align-items: center; }
}
.ci-ov-feature-left { min-width: 0; }
.ci-ov-pair-xl {
	font-family: 'Exo 2', sans-serif;
	font-size: 3.2rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 10px;
}
.ci-ov-feature-dir-row {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}
.ci-ov-dir-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 14px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.06em;
}
.ci-ov-dir-pill.is-buy {
	background: rgba(74, 222, 128, 0.15);
	color: #86efac;
	border: 1px solid rgba(74, 222, 128, 0.4);
}
.ci-ov-dir-pill.is-sell {
	background: rgba(248, 113, 113, 0.15);
	color: #fca5a5;
	border: 1px solid rgba(248, 113, 113, 0.4);
}
.ci-ov-arrow { font-size: 0.7rem; }
.ci-ov-feature-sub { font-size: 0.85rem; color: #94a3b8; }
.ci-ov-text-emerald { color: #34d399; }
.ci-ov-text-rose    { color: #f87171; }
.ci-ov-text-amber   { color: #fbbf24; }
.ci-ov-text-mute    { color: #94a3b8; }

.ci-ov-conf-bar {
	width: 100%;
	height: 10px;
	border-radius: 999px;
	background: rgba(99, 113, 158, 0.18);
	overflow: hidden;
	margin: 6px 0 10px;
}
.ci-ov-conf-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #fbbf24 0%, #34d399 50%, #22d3ee 100%);
	transition: width 0.7s ease;
	box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}
.ci-ov-feature-footnote {
	color: #64748b;
	font-size: 0.78rem;
	margin: 0;
}

.ci-ov-feature-right {
	text-align: right;
	min-width: 0;
}
.ci-ov-conf-pct {
	font-family: 'Exo 2', sans-serif;
	font-size: 4rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.03em;
	line-height: 1;
}
.ci-ov-conf-pct span { font-size: 1.8rem; color: #94a3b8; margin-left: 4px; font-weight: 600; }
.ci-ov-conf-label {
	font-size: 0.68rem;
	color: #94a3b8;
	letter-spacing: 0.14em;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 4px;
}

/* Stats row (Platform pulse + Right now) */
.ci-ov-stats-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-bottom: 18px;
}
@media (min-width: 900px) {
	.ci-ov-stats-row { grid-template-columns: 2fr 1fr; }
}

/* Generic overview card */
.ci-ov-card {
	background: linear-gradient(180deg, rgba(20, 28, 58, 0.85) 0%, rgba(12, 18, 42, 0.92) 100%);
	border: 1px solid rgba(99, 113, 158, 0.18);
	border-radius: 18px;
	padding: 18px 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.ci-ov-card-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.ci-ov-card-head h3 {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 700;
	color: #e8f0ff;
}
.ci-ov-card-icon {
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(52, 211, 153, 0.25);
	border-radius: 8px;
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
	flex-shrink: 0;
	box-sizing: border-box;
	font-size: 18px !important;
	line-height: 30px !important;
	text-align: center;
	font-variation-settings: 'opsz' 20;
	display: block;
}
.ci-ov-card-aside {
	margin-left: auto;
	font-size: 0.74rem;
	color: #64748b;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ci-ov-card-link {
	font-size: 0.78rem;
	color: #34d399;
	font-weight: 600;
	margin-left: 12px;
}
.ci-ov-card-link:hover { color: #86efac; }

/* Platform pulse cells */
.ci-ov-pulse-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (min-width: 1100px) {
	.ci-ov-pulse-grid { grid-template-columns: repeat(4, 1fr); }
}
.ci-ov-pulse-cell {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(99, 113, 158, 0.18);
	background: rgba(15, 23, 42, 0.5);
}
.ci-ov-pulse-lbl {
	font-size: 0.66rem;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 600;
	margin-bottom: 6px;
}
.ci-ov-pulse-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.ci-ov-pulse-val {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.35rem;
	font-weight: 800;
	color: #f5f7ff;
	line-height: 1;
}
.ci-ov-spark { width: 60px; height: 24px; flex-shrink: 0; opacity: 0.85; }
.ci-ov-pulse-sub {
	font-size: 0.68rem;
	color: #64748b;
	margin-top: 4px;
}

/* Right-now side stats */
.ci-ov-side-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.ci-ov-side-cell {
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px solid rgba(99, 113, 158, 0.18);
	background: rgba(15, 23, 42, 0.5);
	text-align: center;
}
.ci-ov-side-val {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.5rem;
	font-weight: 800;
	color: #f5f7ff;
	line-height: 1;
}
.ci-ov-side-lbl {
	font-size: 0.66rem;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	margin-top: 6px;
}

/* On the wire list */
.ci-ov-wire { margin-bottom: 18px; }
.ci-ov-wire-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ci-ov-wire-row {
	display: grid;
	grid-template-columns: 16px 1fr auto auto;
	align-items: center;
	gap: 12px;
	padding: 10px 4px;
	border-bottom: 1px solid rgba(99, 113, 158, 0.1);
}
.ci-ov-wire-row:last-child { border-bottom: none; }
.ci-ov-wire-dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #94a3b8;
}
.ci-ov-wire-dot.is-active { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.5); }
.ci-ov-wire-dot.is-win    { background: #34d399; }
.ci-ov-wire-dot.is-loss   { background: #f87171; }
.ci-ov-wire-dot.is-neutral{ background: #94a3b8; }
.ci-ov-wire-main {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.ci-ov-wire-pair {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: #f5f7ff;
}
.ci-ov-wire-dir {
	font-size: 0.62rem;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 4px;
	letter-spacing: 0.06em;
}
.ci-ov-wire-dir.is-buy  { background: rgba(74, 222, 128, 0.15); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.35); }
.ci-ov-wire-dir.is-sell { background: rgba(248, 113, 113, 0.15); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.35); }
.ci-ov-wire-meta {
	font-size: 0.78rem;
	color: #94a3b8;
	display: flex;
	align-items: center;
	gap: 6px;
}
.ci-ov-wire-status {
	font-size: 0.66rem;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	white-space: nowrap;
}
.ci-ov-wire-status.is-live { background: rgba(52, 211, 153, 0.1); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.4); }
.ci-ov-wire-status.is-win  { background: rgba(52, 211, 153, 0.1); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.4); }
.ci-ov-wire-status.is-loss { background: rgba(248, 113, 113, 0.1); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.4); }
.ci-ov-wire-status.is-draw { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.4); }
.ci-ov-wire-status.is-neutral { background: rgba(148, 163, 184, 0.08); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }

@media (max-width: 640px) {
	.ci-ov-wire-row {
		grid-template-columns: 16px 1fr auto;
	}
	.ci-ov-wire-meta { grid-column: 2; grid-row: 2; padding-top: 2px; }
}

/* Action shortcuts */
.ci-ov-shortcuts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 18px;
}
@media (min-width: 768px) {
	.ci-ov-shortcuts { grid-template-columns: repeat(4, 1fr); }
}
.ci-ov-shortcut {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(20, 28, 58, 0.6) 0%, rgba(12, 18, 42, 0.8) 100%);
	border: 1px solid rgba(99, 113, 158, 0.18);
	text-decoration: none;
	transition: all 0.15s ease;
}
.ci-ov-shortcut:hover {
	border-color: rgba(52, 211, 153, 0.45);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.ci-ov-shortcut-icon {
	width: 38px; height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(52, 211, 153, 0.25);
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
	font-size: 20px !important;
	line-height: 38px !important;
	text-align: center;
	display: block;
	flex-shrink: 0;
	box-sizing: border-box;
}
.ci-ov-shortcut-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ci-ov-shortcut-text strong {
	color: #f5f7ff;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: -0.005em;
}
.ci-ov-shortcut-text small {
	color: #94a3b8;
	font-size: 0.72rem;
}

/* Plan footer */
.ci-ov-plan {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 18px 20px;
	border-radius: 18px;
	border: 1px solid rgba(99, 113, 158, 0.2);
	background: linear-gradient(180deg, rgba(20, 28, 58, 0.85) 0%, rgba(12, 18, 42, 0.92) 100%);
}
@media (min-width: 768px) {
	.ci-ov-plan { grid-template-columns: 1fr 1fr; align-items: center; }
}
.ci-ov-plan.is-warning {
	border-color: rgba(251, 191, 36, 0.35);
	background:
		radial-gradient(60% 60% at 0% 0%, rgba(251, 191, 36, 0.06), transparent 60%),
		linear-gradient(180deg, rgba(20, 28, 58, 0.85) 0%, rgba(12, 18, 42, 0.92) 100%);
}
.ci-ov-plan-head {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.ci-ov-plan-title {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.15rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.01em;
	margin: 0;
}
.ci-ov-plan-cta {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 10px;
	background: linear-gradient(180deg, #34d399 0%, #10b981 100%);
	color: #0b1024;
	text-decoration: none;
	font-weight: 700;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	border: 1px solid rgba(52, 211, 153, 0.6);
	box-shadow: 0 4px 14px rgba(52, 211, 153, 0.25);
	transition: all 0.15s ease;
}
.ci-ov-plan-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(52, 211, 153, 0.35); }
.ci-ov-plan-perks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 14px;
}
.ci-ov-plan-perks li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	color: #cbd5e1;
}
.ci-ov-tick {
	color: #34d399;
	font-weight: 700;
}

/* ─── Centered-pill topbar ───────────────────────────────────────────── */
/* Overrides the older .ci-topbar layout. Three pill clusters:
   - left  : hamburger (mobile) + user identity pill
   - center: DATA SIGNAL health pill (auto-centered)
   - right : search + bell + plan pill + right-drawer toggle             */

.ci-topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	min-height: 64px;
	background: linear-gradient(90deg, rgba(6, 19, 46, 0.92), rgba(4, 14, 35, 0.72));
	border-bottom: 1px solid var(--ci-border);
	backdrop-filter: blur(16px) saturate(1.4);
	-webkit-backdrop-filter: blur(16px) saturate(1.4);
	position: sticky;
	top: 0;
	z-index: 30;
	flex-wrap: nowrap;
}

/* Hamburger fits the pill aesthetic — keep its sizing in topbar context. */
.ci-tb-hamburger { flex-shrink: 0; }

/* User identity pill (left) */
.ci-tb-user-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 5px 16px 5px 5px;
	border-radius: 999px;
	background: rgba(2, 6, 23, 0.72);
	border: 1px solid rgba(99, 113, 158, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.35);
	min-width: 0;
	max-width: 260px;
	flex-shrink: 1;
}
.ci-tb-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: linear-gradient(135deg, #22d3ee 0%, #34d399 100%);
	color: #0b1024;
	font-family: 'Exo 2', sans-serif;
	font-weight: 800;
	font-size: 0.86rem;
	letter-spacing: 0.02em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(11, 16, 36, 0.6), 0 4px 12px rgba(34, 211, 238, 0.25);
}
.ci-tb-user-text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	min-width: 0;
}
.ci-tb-user-text small {
	font-size: 0.66rem;
	color: #64748b;
	letter-spacing: 0.04em;
}
.ci-tb-user-text strong {
	font-size: 0.88rem;
	font-weight: 700;
	color: #f5f7ff;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* DATA SIGNAL center pill */
.ci-tb-data-pill {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 18px;
	border-radius: 999px;
	background: rgba(2, 6, 23, 0.72);
	border: 1px solid rgba(99, 113, 158, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.35);
	margin-left: auto;
	margin-right: auto;
	flex-shrink: 1;
}
.ci-tb-data-lbl {
	font-size: 0.55rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #94a3b8;
	line-height: 1.05;
	text-transform: uppercase;
	flex-shrink: 0;
}
.ci-tb-data-dots {
	display: flex;
	align-items: center;
	gap: 5px;
}
.ci-tb-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(148, 163, 184, 0.25);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
.ci-tb-dot--idle    { background: rgba(99, 113, 158, 0.28); }
.ci-tb-dot--down    { background: rgba(99, 113, 158, 0.28); }
.ci-tb-dot--up      { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.45); }
/* Legacy aliases retained so older swapped HTML doesn't render plain grey. */
.ci-tb-dot--emerald { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.45); }
.ci-tb-dot--cyan    { background: #22d3ee; box-shadow: 0 0 8px rgba(34, 211, 238, 0.45); }
.ci-tb-dot--amber   { background: #fbbf24; box-shadow: 0 0 8px rgba(251, 191, 36, 0.45); }
.ci-tb-dot--sky     { background: #7dd3fc; box-shadow: 0 0 8px rgba(125, 211, 252, 0.45); }
.ci-tb-dot--rose    { background: #fb7185; box-shadow: 0 0 8px rgba(251, 113, 133, 0.45); }
.ci-tb-data-count {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	color: #cbd5e1;
	margin-left: 2px;
}
.ci-tb-text-emerald { color: #34d399 !important; }
.ci-tb-text-amber   { color: #fbbf24 !important; }
.ci-tb-text-rose    { color: #f87171 !important; }

/* Right-side action cluster */
.ci-tb-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}
.ci-tb-iconbtn {
	position: relative;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(2, 6, 23, 0.72);
	border: 1px solid rgba(99, 113, 158, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.35);
	color: #cbd5e1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
	padding: 0;
}
.ci-tb-iconbtn:hover {
	border-color: rgba(52, 211, 153, 0.45);
	color: #f5f7ff;
}
.ci-tb-iconbtn[disabled] {
	cursor: not-allowed;
	opacity: 0.85;
}
.ci-tb-iconbtn[disabled]:hover {
	border-color: rgba(99, 113, 158, 0.22);
	color: #cbd5e1;
}
.ci-tb-iconbtn .material-symbols-rounded {
	font-size: 19px !important;
	line-height: 1 !important;
	font-variation-settings: 'opsz' 20;
}
.ci-tb-bell-dot {
	position: absolute;
	top: 7px;
	right: 8px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fb7185;
	border: 2px solid #0b1024;
	box-shadow: 0 0 6px rgba(251, 113, 133, 0.6);
}

/* Plan pill (subscription summary). Defines the tone variants used by the
   subscription_status_badge.html partial. */
.ci-tb-plan-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(99, 113, 158, 0.32);
	background: rgba(2, 6, 23, 0.72);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.35);
	color: #cbd5e1;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: border-color 0.15s, color 0.15s;
	white-space: nowrap;
	max-width: 280px;
}
.ci-tb-plan-pill:hover { border-color: rgba(52, 211, 153, 0.5); }
.ci-tb-plan-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 6px currentColor;
	flex-shrink: 0;
}
.ci-tb-plan-label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.66rem;
}
.ci-tb-plan-sub {
	font-weight: 600;
	color: #e8f0ff;
	font-size: 0.76rem;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ci-tb-plan-meta {
	font-size: 0.66rem;
	color: #94a3b8;
	font-weight: 600;
	padding: 1px 6px;
	border-radius: 4px;
	background: rgba(99, 113, 158, 0.15);
}
.ci-tb-plan-pill--emerald { border-color: rgba(52, 211, 153, 0.45); color: #34d399; }
.ci-tb-plan-pill--emerald .ci-tb-plan-sub { color: #86efac; }
.ci-tb-plan-pill--sky     { border-color: rgba(56, 189, 248, 0.45); color: #7dd3fc; }
.ci-tb-plan-pill--sky     .ci-tb-plan-sub { color: #bae6fd; }
.ci-tb-plan-pill--amber   { border-color: rgba(251, 191, 36, 0.5);  color: #fbbf24; }
.ci-tb-plan-pill--amber   .ci-tb-plan-sub { color: #fde68a; }
.ci-tb-plan-pill--rose    { border-color: rgba(248, 113, 113, 0.5); color: #fca5a5; }
.ci-tb-plan-pill--rose    .ci-tb-plan-sub { color: #fecaca; }
.ci-tb-plan-pill--slate   { border-color: rgba(148, 163, 184, 0.45); color: #94a3b8; }
.ci-tb-plan-spinner-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: rgba(99, 113, 158, 0.5);
}

.ci-tb-right-toggle { flex-shrink: 0; }

/* Responsive collapses */
@media (max-width: 1023px) {
	/* On tablet, the data pill shows but with reduced padding */
	.ci-tb-data-pill { padding: 5px 10px; gap: 6px; }
	.ci-tb-data-lbl { display: none; }
}
@media (max-width: 767px) {
	/* On phone: hide data pill entirely; user pill collapses to avatar-only */
	.ci-tb-data-pill { display: none; }
	.ci-tb-user-text small { display: none; }
	.ci-tb-user-text strong { font-size: 0.82rem; }
	.ci-tb-user-pill { padding: 4px 12px 4px 4px; }
	.ci-tb-plan-pill .ci-tb-plan-sub { display: none; }
	.ci-tb-plan-pill { padding: 6px 10px; }
	.ci-topbar { gap: 6px; padding: 10px 12px; }
}
@media (max-width: 479px) {
	/* Very narrow: drop the search button too */
	.ci-tb-iconbtn[aria-label*="Search"] { display: none; }
	.ci-tb-user-text { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Floating layout overlay
   --------------------------------------------------------------------
   Overrides .ci-app, .ci-sidebar, .ci-right-drawer, .ci-topbar, and
   .ci-main-wrap from earlier in this file so the left rail, right
   drawer, and topbar pills all read as floating panels with margins
   from the screen edges.
   ════════════════════════════════════════════════════════════════════ */

:root {
	--ci-floor-pad: 16px;       /* margin between floating panels and screen edges */
	--ci-rail-width: 76px;       /* mini-rail collapsed sidebar width */
	--ci-sidebar-width: 252px;   /* expanded sidebar width (overrides --ci-left-drawer-width effect) */
	--ci-drawer-width: 360px;    /* right drawer width */
}

/* ── Sidebar (floating, both expanded + rail modes) ─────────────────── */

.ci-app .ci-sidebar {
	width: var(--ci-sidebar-width);
	top: var(--ci-floor-pad);
	bottom: var(--ci-floor-pad);
	left: var(--ci-floor-pad);
	border: 1px solid rgba(99, 113, 158, 0.22);
	border-right: 1px solid rgba(99, 113, 158, 0.22);
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(11, 18, 38, 0.96) 0%, rgba(7, 12, 30, 0.96) 100%);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	padding: 18px 14px;
	gap: 16px;
	transition: width 0.25s ease, transform 0.28s ease;
}

/* Hide elements meant only for rail mode by default. */
.ci-sb-mini-avatar { display: none; }

.ci-sb-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px;
	text-decoration: none;
	color: inherit;
}
.ci-sb-brand:hover .ci-sb-brand-title { color: #34d399; }
.ci-sb-brand-logo {
	width: 38px;
	height: 38px;
	object-fit: contain;
	flex-shrink: 0;
	display: block;
	filter: drop-shadow(0 4px 12px rgba(52, 211, 153, 0.35));
}
.ci-sb-brand-text { min-width: 0; }
.ci-sb-brand-title {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.98rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.005em;
	line-height: 1.1;
}
.ci-sb-brand-sub {
	font-size: 0.7rem;
	color: #64748b;
	letter-spacing: 0.04em;
	line-height: 1.1;
	margin-top: 2px;
}

/* Search */
.ci-sb-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 10px;
	background: rgba(2, 6, 23, 0.55);
	border: 1px solid rgba(99, 113, 158, 0.22);
	transition: border-color 0.15s;
}
.ci-sb-search:focus-within { border-color: rgba(52, 211, 153, 0.5); }
.ci-sb-search input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: #e8f0ff;
	font-size: 0.85rem;
	font-family: inherit;
}
.ci-sb-search input::placeholder { color: #64748b; }
.ci-sb-search-icon {
	font-size: 18px !important;
	color: #94a3b8;
	line-height: 1 !important;
}
.ci-sb-kbd {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	font-family: 'Exo 2', sans-serif;
	font-size: 0.6rem;
	color: #64748b;
	background: rgba(99, 113, 158, 0.15);
	border: 1px solid rgba(99, 113, 158, 0.2);
	border-radius: 4px;
	padding: 2px 4px;
}
.ci-sb-kbd span + span { margin-top: -1px; }

/* Nav sections */
.ci-sb-nav {
	display: flex;
	flex-direction: column;
	gap: 14px;
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}
.ci-sb-nav::-webkit-scrollbar { width: 4px; }
.ci-sb-nav::-webkit-scrollbar-thumb { background: rgba(99, 113, 158, 0.3); border-radius: 999px; }
.ci-sb-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ci-sb-section-label {
	font-size: 0.62rem;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-weight: 700;
	padding: 2px 10px;
	margin-bottom: 2px;
}
.ci-sb-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 10px;
	color: #cbd5e1;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	border: 1px solid transparent;
}
.ci-sb-link:hover {
	background: rgba(99, 113, 158, 0.08);
	color: #f5f7ff;
}
.ci-sb-link.is-active {
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
	border-color: rgba(52, 211, 153, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ci-sb-link-icon {
	font-size: 20px !important;
	line-height: 1 !important;
	color: inherit;
	flex-shrink: 0;
}
.ci-sb-link-label {
	flex: 1;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ci-sb-link-badge {
	font-size: 0.62rem;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 999px;
	background: rgba(251, 191, 36, 0.15);
	color: #fbbf24;
	border: 1px solid rgba(251, 191, 36, 0.35);
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.ci-sb-link-dot {
	display: none;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #fbbf24;
	box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}

/* Rail-toggle button (sits between nav and user card) */
.ci-sb-rail-toggle {
	display: none;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	border: 1px solid rgba(99, 113, 158, 0.25);
	background: rgba(2, 6, 23, 0.55);
	color: #cbd5e1;
	align-self: center;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.ci-sb-rail-toggle:hover { border-color: rgba(52, 211, 153, 0.45); color: #34d399; }
.ci-sb-rail-toggle .material-symbols-rounded {
	font-size: 18px !important;
	line-height: 32px !important;
	display: block;
}
@media (min-width: 1024px) { .ci-sb-rail-toggle { display: block; } }

/* User card at bottom */
.ci-sb-user {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border-radius: 14px;
	border: 1px solid rgba(248, 113, 113, 0.25);
	background: rgba(2, 6, 23, 0.55);
}
.ci-sb-user-text { line-height: 1.15; }
.ci-sb-user-text small {
	font-size: 0.66rem;
	color: #64748b;
	letter-spacing: 0.04em;
	display: block;
}
.ci-sb-user-text strong {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.95rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.005em;
	display: block;
	margin-top: 2px;
}
.ci-sb-user-form { width: 100%; }
.ci-sb-logout {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px;
	border-radius: 10px;
	border: 1px solid rgba(248, 113, 113, 0.4);
	background: rgba(248, 113, 113, 0.08);
	color: #fca5a5;
	font-size: 0.82rem;
	font-weight: 700;
	cursor: pointer;
	transition: background 0.15s, border-color 0.15s;
	font-family: inherit;
}
.ci-sb-logout:hover {
	background: rgba(248, 113, 113, 0.18);
	border-color: rgba(248, 113, 113, 0.65);
}
.ci-sb-logout .material-symbols-rounded {
	font-size: 16px !important;
	line-height: 1 !important;
}

/* ── Mini rail mode (desktop only) ─────────────────────────────────── */
@media (min-width: 1024px) {
	.ci-app.is-rail .ci-sidebar {
		width: var(--ci-rail-width);
		padding: 16px 10px;
	}
	.ci-app.is-rail .ci-sb-brand-text,
	.ci-app.is-rail .ci-sb-search input,
	.ci-app.is-rail .ci-sb-search-icon,
	.ci-app.is-rail .ci-sb-kbd,
	.ci-app.is-rail .ci-sb-section-label,
	.ci-app.is-rail .ci-sb-link-label,
	.ci-app.is-rail .ci-sb-link-badge,
	.ci-app.is-rail .ci-sb-user-text,
	.ci-app.is-rail .ci-sb-user-form {
		display: none;
	}
	.ci-app.is-rail .ci-sb-search {
		padding: 0;
		border: none;
		background: transparent;
		justify-content: center;
	}
	.ci-app.is-rail .ci-sb-brand { justify-content: center; padding: 0; }
	.ci-app.is-rail .ci-sb-link {
		justify-content: center;
		padding: 9px 0;
	}
	.ci-app.is-rail .ci-sb-link-dot {
		display: block;
		position: absolute;
		top: 6px;
		right: 18px;
	}
	.ci-app.is-rail .ci-sb-user {
		padding: 4px;
		border: none;
		background: transparent;
		align-items: center;
	}
	.ci-app.is-rail .ci-sb-mini-avatar {
		display: flex;
		width: 38px;
		height: 38px;
		border-radius: 50%;
		background: linear-gradient(135deg, #22d3ee 0%, #34d399 100%);
		color: #0b1024;
		font-family: 'Exo 2', sans-serif;
		font-weight: 800;
		font-size: 0.84rem;
		align-items: center;
		justify-content: center;
		box-shadow: 0 0 0 2px rgba(11, 16, 36, 0.6);
	}
	/* Tooltip on hover */
	.ci-app.is-rail .ci-sb-link::after {
		content: attr(data-tooltip);
		position: absolute;
		left: calc(100% + 14px);
		top: 50%;
		transform: translateY(-50%);
		background: rgba(2, 6, 23, 0.96);
		border: 1px solid rgba(99, 113, 158, 0.28);
		color: #f5f7ff;
		padding: 5px 10px;
		border-radius: 8px;
		font-size: 0.78rem;
		white-space: nowrap;
		pointer-events: none;
		opacity: 0;
		transition: opacity 0.15s ease 0.15s;
		z-index: 100;
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
	}
	.ci-app.is-rail .ci-sb-link:hover::after { opacity: 1; }
}

/* ── Right drawer (Trade Feedback) ─────────────────────────────────── */
.ci-app .ci-right-drawer {
	width: var(--ci-drawer-width);
	top: var(--ci-floor-pad);
	bottom: var(--ci-floor-pad);
	right: var(--ci-floor-pad);
	border: 1px solid rgba(99, 113, 158, 0.22);
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(11, 18, 38, 0.96) 0%, rgba(7, 12, 30, 0.96) 100%);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	padding: 18px 16px;
	gap: 14px;
}
.ci-rd-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.ci-rd-title {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.15rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.01em;
	margin: 0;
}
.ci-rd-sub {
	font-size: 0.74rem;
	color: #64748b;
	margin: 2px 0 0;
}
.ci-rd-collapse {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	border: 1px solid rgba(99, 113, 158, 0.25);
	background: rgba(2, 6, 23, 0.55);
	color: #cbd5e1;
	cursor: pointer;
	flex-shrink: 0;
	transition: border-color 0.15s, color 0.15s;
}
.ci-rd-collapse:hover { border-color: rgba(52, 211, 153, 0.45); color: #34d399; }
.ci-rd-collapse .material-symbols-rounded {
	font-size: 18px !important;
	line-height: 32px !important;
	display: block;
}
.ci-rd-stats {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 10px;
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(52, 211, 153, 0.25);
	background:
		radial-gradient(80% 60% at 100% 0%, rgba(52, 211, 153, 0.08), transparent 60%),
		rgba(2, 6, 23, 0.55);
}
.ci-rd-stat-eyebrow {
	font-size: 0.62rem;
	color: #94a3b8;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
}
.ci-rd-stat-val {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.75rem;
	font-weight: 800;
	color: #f5f7ff;
	line-height: 1;
	margin-top: 4px;
}
.ci-rd-stat-lbl {
	font-size: 0.72rem;
	color: #cbd5e1;
	margin-top: 2px;
}
.ci-rd-stat-right { text-align: right; }
.ci-rd-text-amber { color: #fbbf24; }
.ci-rd-stats-note {
	grid-column: 1 / -1;
	font-size: 0.72rem;
	color: #64748b;
	margin: 0;
	padding-top: 6px;
	border-top: 1px solid rgba(99, 113, 158, 0.18);
}
.ci-rd-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 4px;
	border-radius: 12px;
	background: rgba(2, 6, 23, 0.55);
	border: 1px solid rgba(99, 113, 158, 0.18);
}
.ci-rd-tab {
	flex: 1;
	padding: 7px 10px;
	border-radius: 8px;
	border: 0;
	background: transparent;
	color: #94a3b8;
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	font-family: inherit;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background 0.15s, color 0.15s;
	letter-spacing: 0.02em;
}
.ci-rd-tab:hover { color: #f5f7ff; }
.ci-rd-tab.is-active {
	background: linear-gradient(180deg, rgba(52, 211, 153, 0.18), rgba(34, 211, 238, 0.12));
	color: #f5f7ff;
	border: 1px solid rgba(52, 211, 153, 0.4);
}
.ci-rd-tab-count {
	display: inline-block;
	font-size: 0.7rem;
	color: inherit;
	opacity: 0.85;
}
.ci-rd-list-wrap {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ci-rd-list-wrap::-webkit-scrollbar { width: 4px; }
.ci-rd-list-wrap::-webkit-scrollbar-thumb { background: rgba(99, 113, 158, 0.3); border-radius: 999px; }
.ci-rd-list-wrap .ci-right-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.ci-rd-footer {
	display: block;
	text-align: center;
	padding: 10px;
	border-radius: 12px;
	background: rgba(2, 6, 23, 0.55);
	border: 1px solid rgba(99, 113, 158, 0.22);
	color: #34d399;
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s;
}
.ci-rd-footer:hover { border-color: rgba(52, 211, 153, 0.5); }

/* Existing .ci-rh-item drawer cards — give them a card-y look so they
   match the Trade Feedback panel aesthetic. */
.ci-right-list .ci-rh-item {
	background: rgba(2, 6, 23, 0.45);
	border: 1px solid rgba(99, 113, 158, 0.18);
	border-radius: 12px;
	padding: 12px 14px;
}

/* ── Topbar + main wrap (floating + fixed) ──────────────────────────── */
.ci-app .ci-topbar {
	position: fixed;
	top: var(--ci-floor-pad);
	left: var(--ci-floor-pad);
	right: var(--ci-floor-pad);
	margin: 0;
	border-radius: 18px;
	border: 1px solid rgba(99, 113, 158, 0.22);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
	min-height: 64px;
	z-index: 30;
	transition: left 0.25s ease, right 0.25s ease;
}
.ci-app .ci-main-content {
	padding: 0 var(--ci-floor-pad) var(--ci-floor-pad);
	margin: 0 auto;
}
.ci-app .ci-main-wrap {
	/* Top padding clears the fixed topbar (64px height + 16px gap + 14px breathing). */
	padding-top: calc(64px + var(--ci-floor-pad) + 14px);
}

/* Subscription-summary slot — outer div is just a positioning wrapper.
   Pill chrome lives entirely on the swapped-in <a class="ci-tb-plan-pill">. */
.ci-tb-plan-slot {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	min-width: 0;
}

@media (min-width: 1024px) {
	.ci-app .ci-main-wrap {
		margin-left: calc(var(--ci-sidebar-width) + var(--ci-floor-pad) * 2);
		margin-right: 0;
		transition: margin-left 0.25s ease, margin-right 0.25s ease;
	}
	.ci-app .ci-topbar {
		left: calc(var(--ci-sidebar-width) + var(--ci-floor-pad) * 2);
	}
	.ci-app.is-rail .ci-main-wrap {
		margin-left: calc(var(--ci-rail-width) + var(--ci-floor-pad) * 2);
	}
	.ci-app.is-rail .ci-topbar {
		left: calc(var(--ci-rail-width) + var(--ci-floor-pad) * 2);
	}
}
@media (min-width: 1280px) {
	.ci-app .ci-main-wrap {
		margin-right: calc(var(--ci-drawer-width) + var(--ci-floor-pad) * 2);
	}
	.ci-app .ci-topbar {
		right: calc(var(--ci-drawer-width) + var(--ci-floor-pad) * 2);
	}
}

/* Mobile collapses */
@media (max-width: 1023px) {
	.ci-app .ci-sidebar {
		width: 270px;
		transform: translateX(calc(-100% - var(--ci-floor-pad)));
	}
	.ci-app .ci-sidebar.is-open { transform: translateX(0); }
	.ci-app .ci-topbar { margin: var(--ci-floor-pad) var(--ci-floor-pad) 0; }
}
@media (max-width: 1279px) {
	.ci-app .ci-right-drawer {
		transform: translateX(calc(100% + var(--ci-floor-pad)));
	}
	.ci-app .ci-right-drawer.is-open { transform: translateX(0); display: flex; }
}

/* ════════════════════════════════════════════════════════════════════
   Edge-rail topbar — replaces the centered-pill topbar styling.
   Two stacked rows inside the fixed floating panel:
     1. Crumb strip  (CANDLEIQ › <PAGE>  ·  Markets open  ·  UTC clock)
     2. Main row     (avatar greeting   ·  DATA chart   ·  search/bell/plan)
   ════════════════════════════════════════════════════════════════════ */

.ci-tb-edge {
	display: flex;
	flex-direction: column;
	align-items: stretch !important;     /* override .ci-topbar's align-items: center
	                                        which was collapsing each row to its content
	                                        width and centering it inside the panel. */
	justify-content: flex-start !important;
	padding: 0 !important;
	min-height: 0 !important;
	gap: 0;
	overflow: hidden;
}
.ci-tb-edge-top,
.ci-tb-edge-main { width: 100%; }
.ci-tb-edge-main { justify-content: space-between; }
.ci-tb-edge-greeting { margin-right: auto; }     /* greeting glued left */
.ci-tb-edge .ci-tb-actions { margin-left: 0; }   /* actions stay grouped on the right */

/* Top crumb strip — seamless caption row above the main greeting/actions row. */
.ci-tb-edge-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 22px 2px;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	font-weight: 700;
	text-transform: uppercase;
	color: #64748b;
	background: transparent;
}
.ci-tb-edge-crumbs {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.ci-tb-edge-crumb-sep { color: #475569; }
.ci-tb-edge-crumb-current { color: #cbd5e1; }
.ci-tb-edge-status {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.ci-tb-edge-market {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #34d399;
	text-transform: none;
	letter-spacing: 0.02em;
	font-weight: 600;
}
.ci-tb-edge-market-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}
.ci-tb-edge-clock {
	font-family: 'Exo 2', sans-serif;
	font-variant-numeric: tabular-nums;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	color: #cbd5e1;
	font-weight: 600;
}

/* Main row — same horizontal padding as the crumb strip so the avatar
   sits under the crumb and the actions sit under the market/clock. */
.ci-tb-edge-main {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 6px 22px 14px;
}
.ci-tb-edge-greeting {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	flex: 1;
}
.ci-tb-edge-avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: linear-gradient(135deg, #22d3ee 0%, #34d399 100%);
	color: #042722;
	font-family: 'Exo 2', sans-serif;
	font-weight: 800;
	font-size: 1.05rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(11, 16, 36, 0.6), 0 4px 14px rgba(34, 211, 238, 0.3);
}
.ci-tb-edge-greeting-text { min-width: 0; }
.ci-tb-edge-eyebrow {
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: #34d399;
	text-transform: uppercase;
	line-height: 1;
}
.ci-tb-edge-headline {
	margin: 4px 0 0;
	font-family: 'Exo 2', sans-serif;
	font-size: 1.45rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.02em;
	line-height: 1.1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* DATA bar-chart indicator */
.ci-tb-edge-data {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border-radius: 14px;
	background: rgba(2, 6, 23, 0.72);
	border: 1px solid rgba(99, 113, 158, 0.28);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 10px rgba(0, 0, 0, 0.35);
	flex-shrink: 0;
}
.ci-tb-edge-data-bars {
	display: inline-flex;
	align-items: flex-end;
	gap: 3px;
	height: 22px;
}
.ci-tb-edge-data-bars span {
	width: 4px;
	border-radius: 1.5px;
	background: rgba(99, 113, 158, 0.3);
	transition: background 0.2s, height 0.2s;
}
.ci-tb-edge-data-bars span:nth-child(1) { height: 6px; }
.ci-tb-edge-data-bars span:nth-child(2) { height: 10px; }
.ci-tb-edge-data-bars span:nth-child(3) { height: 15px; }
.ci-tb-edge-data-bars span:nth-child(4) { height: 20px; }
.ci-tb-edge-data-bars.is-good span.is-on { background: #34d399; box-shadow: 0 0 6px rgba(52, 211, 153, 0.45); }
.ci-tb-edge-data-bars.is-fair span.is-on { background: #fbbf24; box-shadow: 0 0 6px rgba(251, 191, 36, 0.45); }
.ci-tb-edge-data-bars.is-poor span.is-on { background: #f87171; box-shadow: 0 0 6px rgba(248, 113, 113, 0.45); }
.ci-tb-edge-data-text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}
.ci-tb-edge-data-lbl {
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #94a3b8;
	text-transform: uppercase;
}
.ci-tb-edge-data-val {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #f5f7ff;
}
.ci-tb-edge-data-val.is-good { color: #34d399; }
.ci-tb-edge-data-val.is-fair { color: #fbbf24; }
.ci-tb-edge-data-val.is-poor { color: #f87171; }

/* Mini avatar (right of actions, before the right-drawer toggle).
   Includes a tiny chevron-down hint to suggest it's a user-menu surface. */
.ci-tb-edge-mini-avatar {
	position: relative;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: linear-gradient(135deg, #22d3ee 0%, #34d399 100%);
	color: #042722;
	font-family: 'Exo 2', sans-serif;
	font-weight: 800;
	font-size: 0.78rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 0 0 2px rgba(11, 16, 36, 0.6);
	padding-right: 0;
}
.ci-tb-edge-mini-avatar::after {
	content: '\25BE'; /* ▾ */
	position: absolute;
	right: -12px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	font-size: 0.74rem;
	line-height: 1;
}
.ci-tb-edge .ci-tb-edge-mini-avatar { margin-right: 10px; }

/* Topbar wrap height grows for the two rows; main content padding follows.
   Extra 40px = breathing space between the floating topbar bottom and the
   first page-content card. Bumped from 14px after the topbar grew. */
.ci-app .ci-tb-edge { min-height: 0; }
.ci-app .ci-main-wrap { padding-top: calc(108px + var(--ci-floor-pad) + 40px); }

/* Hide the old user pill / data pill styles from the centered-pill design
   in case any cached HTML still references them — they were already removed
   from base.html but defensive hide-them-if-they-reappear. */
.ci-tb-edge .ci-tb-user-pill,
.ci-tb-edge .ci-tb-data-pill { display: none; }

/* Responsive collapses */
@media (max-width: 1023px) {
	.ci-tb-edge-top { font-size: 0.62rem; padding: 6px 14px; gap: 8px; }
	.ci-tb-edge-main { padding: 10px 14px; gap: 10px; }
	.ci-tb-edge-headline { font-size: 1.15rem; }
	.ci-tb-edge-avatar { width: 42px; height: 42px; font-size: 0.92rem; }
	.ci-tb-edge-data { padding: 6px 12px; }
	.ci-tb-edge-mini-avatar { display: none; }
	.ci-app .ci-main-wrap { padding-top: calc(96px + var(--ci-floor-pad) + 28px); }
}
@media (max-width: 767px) {
	.ci-tb-edge-crumbs { display: none; }
	.ci-tb-edge-data { display: none; }
	.ci-tb-edge-eyebrow { font-size: 0.6rem; }
	.ci-tb-edge-headline { font-size: 1rem; }
	.ci-tb-edge-avatar { width: 38px; height: 38px; font-size: 0.84rem; }
	.ci-tb-plan-pill .ci-tb-plan-sub { display: none; }
}
@media (max-width: 479px) {
	.ci-tb-edge-greeting-text { display: none; }
	.ci-tb-iconbtn[aria-label*="Search"] { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   Billing page — Annual Push design
   ════════════════════════════════════════════════════════════════════ */

.ci-bp-hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	align-items: end;
	margin-bottom: 22px;
}
@media (min-width: 900px) {
	.ci-bp-hero { grid-template-columns: 1fr auto; }
}
.ci-bp-eyebrow {
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #fbbf24;
	margin-bottom: 8px;
}
.ci-bp-headline {
	font-family: 'Exo 2', sans-serif;
	font-size: 2.4rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
}
.ci-bp-headline-accent { color: #fbbf24; }
.ci-bp-hero-sub {
	max-width: 56ch;
	color: #94a3b8;
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 10px 0 0;
}
.ci-bp-hero-badge { justify-self: end; }
.ci-bp-banner-slot { margin-bottom: 14px; }
.ci-billing-banner {
	border-radius: 12px;
	padding: 10px 14px;
	font-size: 0.85rem;
	border: 1px solid transparent;
}
.ci-billing-banner[data-variant="info"]    { background: rgba(56, 189, 248, 0.08); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.35); }
.ci-billing-banner[data-variant="success"] { background: rgba(52, 211, 153, 0.08); color: #86efac; border-color: rgba(52, 211, 153, 0.35); }
.ci-billing-banner[data-variant="error"]   { background: rgba(248, 113, 113, 0.08); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }

/* Plan comparison */
.ci-bp-plans {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 22px;
}
@media (min-width: 900px) {
	.ci-bp-plans { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
	/* 2-plan layout (Free / Premium) */
	.ci-bp-plans--tiers { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
}

/* ── Billing page fills the available width (overrides the global 1180px
   content cap). Capped at 1680px so the layout stays tidy on ultrawide. ── */
body.ci-billing-page .ci-main-content { width: 100%; max-width: 1680px; }
@media (min-width: 1100px) {
	body.ci-billing-page .ci-bp-plans--tiers { gap: 22px; }
}

/* ── Billing-cycle toggle ── */
.ci-bp-cycle { display: flex; justify-content: center; margin: 4px 0 18px; }
.ci-bp-cycle-toggle {
	display: inline-flex; gap: 4px; padding: 4px;
	background: #07111b; border: 1px solid rgba(120,160,200,0.16); border-radius: 999px;
}
.ci-bp-cycle-btn {
	border: none; background: none; cursor: pointer;
	padding: 8px 18px; border-radius: 999px;
	color: #9fb3c8; font-weight: 700; font-size: 0.85rem;
	display: inline-flex; align-items: center; gap: 7px; transition: background .14s, color .14s;
}
.ci-bp-cycle-btn.is-active { background: #34d399; color: #04130c; }
.ci-bp-cycle-save {
	font-size: 0.66rem; font-weight: 800; padding: 2px 7px; border-radius: 999px;
	background: rgba(4,19,12,0.18);
}
.ci-bp-cycle-btn:not(.is-active) .ci-bp-cycle-save { background: rgba(52,211,153,0.16); color: #34d399; }

/* Tier card extras */
.ci-bp-plan-name { font-size: 1.15rem; font-weight: 800; color: #eaf1f8; }
.ci-bp-plan-tagline { color: #8ea4ba; font-size: 0.82rem; margin: 2px 0 12px; }
.ci-bp-plan.is-current { border-color: rgba(56,189,248,0.5); box-shadow: 0 0 0 1px rgba(56,189,248,0.25); }
.ci-bp-plan {
	position: relative;
	overflow: hidden;
	padding: 22px 26px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ci-bp-plan--featured {
	border: 1px solid rgba(52, 211, 153, 0.4);
	background:
		radial-gradient(85% 60% at 100% 0%, rgba(52, 211, 153, 0.1), transparent 60%),
		linear-gradient(180deg, rgba(20, 28, 58, 0.92), rgba(12, 18, 42, 0.95));
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.ci-bp-plan--secondary {
	border: 1px solid rgba(99, 113, 158, 0.25);
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.85), rgba(10, 16, 36, 0.92));
}
.ci-bp-plan-watermark {
	position: absolute;
	right: 0;
	top: -12px;
	font-family: 'Exo 2', sans-serif;
	font-size: 8rem;
	font-weight: 900;
	color: rgba(99, 113, 158, 0.05);
	letter-spacing: -0.05em;
	pointer-events: none;
	user-select: none;
	line-height: 1;
}
.ci-bp-plan-head {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}
.ci-bp-plan-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px solid transparent;
	white-space: nowrap;
}
.ci-bp-plan-pill--emerald { background: rgba(52, 211, 153, 0.1); color: #34d399; border-color: rgba(52, 211, 153, 0.4); }
.ci-bp-plan-pill--amber   { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border-color: rgba(251, 191, 36, 0.4); }
.ci-bp-plan-pill--sky     { background: rgba(56, 189, 248, 0.1); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.4); }
.ci-bp-plan-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	position: relative;
	z-index: 1;
}
.ci-bp-plan-price-amount {
	font-family: 'Exo 2', sans-serif;
	font-size: 3.4rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.03em;
	line-height: 1;
}
.ci-bp-plan--secondary .ci-bp-plan-price-amount { font-size: 2.4rem; }
.ci-bp-plan-price-period {
	font-size: 0.95rem;
	color: #94a3b8;
	font-weight: 600;
}
.ci-bp-plan-price-note {
	font-size: 0.78rem;
	color: #64748b;
	margin: 0;
	position: relative;
	z-index: 1;
}
.ci-bp-plan-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 6px 14px;
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
	position: relative;
	z-index: 1;
}
.ci-bp-plan-features li {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 0.86rem;
	color: #cbd5e1;
}
.ci-bp-tick { color: #34d399; font-weight: 700; }
.ci-bp-plan-secondary-line {
	font-size: 0.84rem;
	color: #94a3b8;
	margin: 4px 0;
	position: relative;
	z-index: 1;
}
.ci-bp-plan-trial {
	font-size: 0.72rem;
	color: #64748b;
	text-align: center;
	margin: 6px 0 0;
}

.ci-bp-cta {
	margin-top: auto;
	border-radius: 12px;
	padding: 14px 22px;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	transition: all 0.15s ease;
	border: 1px solid transparent;
	font-family: inherit;
	position: relative;
	z-index: 1;
}
.ci-bp-cta--primary {
	background: linear-gradient(180deg, #fbbf24 0%, #f59e0b 100%);
	color: #1f1404;
	border-color: rgba(251, 191, 36, 0.6);
	box-shadow: 0 8px 24px rgba(251, 191, 36, 0.3);
}
.ci-bp-cta--primary:hover:not([disabled]) {
	transform: translateY(-1px);
	box-shadow: 0 12px 30px rgba(251, 191, 36, 0.4);
}
.ci-bp-cta--ghost {
	background: rgba(99, 113, 158, 0.1);
	color: #e8f0ff;
	border-color: rgba(99, 113, 158, 0.35);
}
.ci-bp-cta--ghost:hover:not([disabled]) { background: rgba(99, 113, 158, 0.2); border-color: rgba(99, 113, 158, 0.6); }
.ci-bp-cta[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Perks row */
.ci-bp-perks {
	padding: 18px 20px;
	border-radius: 18px;
	border: 1px solid rgba(99, 113, 158, 0.2);
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(10, 16, 36, 0.8));
	margin-bottom: 22px;
}
.ci-bp-perks-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 8px;
}
.ci-bp-perks-title {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	color: #e8f0ff;
	margin: 0;
	letter-spacing: -0.005em;
}
.ci-bp-perks-sub {
	font-size: 0.72rem;
	color: #94a3b8;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.ci-bp-perks-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
@media (min-width: 720px) {
	.ci-bp-perks-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
	.ci-bp-perks-grid { grid-template-columns: repeat(4, 1fr); }
}
.ci-bp-perk {
	padding: 14px 16px;
	border-radius: 14px;
	border: 1px solid rgba(99, 113, 158, 0.18);
	background: rgba(2, 6, 23, 0.55);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ci-bp-perk-icon {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	border: 1px solid rgba(52, 211, 153, 0.25);
	background: rgba(52, 211, 153, 0.1);
	color: #34d399;
	font-size: 18px !important;
	line-height: 32px !important;
	text-align: center;
	display: block;
	margin-bottom: 4px;
	box-sizing: border-box;
}
.ci-bp-perk strong { color: #f5f7ff; font-size: 0.92rem; font-weight: 700; }
.ci-bp-perk small { color: #94a3b8; font-size: 0.74rem; line-height: 1.4; }

/* Status + manage row */
.ci-bp-status-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 22px;
}
@media (min-width: 900px) {
	.ci-bp-status-row { grid-template-columns: 1fr 1fr; }
}
.ci-bp-card {
	padding: 18px 20px;
	border-radius: 18px;
	border: 1px solid rgba(99, 113, 158, 0.2);
	background: linear-gradient(180deg, rgba(20, 28, 58, 0.85), rgba(12, 18, 42, 0.92));
}
.ci-bp-card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
	flex-wrap: wrap;
	gap: 8px;
}
.ci-bp-card-head h3 {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	color: #e8f0ff;
	margin: 0;
	letter-spacing: -0.005em;
}
.ci-bp-card-aside { font-size: 0.72rem; color: #64748b; letter-spacing: 0.04em; }
.ci-bp-status-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.ci-bp-stat-lbl {
	font-size: 0.66rem;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 700;
	margin-bottom: 4px;
}
.ci-bp-stat-val {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.98rem;
	font-weight: 700;
	color: #f5f7ff;
	letter-spacing: -0.005em;
}
.ci-bp-stat-val.is-active   { color: #34d399; }
.ci-bp-stat-val.is-inactive { color: #f87171; }
.ci-bp-trial-row, .ci-bp-grace-row {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.85rem;
}
.ci-bp-trial-row { border: 1px solid rgba(56, 189, 248, 0.3); background: rgba(56, 189, 248, 0.06); color: #bae6fd; }
.ci-bp-grace-row { border: 1px solid rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.06); color: #fde68a; }
.ci-bp-trial-meta { color: #94a3b8; }
.ci-bp-status-actions { margin-top: 14px; }

.ci-bp-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 10px;
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: all 0.15s ease;
	border: 1px solid transparent;
	font-family: inherit;
	text-decoration: none;
}
.ci-bp-btn .material-symbols-rounded {
	font-size: 16px !important;
	line-height: 1 !important;
}
.ci-bp-btn--ghost {
	background: rgba(99, 113, 158, 0.1);
	color: #cbd5e1;
	border-color: rgba(99, 113, 158, 0.3);
}
.ci-bp-btn--ghost:hover { background: rgba(99, 113, 158, 0.2); color: #f5f7ff; border-color: rgba(52, 211, 153, 0.45); }
.ci-bp-btn--danger {
	background: rgba(248, 113, 113, 0.1);
	color: #fca5a5;
	border-color: rgba(248, 113, 113, 0.4);
}
.ci-bp-btn--danger:hover { background: rgba(248, 113, 113, 0.2); color: #fecaca; border-color: rgba(248, 113, 113, 0.7); }

.ci-bp-manage-list { display: flex; flex-direction: column; }
.ci-bp-manage-item {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 0;
	flex-wrap: wrap;
}
.ci-bp-manage-item-text { flex: 1; min-width: 200px; }
.ci-bp-manage-item-text strong { color: #f5f7ff; font-size: 0.92rem; font-weight: 700; display: block; }
.ci-bp-manage-item-text small { color: #94a3b8; font-size: 0.78rem; line-height: 1.45; display: block; margin-top: 2px; }
.ci-bp-manage-item-text em { color: #cbd5e1; font-style: normal; font-weight: 600; }
.ci-bp-manage-divider { height: 1px; background: rgba(99, 113, 158, 0.18); }
.ci-bp-manage-item a:hover { color: #34d399; }

.ci-bp-cancel-confirm {
	margin-top: 14px;
	padding: 14px;
	border-radius: 12px;
	border: 1px solid rgba(248, 113, 113, 0.4);
	background: rgba(248, 113, 113, 0.06);
}
.ci-bp-cancel-confirm-title { color: #fca5a5; font-weight: 800; margin: 0 0 8px; }
.ci-bp-cancel-confirm-list { color: #cbd5e1; font-size: 0.82rem; margin: 0; padding-left: 14px; list-style: none; }
.ci-bp-cancel-confirm-list li { padding: 3px 0; }
.ci-bp-cancel-confirm-list a { color: #7dd3fc; }
.ci-bp-cancel-confirm-actions { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }

/* Payment history table */
.ci-bp-payments { margin-bottom: 22px; }
.ci-bp-table-wrap { overflow-x: auto; }
.ci-bp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.86rem;
}
.ci-bp-table thead th {
	text-align: left;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #64748b;
	padding: 10px 12px;
	border-bottom: 1px solid rgba(99, 113, 158, 0.2);
}
.ci-bp-table tbody td {
	padding: 12px;
	border-bottom: 1px solid rgba(99, 113, 158, 0.08);
	color: #e8f0ff;
	vertical-align: top;
}
.ci-bp-table tbody tr:last-child td { border-bottom: 0; }
.ci-bp-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ci-bp-td-date {
	font-family: 'Exo 2', sans-serif;
	font-weight: 600;
	color: #cbd5e1;
	white-space: nowrap;
}
.ci-bp-ref { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: #94a3b8; }
.ci-bp-status-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	white-space: nowrap;
}
.ci-bp-status-pill.is-paid    { background: rgba(52, 211, 153, 0.08); color: #34d399; border-color: rgba(52, 211, 153, 0.35); }
.ci-bp-status-pill.is-refund  { background: rgba(251, 191, 36, 0.08); color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }
.ci-bp-status-pill.is-fail    { background: rgba(248, 113, 113, 0.08); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
.ci-bp-status-pill.is-pending { background: rgba(148, 163, 184, 0.08); color: #94a3b8; border-color: rgba(148, 163, 184, 0.3); }
.ci-bp-fail-reason { display: block; font-size: 0.7rem; color: #fca5a5; margin-top: 4px; }
.ci-bp-empty {
	text-align: center;
	padding: 24px;
	color: #94a3b8;
	font-size: 0.9rem;
}

/* Policy footer */
.ci-bp-policy {
	padding: 18px 20px;
	border-radius: 18px;
	border: 1px solid rgba(99, 113, 158, 0.18);
	background: rgba(15, 23, 42, 0.5);
}
.ci-bp-policy-title {
	font-family: 'Exo 2', sans-serif;
	font-size: 1rem;
	font-weight: 800;
	color: #e8f0ff;
	margin: 0 0 8px;
}
.ci-bp-policy-list { margin: 0; padding-left: 18px; color: #94a3b8; font-size: 0.86rem; line-height: 1.6; }
.ci-bp-policy-list li { padding: 2px 0; }
.ci-bp-policy-links {
	display: flex;
	gap: 8px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(99, 113, 158, 0.18);
	font-size: 0.82rem;
	color: #64748b;
}
.ci-bp-policy-links a { color: #7dd3fc; text-decoration: none; }
.ci-bp-policy-links a:hover { color: #bae6fd; }

/* ════════════════════════════════════════════════════════════════════
   History page — Feed Timeline design
   ════════════════════════════════════════════════════════════════════ */

.ci-hi-hero {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.ci-hi-eyebrow {
	display: inline-block;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #94a3b8;
	margin-bottom: 6px;
}
.ci-hi-headline {
	font-family: 'Exo 2', sans-serif;
	font-size: 2.2rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
}
.ci-hi-sub { color: #94a3b8; font-size: 0.88rem; margin: 8px 0 0; }
.ci-hi-export {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.82rem;
	font-weight: 700;
	color: #34d399;
	text-decoration: none;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid rgba(52, 211, 153, 0.3);
	background: rgba(52, 211, 153, 0.06);
	transition: border-color 0.15s;
}
.ci-hi-export:hover { border-color: rgba(52, 211, 153, 0.6); }

/* Stats row */
.ci-hi-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	margin-bottom: 22px;
}
@media (min-width: 720px) {
	.ci-hi-stats { grid-template-columns: repeat(4, 1fr); }
}
.ci-hi-stat {
	padding: 14px 18px;
	border-radius: 16px;
	border: 1px solid rgba(99, 113, 158, 0.2);
	background: linear-gradient(180deg, rgba(15, 23, 42, 0.6), rgba(10, 16, 36, 0.85));
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.ci-hi-stat-lbl {
	font-size: 0.66rem;
	color: #94a3b8;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
}
.ci-hi-stat-val {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.8rem;
	font-weight: 800;
	color: #f5f7ff;
	letter-spacing: -0.02em;
	line-height: 1;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.ci-hi-stat-sub { font-size: 0.7rem; color: #64748b; }
.ci-hi-text-cyan    { color: #22d3ee; }
.ci-hi-text-emerald { color: #34d399; }
.ci-hi-text-rose    { color: #f87171; }
.ci-hi-streak-kind {
	font-size: 0.78rem;
	font-weight: 800;
	padding: 1px 7px;
	border-radius: 6px;
	background: rgba(52, 211, 153, 0.1);
	border: 1px solid rgba(52, 211, 153, 0.3);
}
.ci-hi-spark { height: 22px; width: 64px; margin-top: 2px; opacity: 0.95; }

/* Filter bar */
.ci-hi-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	padding: 10px 14px;
	border-radius: 16px;
	border: 1px solid rgba(99, 113, 158, 0.2);
	background: rgba(2, 6, 23, 0.55);
	margin-bottom: 22px;
}
.ci-hi-fgroup {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ci-hi-flabel {
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	color: #64748b;
}
.ci-hi-fchips {
	display: inline-flex;
	gap: 4px;
	padding: 3px;
	border-radius: 999px;
	background: rgba(99, 113, 158, 0.08);
	border: 1px solid rgba(99, 113, 158, 0.18);
}
.ci-hi-chip {
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.74rem;
	font-weight: 700;
	color: #94a3b8;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s, color 0.15s;
}
.ci-hi-chip:hover { color: #cbd5e1; }
.ci-hi-chip.is-active {
	background: rgba(52, 211, 153, 0.16);
	color: #34d399;
	box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.4);
}
.ci-hi-search {
	flex: 1;
	min-width: 200px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(2, 6, 23, 0.5);
	border: 1px solid rgba(99, 113, 158, 0.22);
	transition: border-color 0.15s;
}
.ci-hi-search:focus-within { border-color: rgba(52, 211, 153, 0.5); }
.ci-hi-search-icon { font-size: 16px !important; color: #94a3b8; line-height: 1 !important; }
.ci-hi-search input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: #f5f7ff;
	font-size: 0.85rem;
	font-family: inherit;
}
.ci-hi-search input::placeholder { color: #64748b; }

/* Timeline */
.ci-hi-timeline {
	display: flex;
	flex-direction: column;
	gap: 22px;
}
.ci-hi-group {
	position: relative;
}
.ci-hi-group-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
	padding-left: 18px;
}
.ci-hi-group-head h2 {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.05rem;
	font-weight: 800;
	color: #e8f0ff;
	margin: 0;
	letter-spacing: -0.005em;
}
.ci-hi-group-meta {
	font-size: 0.72rem;
	color: #64748b;
	letter-spacing: 0.04em;
}
.ci-hi-group-dot {
	position: absolute;
	left: 0;
	top: 6px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #34d399;
	box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}
.ci-hi-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 22px;
	border-left: 1px dashed rgba(99, 113, 158, 0.28);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ci-hi-row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto auto auto auto;
	align-items: center;
	gap: 14px;
	padding: 10px 16px;
	border-radius: 999px;     /* full pill shape per row, matches reference */
	background: rgba(15, 23, 42, 0.45);
	border: 0;
	transition: background 0.15s;
}
.ci-hi-row:hover { background: rgba(15, 23, 42, 0.7); }
/* No left-edge accent stripe — status reads from the gutter dot + the right-side pill. */
.ci-hi-row-dot {
	position: absolute;
	left: -28px;             /* sit in the timeline gutter, on the dashed line */
	top: 50%;
	transform: translateY(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #64748b;
	border: 2px solid #0b1024;
}
.ci-hi-row.is-win  .ci-hi-row-dot { background: #34d399; box-shadow: 0 0 8px rgba(52, 211, 153, 0.45); }
.ci-hi-row.is-loss .ci-hi-row-dot { background: #f87171; box-shadow: 0 0 8px rgba(248, 113, 113, 0.45); }
.ci-hi-row-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}
.ci-hi-row-pair {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	color: #f5f7ff;
	white-space: nowrap;
}
.ci-hi-row-dir {
	font-size: 0.62rem;
	font-weight: 800;
	padding: 2px 7px;
	border-radius: 4px;
	letter-spacing: 0.06em;
	white-space: nowrap;
}
.ci-hi-row-dir.is-buy  { background: rgba(74, 222, 128, 0.15); color: #86efac; border: 1px solid rgba(74, 222, 128, 0.35); }
.ci-hi-row-dir.is-sell { background: rgba(248, 113, 113, 0.15); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.35); }
.ci-hi-row-conf {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	color: #94a3b8;
}
.ci-hi-row-tf {
	font-size: 0.7rem;
	color: #64748b;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.ci-hi-row-outcome {
	font-size: 0.7rem;
	font-weight: 800;
	padding: 4px 10px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	white-space: nowrap;
	border: 1px solid transparent;
}
.ci-hi-row-outcome.is-win   { background: rgba(52, 211, 153, 0.1); color: #34d399; border-color: rgba(52, 211, 153, 0.35); }
.ci-hi-row-outcome.is-loss  { background: rgba(248, 113, 113, 0.1); color: #fca5a5; border-color: rgba(248, 113, 113, 0.35); }
.ci-hi-row-outcome.is-draw  { background: rgba(251, 191, 36, 0.1); color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }
.ci-hi-row-outcome.is-other { background: rgba(148, 163, 184, 0.08); color: #94a3b8; border-color: rgba(148, 163, 184, 0.3); }
.ci-hi-row-time {
	font-family: 'Exo 2', sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	color: #cbd5e1;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.ci-hi-row-votes { display: inline-flex; align-items: center; gap: 6px; }
.ci-hi-row-votes .inline-flex { gap: 6px; }
.ci-hi-row-votes form { display: inline; }

@media (max-width: 820px) {
	.ci-hi-row {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		row-gap: 6px;
		border-radius: 18px;   /* slightly less curvy when wrapping */
	}
	.ci-hi-row-meta { grid-row: 1; grid-column: 1; }
	.ci-hi-row-tf { display: none; }
	.ci-hi-row-outcome { grid-row: 1; grid-column: 2; justify-self: end; }
	.ci-hi-row-time { grid-row: 2; grid-column: 1; }
	.ci-hi-row-votes { grid-row: 2; grid-column: 2; justify-self: end; }
}

.ci-hi-empty {
	text-align: center;
	padding: 60px 20px;
	color: #94a3b8;
	font-size: 0.95rem;
	border-radius: 16px;
	border: 1px dashed rgba(99, 113, 158, 0.25);
	background: rgba(15, 23, 42, 0.4);
}


/* ════════════════════════════════════════════════════════════════════
   AI Scanner page (v2 — Drop-a-chart design)
   ════════════════════════════════════════════════════════════════════ */

/* Hero */
.ci-sc-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding: 18px 0 4px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.ci-sc-eyebrow {
	color: #2bd66b;
	font-size: 0.66rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 10px;
}
.ci-sc-headline {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.85rem;
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 800;
	margin: 0;
	color: #eaf1f8;
	max-width: 580px;
}
.ci-sc-em { color: #2bd66b; }
.ci-sc-em-dim { color: #3a4f63; }
.ci-sc-dim { color: #3a4f63 !important; }
.ci-sc-sub {
	margin-top: 10px;
	max-width: 580px;
	color: #8ea4ba;
	font-size: 0.88rem;
	line-height: 1.55;
}
.ci-sc-hero-actions { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

.ci-sc-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 10px;
	border: 1px solid rgba(120, 160, 200, 0.18);
	background: rgba(11, 22, 34, 0.7);
	color: #eaf1f8;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .14s, border-color .14s, transform .1s;
	text-decoration: none;
	font-family: inherit;
}
.ci-sc-btn:hover { background: #0d1a28; border-color: rgba(120, 160, 200, 0.28); }
.ci-sc-btn:active { transform: scale(.985); }
.ci-sc-btn .material-symbols-rounded { font-size: 16px !important; line-height: 1 !important; }
.ci-sc-btn--ghost { background: transparent; }
.ci-sc-btn--green {
	background: linear-gradient(180deg, #2cd56b, #1da455);
	color: #02110a;
	border-color: transparent;
	box-shadow: 0 8px 22px -12px rgba(43, 214, 107, .55), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.ci-sc-btn--green:hover { filter: brightness(1.06); }
.ci-sc-btn-count {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.66rem;
	color: #5a7186;
	margin-left: 2px;
}

/* Card primitive */
.ci-sc-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
	gap: 18px;
	margin-bottom: 22px;
}
@media (max-width: 1180px) { .ci-sc-split { grid-template-columns: 1fr; } }
.ci-sc-card {
	background: #0b1622;
	border: 1px solid rgba(120, 160, 200, 0.08);
	border-radius: 12px;
	padding: 20px;
}
.ci-sc-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.ci-sc-card-title {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.84rem;
	color: #eaf1f8;
	font-weight: 700;
	letter-spacing: -0.005em;
}
.ci-sc-card-ico {
	width: 24px; height: 24px;
	border-radius: 7px;
	display: grid;
	place-items: center;
	background: rgba(43, 214, 107, 0.12);
	color: #2bd66b;
	border: 1px solid rgba(43, 214, 107, 0.28);
	box-sizing: border-box;
	flex-shrink: 0;
}
.ci-sc-card-ico .material-symbols-rounded {
	font-size: 14px !important;
	line-height: 1 !important;
}
.ci-sc-card-meta {
	color: #5a7186;
	font-size: 0.72rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.02em;
}

/* Drop zone */
.ci-sc-drop {
	border: 1.5px dashed rgba(120, 160, 200, 0.18);
	border-radius: 12px;
	background: #07111b;
	padding: 22px;
	min-height: 200px;
	display: grid;
	place-items: center;
	cursor: pointer;
	text-align: center;
	transition: border-color .14s, background .14s;
	outline: none;
}
.ci-sc-drop:hover,
.ci-sc-drop:focus {
	border-color: rgba(43, 214, 107, 0.4);
	background: rgba(43, 214, 107, 0.04);
}
.ci-sc-drop.is-drag {
	border-color: #2bd66b;
	background: rgba(43, 214, 107, 0.07);
}
.ci-sc-drop-empty { padding: 24px; }
.ci-sc-drop-ico {
	width: 48px; height: 48px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: rgba(43, 214, 107, 0.12);
	color: #2bd66b;
	border: 1px solid rgba(43, 214, 107, 0.28);
	margin: 0 auto 12px;
}
.ci-sc-drop-ico .material-symbols-rounded { font-size: 24px !important; line-height: 1 !important; }
.ci-sc-drop-title {
	font-size: 0.94rem;
	font-weight: 700;
	color: #eaf1f8;
	margin-bottom: 3px;
	letter-spacing: -0.005em;
}
.ci-sc-drop-sub {
	color: #5a7186;
	font-size: 0.78rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.01em;
}
.ci-sc-drop-preview {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	width: 100%;
	text-align: left;
}
/* HTML `hidden` must beat the class's display:grid; the UA stylesheet's
   [hidden] { display: none } loses on specificity otherwise. */
.ci-sc-drop-empty[hidden],
.ci-sc-drop-preview[hidden] { display: none !important; }
.ci-sc-preview {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	background: #050a0f;
	border: 1px solid rgba(120, 160, 200, 0.08);
	aspect-ratio: 4 / 3;
	max-height: 200px;
}
.ci-sc-preview img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.ci-sc-preview-x {
	position: absolute;
	top: 6px; right: 6px;
	width: 26px; height: 26px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(120, 160, 200, 0.18);
	color: #eaf1f8;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
}
.ci-sc-preview-x:hover { background: rgba(0, 0, 0, 0.9); border-color: rgba(236, 72, 112, 0.4); color: #ec4870; }
.ci-sc-preview-x .material-symbols-rounded { font-size: 16px !important; line-height: 1 !important; }
.ci-sc-file-meta {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	padding: 4px;
	min-width: 0;
}
.ci-sc-file-head {
	color: #5a7186;
	font-size: 0.66rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 4px;
}
.ci-sc-file-name {
	color: #eaf1f8;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.76rem;
	word-break: break-all;
	font-weight: 500;
}
.ci-sc-file-size {
	color: #5a7186;
	font-size: 0.7rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ci-sc-file-hint {
	color: #3a4f63;
	font-size: 0.7rem;
	margin-top: 10px;
	line-height: 1.5;
}

/* Context textarea */
.ci-sc-ctx-label {
	display: block;
	color: #8ea4ba;
	font-size: 0.78rem;
	margin: 14px 0 6px;
	font-weight: 600;
}
.ci-sc-ctx-opt { color: #3a4f63; font-weight: 400; }
.ci-sc-ctx-area {
	width: 100%;
	resize: vertical;
	min-height: 56px;
	background: #07111b;
	border: 1px solid rgba(120, 160, 200, 0.08);
	border-radius: 8px;
	padding: 9px 11px;
	color: #eaf1f8;
	font-family: inherit;
	font-size: 0.84rem;
	line-height: 1.5;
	outline: none;
	transition: border-color .14s, box-shadow .14s;
}
.ci-sc-ctx-area::placeholder { color: #3a4f63; }
.ci-sc-ctx-area:focus {
	border-color: rgba(43, 214, 107, 0.28);
	box-shadow: 0 0 0 3px rgba(43, 214, 107, 0.14);
}

/* Scan button */
.ci-sc-scan-btn {
	margin-top: 14px;
	width: 100%;
	padding: 12px 16px;
	border-radius: 10px;
	border: none;
	background: linear-gradient(180deg, #2cd56b, #1da455);
	color: #02110a;
	font-family: inherit;
	font-size: 0.88rem;
	font-weight: 700;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: filter .14s, transform .1s;
	box-shadow: 0 10px 24px -16px rgba(43, 214, 107, .6), inset 0 1px 0 rgba(255, 255, 255, .2);
	letter-spacing: -0.005em;
}
.ci-sc-scan-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ci-sc-scan-btn:not(:disabled):hover { filter: brightness(1.06); }
.ci-sc-scan-btn:active:not(:disabled) { transform: scale(.99); }
.ci-sc-scan-btn-ico { font-size: 16px !important; line-height: 1 !important; }
.ci-sc-scan-btn-spinner {
	width: 14px; height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(2, 17, 10, 0.25);
	border-top-color: #02110a;
	animation: ci-sc-spin .9s linear infinite;
	display: inline-block;
}
@keyframes ci-sc-spin { to { transform: rotate(360deg); } }

/* Verdict card */
.ci-sc-verdict { display: flex; flex-direction: column; gap: 0; }
.ci-sc-v-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(120, 160, 200, 0.08);
}
.ci-sc-v-label {
	color: #2bd66b;
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
}
.ci-sc-v-pair {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.85rem;
	letter-spacing: -0.025em;
	margin-top: 4px;
	line-height: 1;
	color: #eaf1f8;
	font-weight: 800;
}
.ci-sc-v-pair.is-buy { color: #34d399; }
.ci-sc-v-pair.is-sell { color: #f87171; }
.ci-sc-v-pair.is-wait { color: #94a3b8; }
.ci-sc-v-meta {
	color: #5a7186;
	font-size: 0.74rem;
	margin-top: 6px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.02em;
}

.ci-sc-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	border: 1px solid transparent;
	white-space: nowrap;
}
.ci-sc-badge--buy   { color: #2bd66b; background: rgba(43, 214, 107, 0.12); border-color: rgba(43, 214, 107, 0.28); }
.ci-sc-badge--sell  { color: #ec4870; background: rgba(236, 72, 112, 0.14); border-color: rgba(236, 72, 112, 0.30); }
.ci-sc-badge--wait,
.ci-sc-badge--idle  { color: #3a4f63; background: transparent; border-color: rgba(120, 160, 200, 0.14); }

.ci-sc-scanning {
	border: 1px solid rgba(43, 214, 107, 0.28);
	background: rgba(43, 214, 107, 0.12);
	color: #2bd66b;
	padding: 11px 13px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 0.78rem;
	font-weight: 600;
	margin-top: 14px;
}
.ci-sc-spin {
	width: 14px; height: 14px;
	border-radius: 50%;
	border: 2px solid rgba(43, 214, 107, 0.25);
	border-top-color: #2bd66b;
	animation: ci-sc-spin .9s linear infinite;
	flex-shrink: 0;
}
.ci-sc-typing {
	display: inline-block;
	width: 6px; height: 12px;
	background: #2bd66b;
	vertical-align: middle;
	margin-left: 4px;
	animation: ci-sc-blink .9s steps(2) infinite;
}
@keyframes ci-sc-blink { 50% { opacity: 0; } }

.ci-sc-confidence {
	margin-top: 14px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}
.ci-sc-conf-num {
	font-family: 'Exo 2', sans-serif;
	font-size: 2.6rem;
	line-height: 1;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: #eaf1f8;
}
.ci-sc-conf-pct {
	font-size: 1.2rem;
	color: #5a7186;
	margin-left: 2px;
	font-weight: 500;
}
.ci-sc-conf-cap {
	color: #5a7186;
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	text-align: right;
	line-height: 1.4;
}
.ci-sc-conf-grade {
	display: block;
	margin-top: 4px;
	color: #2bd66b;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.02em;
	text-transform: none;
	font-size: 0.72rem;
}

.ci-sc-bar {
	margin-top: 10px;
	height: 5px;
	border-radius: 999px;
	background: rgba(120, 160, 200, 0.08);
	overflow: hidden;
}
.ci-sc-bar > span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #f4b942, #2bd66b 60%, #38bdf8);
	border-radius: 999px;
	transition: width .8s cubic-bezier(.2, .7, .2, 1);
}

/* 4-cell stat grid */
.ci-sc-grid-4 {
	margin-top: 16px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
@media (max-width: 760px) { .ci-sc-grid-4 { grid-template-columns: repeat(2, 1fr); } }
.ci-sc-stat {
	padding: 11px 12px;
	border: 1px solid rgba(120, 160, 200, 0.08);
	border-radius: 8px;
	background: #07111b;
}
.ci-sc-stat-k {
	color: #5a7186;
	font-size: 0.6rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}
.ci-sc-stat-v {
	color: #eaf1f8;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.84rem;
	margin-top: 5px;
	letter-spacing: 0.005em;
	font-weight: 600;
}
.ci-sc-stat-v.muted { color: #3a4f63; }

.ci-sc-disclaimer {
	margin-top: 14px;
	font-size: 0.7rem;
	line-height: 1.5;
	color: #5a7186;
	text-align: center;
}
.ci-sc-disclaimer a { color: #7c93a8; text-decoration: underline; }

.ci-sc-invalidation {
	margin-top: 12px;
	padding: 10px 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	border: 1px solid rgba(245, 158, 11, 0.28);
	border-radius: 8px;
	background: rgba(245, 158, 11, 0.07);
	color: #e8b765;
	font-size: 0.86rem;
}
.ci-sc-invalidation .material-symbols-rounded {
	font-size: 1.1rem;
	flex-shrink: 0;
}
.ci-sc-invalidation b {
	color: #f0c987;
	font-weight: 700;
}
.ci-sc-reasoning {
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid rgba(120, 160, 200, 0.08);
	border-radius: 8px;
	background: #07111b;
}
.ci-sc-reasoning-head {
	color: #5a7186;
	font-size: 0.62rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 7px;
}
.ci-sc-reasoning-head .material-symbols-rounded {
	font-size: 14px !important;
	line-height: 1 !important;
	color: #5a7186;
}
.ci-sc-reasoning p {
	color: #8ea4ba;
	font-size: 0.86rem;
	line-height: 1.65;
	margin: 0;
}
.ci-sc-reasoning-empty {
	color: #3a4f63;
	font-size: 0.82rem;
}
.ci-sc-reasoning-empty b { color: #2bd66b; }

.ci-sc-v-actions {
	margin-top: 14px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.ci-sc-v-actions .ci-sc-btn { padding: 7px 12px; font-size: 0.78rem; }
.ci-sc-v-actions .ci-sc-btn .material-symbols-rounded { font-size: 14px !important; }

/* Section heading */
.ci-sc-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin: 18px 0 14px;
}
.ci-sc-section-head h2 {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
	line-height: 1.2;
	color: #eaf1f8;
}
.ci-sc-section-meta {
	color: #5a7186;
	font-size: 0.78rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	letter-spacing: 0.02em;
}

/* Features grid */
.ci-sc-features {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 22px;
}
@media (max-width: 1180px) { .ci-sc-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .ci-sc-features { grid-template-columns: 1fr; } }
.ci-sc-feat {
	padding: 18px;
	border-radius: 12px;
	background: #0b1622;
	border: 1px solid rgba(120, 160, 200, 0.08);
	transition: border-color .18s, background .18s, transform .18s;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ci-sc-feat:hover {
	border-color: rgba(120, 160, 200, 0.14);
	background: #0d1a28;
	transform: translateY(-1px);
}
.ci-sc-feat-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}
.ci-sc-feat-ico {
	width: 32px; height: 32px;
	border-radius: 9px;
	display: grid;
	place-items: center;
	border: 1px solid;
	flex: 0 0 32px;
}
.ci-sc-feat-ico .material-symbols-rounded { font-size: 18px !important; line-height: 1 !important; }
.ci-sc-feat--cyan   .ci-sc-feat-ico { color: #38bdf8; background: rgba(56, 189, 248, 0.12);  border-color: rgba(56, 189, 248, 0.30); }
.ci-sc-feat--green  .ci-sc-feat-ico { color: #2bd66b; background: rgba(43, 214, 107, 0.12);  border-color: rgba(43, 214, 107, 0.28); }
.ci-sc-feat--amber  .ci-sc-feat-ico { color: #f4b942; background: rgba(244, 185, 66, 0.12);  border-color: rgba(244, 185, 66, 0.30); }
.ci-sc-feat--violet .ci-sc-feat-ico { color: #a78bfa; background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.30); }
.ci-sc-feat h3 {
	font-size: 0.92rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.005em;
	color: #eaf1f8;
}
.ci-sc-feat p {
	margin: 0;
	color: #8ea4ba;
	font-size: 0.8rem;
	line-height: 1.55;
}
.ci-sc-feat-stat {
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px dashed rgba(120, 160, 200, 0.08);
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.ci-sc-feat-stat-n {
	font-family: 'Exo 2', sans-serif;
	font-size: 1rem;
	color: #eaf1f8;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.ci-sc-feat-stat-k {
	color: #5a7186;
	font-size: 0.66rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
}

/* How it works — visual flow */
.ci-sc-flow {
	border: 1px solid rgba(120, 160, 200, 0.08);
	border-radius: 12px;
	background: #0b1622;
	padding: 22px;
	margin-bottom: 22px;
}
.ci-sc-flow .ci-sc-section-head { margin-top: 0; }
.ci-sc-flow-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 0;
	align-items: stretch;
	position: relative;
}
@media (max-width: 1180px) { .ci-sc-flow-grid { grid-template-columns: 1fr; } }
.ci-sc-flow-step {
	padding: 0 18px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ci-sc-flow-step:first-child { padding-left: 0; }
.ci-sc-flow-step:last-child { padding-right: 0; }
@media (min-width: 1181px) {
	.ci-sc-flow-step + .ci-sc-flow-step::before {
		content: '';
		position: absolute;
		left: 0; top: 28px; bottom: 28px;
		width: 1px;
		background: rgba(120, 160, 200, 0.14);
	}
	.ci-sc-flow-step + .ci-sc-flow-step::after {
		content: '';
		position: absolute;
		left: -4px; top: 50%;
		transform: translateY(-50%);
		width: 9px; height: 9px;
		border-radius: 50%;
		background: #0b1622;
		border: 1px solid rgba(120, 160, 200, 0.22);
	}
}
.ci-sc-flow-art {
	position: relative;
	min-height: 160px;
	border-radius: 8px;
	border: 1px solid rgba(120, 160, 200, 0.08);
	background: #07111b;
	overflow: hidden;
}

.ci-sc-flow-art--chart { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.ci-sc-art-axis {
	display: flex;
	justify-content: space-between;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.62rem;
	color: #3a4f63;
}
.ci-sc-art-px { color: #2bd66b; font-weight: 700; }
.ci-sc-art-canvas { flex: 1; position: relative; }
.ci-sc-grid-l {
	position: absolute;
	left: 0; right: 0;
	height: 1px;
	background: rgba(120, 160, 200, 0.08);
}
.ci-sc-candle {
	position: absolute;
	width: 4px;
	border-radius: 1px;
}
.ci-sc-candle.is-up { background: #2bd66b; box-shadow: 0 0 0 0.5px rgba(43, 214, 107, 0.4); }
.ci-sc-candle.is-dn { background: #ec4870; box-shadow: 0 0 0 0.5px rgba(236, 72, 112, 0.4); }
.ci-sc-wick {
	position: absolute;
	width: 1px;
}
.ci-sc-wick.is-up { background: #2bd66b; }
.ci-sc-wick.is-dn { background: #ec4870; }

/* Faded chart layer under the laser-scan overlay (step 2 of the flow). */
.ci-sc-art-chart-faded {
	position: absolute;
	inset: 12px;
	opacity: 0.5;
}
.ci-sc-art-chart-faded .ci-sc-candle,
.ci-sc-art-chart-faded .ci-sc-wick { /* candles inherit their own colors */ }

.ci-sc-art-blur {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 30%, rgba(11, 22, 34, 0.7) 100%),
		repeating-linear-gradient(45deg, rgba(43, 214, 107, 0.04) 0 2px, transparent 2px 8px);
}
.ci-sc-art-laser {
	position: absolute;
	left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, #2bd66b, transparent);
	box-shadow: 0 0 12px #2bd66b;
	animation: ci-sc-scan 2.4s ease-in-out infinite;
}
@keyframes ci-sc-scan {
	0%, 100% { top: 12%; opacity: 0.8; }
	50% { top: 88%; opacity: 1; }
}
.ci-sc-tag-pill {
	position: absolute;
	font-size: 0.58rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border: 1px solid;
	backdrop-filter: blur(4px);
	background: rgba(11, 22, 34, 0.85);
}
.ci-sc-tp--g { color: #2bd66b; border-color: rgba(43, 214, 107, 0.28); }
.ci-sc-tp--c { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); }
.ci-sc-tp--a { color: #f4b942; border-color: rgba(244, 185, 66, 0.35); }
.ci-sc-tp--v { color: #a78bfa; border-color: rgba(167, 139, 250, 0.35); }

/* The verdict mockup packs more rows than the chart art — give it room
   and let it size to content so Entry/Stop/Target don't get clipped. */
.ci-sc-flow-art--verdict {
	padding: 12px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: auto;
	min-height: 160px;
	justify-content: space-between;
}
.ci-sc-art-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ci-sc-art-l {
	color: #5a7186;
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
}
.ci-sc-art-badge {
	color: #2bd66b;
	background: rgba(43, 214, 107, 0.12);
	border: 1px solid rgba(43, 214, 107, 0.28);
	border-radius: 999px;
	padding: 2px 8px;
	font-size: 0.58rem;
	font-weight: 700;
	letter-spacing: 0.06em;
}
.ci-sc-art-pair {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.15rem;
	font-weight: 800;
	color: #eaf1f8;
	letter-spacing: -0.02em;
	line-height: 1;
}
.ci-sc-art-conf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.ci-sc-art-conf-n {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.3rem;
	font-weight: 800;
	color: #eaf1f8;
	letter-spacing: -0.02em;
}
.ci-sc-art-conf-pct { font-size: 0.68rem; color: #5a7186; margin-left: 1px; }
.ci-sc-art-conf-cap {
	font-size: 0.56rem;
	color: #5a7186;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
}
.ci-sc-art-mini-bar {
	height: 4px;
	border-radius: 999px;
	background: rgba(120, 160, 200, 0.08);
	overflow: hidden;
}
.ci-sc-art-mini-bar > span {
	display: block;
	height: 100%;
	width: 74%;
	background: linear-gradient(90deg, #f4b942, #2bd66b 60%, #38bdf8);
}
.ci-sc-art-lvls {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 4px;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.6rem;
	color: #8ea4ba;
}
.ci-sc-art-lvls-l {
	color: #5a7186;
	font-size: 0.54rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 2px;
}
.ci-sc-art-lvls-v { color: #eaf1f8; font-weight: 600; }
.ci-sc-art-lvls-r { color: #ec4870; }
.ci-sc-art-lvls-g { color: #2bd66b; }

.ci-sc-flow-label {
	display: flex;
	align-items: center;
	gap: 8px;
}
.ci-sc-step-n {
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	color: #2bd66b;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}
.ci-sc-step-t {
	color: #eaf1f8;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: -0.005em;
}
.ci-sc-step-b {
	color: #8ea4ba;
	font-size: 0.8rem;
	line-height: 1.55;
	margin: 0;
	max-width: 92%;
}

/* Recent scans table */
.ci-sc-recent {
	padding: 0;
	overflow: hidden;
	margin-bottom: 22px;
}
.ci-sc-recent-head {
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid rgba(120, 160, 200, 0.08);
}
.ci-sc-recent-title {
	display: flex;
	align-items: center;
	gap: 9px;
	color: #eaf1f8;
	font-weight: 700;
	font-size: 0.86rem;
}
.ci-sc-recent-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ci-sc-recent-count {
	color: #5a7186;
	font-size: 0.72rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ci-sc-recent-link {
	color: #2bd66b;
	font-size: 0.78rem;
	font-weight: 600;
	text-decoration: none;
}
.ci-sc-recent-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.ci-sc-recent-row {
	display: grid;
	grid-template-columns: 14px 70px 1fr 70px 70px 70px;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	border-top: 1px solid rgba(120, 160, 200, 0.08);
	font-size: 0.78rem;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	transition: background .14s;
}
.ci-sc-recent-row:hover { background: rgba(120, 160, 200, 0.025); }
.ci-sc-recent-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #2bd66b;
	box-shadow: 0 0 0 3px rgba(43, 214, 107, 0.16);
}
.ci-sc-recent-dot.is-sell { background: #ec4870; box-shadow: 0 0 0 3px rgba(236, 72, 112, 0.16); }
.ci-sc-recent-dot.is-wait { background: #f4b942; box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.16); }
.ci-sc-recent-vbadge {
	font-size: 0.62rem;
	padding: 3px 7px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	justify-self: start;
	border: 1px solid;
}
.ci-sc-recent-vbadge.is-buy  { color: #2bd66b; background: rgba(43, 214, 107, 0.12); border-color: rgba(43, 214, 107, 0.28); }
.ci-sc-recent-vbadge.is-sell { color: #ec4870; background: rgba(236, 72, 112, 0.14); border-color: rgba(236, 72, 112, 0.30); }
.ci-sc-recent-vbadge.is-wait { color: #f4b942; background: rgba(244, 185, 66, 0.12); border-color: rgba(244, 185, 66, 0.30); }
.ci-sc-recent-ctx {
	color: #8ea4ba;
	font-size: 0.78rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ci-sc-recent-conf {
	color: #eaf1f8;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.76rem;
	font-weight: 700;
}
.ci-sc-recent-ago {
	color: #5a7186;
	font-size: 0.7rem;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ci-sc-recent-open {
	color: #5a7186;
	font-size: 0.7rem;
	justify-self: end;
}
.ci-sc-recent-row:hover .ci-sc-recent-open { color: #2bd66b; }

@media (max-width: 900px) {
	.ci-sc-recent-row { grid-template-columns: 12px 60px 1fr 60px 60px; }
	.ci-sc-recent-open { display: none; }
}
@media (max-width: 600px) {
	.ci-sc-recent-row { grid-template-columns: 12px 1fr 60px; }
	.ci-sc-recent-conf, .ci-sc-recent-ago { display: none; }
}

/* History + Scan view (reuse same primitives) */
.ci-sc-history-card { padding: 0; overflow: hidden; }
.ci-sc-history-list { list-style: none; margin: 0; padding: 0; }
.ci-sc-history-row { border-top: 1px solid rgba(120, 160, 200, 0.08); }
.ci-sc-history-row:first-child { border-top: 0; }
.ci-sc-history-link-row {
	display: grid;
	grid-template-columns: 70px 70px 1fr 60px 70px;
	align-items: center;
	gap: 12px;
	padding: 12px 18px;
	text-decoration: none;
	color: inherit;
	transition: background .14s;
	font-size: 0.78rem;
}
.ci-sc-history-link-row:hover { background: rgba(120, 160, 200, 0.025); }
.ci-sc-history-dir {
	font-size: 0.62rem;
	padding: 3px 7px;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	border: 1px solid;
}
.ci-sc-history-row.is-buy  .ci-sc-history-dir { color: #2bd66b; background: rgba(43, 214, 107, 0.12); border-color: rgba(43, 214, 107, 0.28); }
.ci-sc-history-row.is-sell .ci-sc-history-dir { color: #ec4870; background: rgba(236, 72, 112, 0.14); border-color: rgba(236, 72, 112, 0.30); }
.ci-sc-history-row.is-wait .ci-sc-history-dir { color: #f4b942; background: rgba(244, 185, 66, 0.12); border-color: rgba(244, 185, 66, 0.30); }
.ci-sc-history-conf { color: #eaf1f8; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 700; }
.ci-sc-history-snippet { color: #8ea4ba; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-sc-history-time { color: #5a7186; font-size: 0.7rem; font-family: 'JetBrains Mono', ui-monospace, monospace; }
@media (max-width: 900px) {
	.ci-sc-history-link-row { grid-template-columns: 70px 1fr 60px; }
	.ci-sc-history-conf { display: none; }
}

/* Single-scan view */
.ci-sc-scan-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}
@media (min-width: 1024px) {
	.ci-sc-scan-grid { grid-template-columns: 1.2fr 1fr; align-items: start; }
}
.ci-sc-scan-image-card { display: flex; flex-direction: column; gap: 12px; }
.ci-sc-scan-image {
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
	display: block;
}
.ci-sc-scan-prompt {
	font-size: 0.82rem;
	color: #8ea4ba;
	margin: 0;
	padding: 10px 12px;
	background: #07111b;
	border: 1px solid rgba(120, 160, 200, 0.08);
	border-radius: 8px;
	line-height: 1.5;
}
.ci-sc-scan-prompt strong { color: #2bd66b; }
.ci-sc-scan-actions {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid rgba(120, 160, 200, 0.08);
}

/* ── Detail-page result card ─────────────────────────────────────── */
.ci-sc-result {
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	overflow: hidden;
}
/* Thin direction-coloured rail down the left edge of the card */
.ci-sc-result::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: #3a4f63;
}
.ci-sc-result.is-buy::before  { background: linear-gradient(#34d399, #059669); }
.ci-sc-result.is-sell::before { background: linear-gradient(#f87171, #dc2626); }
.ci-sc-result.is-wait::before { background: #64748b; }

.ci-sc-result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.ci-sc-result-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: 'Exo 2', sans-serif;
	font-size: 1.02rem;
	font-weight: 700;
	color: #eaf1f8;
}
.ci-sc-result-conf { text-align: right; line-height: 1; }
.ci-sc-result-conf-n {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.4rem;
	font-weight: 800;
	color: #eaf1f8;
}
.ci-sc-result-conf-n span { font-size: 0.85rem; color: #5a7186; margin-left: 1px; }
.ci-sc-result-conf-k {
	display: block;
	font-size: 0.58rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #5a7186;
	margin-top: 3px;
	font-weight: 700;
}

/* Direction pill — used in the hero + the card header */
.ci-sc-dir-pill {
	display: inline-flex;
	align-items: center;
	padding: 3px 11px;
	border-radius: 999px;
	font-family: 'Exo 2', sans-serif;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	border: 1px solid transparent;
}
.ci-sc-dir-pill.is-buy  { color: #34d399; background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.32); }
.ci-sc-dir-pill.is-sell { color: #f87171; background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.32); }
.ci-sc-dir-pill.is-wait { color: #94a3b8; background: rgba(148, 163, 184, 0.12); border-color: rgba(148, 163, 184, 0.30); }

/* Level tiles (entry / stop / target / key levels) */
.ci-sc-levels {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.ci-sc-lvl {
	padding: 12px 14px;
	border: 1px solid rgba(120, 160, 200, 0.10);
	border-left-width: 3px;
	border-radius: 9px;
	background: #07111b;
}
.ci-sc-lvl.is-entry  { border-left-color: #38bdf8; }
.ci-sc-lvl.is-stop   { border-left-color: #f87171; }
.ci-sc-lvl.is-target { border-left-color: #34d399; }
.ci-sc-lvl.is-keys   { border-left-color: #64748b; }
.ci-sc-lvl-k {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #5a7186;
	font-size: 0.6rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	font-weight: 700;
}
.ci-sc-lvl-k .material-symbols-rounded { font-size: 0.95rem !important; }
.ci-sc-lvl.is-entry  .ci-sc-lvl-k .material-symbols-rounded { color: #38bdf8; }
.ci-sc-lvl.is-stop   .ci-sc-lvl-k .material-symbols-rounded { color: #f87171; }
.ci-sc-lvl.is-target .ci-sc-lvl-k .material-symbols-rounded { color: #34d399; }
.ci-sc-lvl-v {
	margin-top: 7px;
	color: #eaf1f8;
	font-family: 'JetBrains Mono', ui-monospace, monospace;
	font-size: 0.96rem;
	font-weight: 600;
	letter-spacing: 0.005em;
}
.ci-sc-lvl.is-stop   .ci-sc-lvl-v { color: #fca5a5; }
.ci-sc-lvl.is-target .ci-sc-lvl-v { color: #6ee7b7; }

/* Action buttons */
.ci-sc-btn-ghost, .ci-sc-btn-danger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 8px;
	font-size: 0.84rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.ci-sc-btn-ghost .material-symbols-rounded,
.ci-sc-btn-danger .material-symbols-rounded { font-size: 1rem !important; }
.ci-sc-btn-ghost {
	color: #aeb9c6;
	background: transparent;
	border: 1px solid rgba(120, 160, 200, 0.18);
}
.ci-sc-btn-ghost:hover { color: #eaf1f8; border-color: rgba(120, 160, 200, 0.35); background: rgba(120, 160, 200, 0.06); }
.ci-sc-btn-danger {
	color: #f87171;
	background: rgba(248, 113, 113, 0.08);
	border: 1px solid rgba(248, 113, 113, 0.25);
}
.ci-sc-btn-danger:hover { color: #fff; background: #dc2626; border-color: #dc2626; }

/* Empty state */
.ci-sc-empty {
	text-align: center;
	padding: 60px 20px;
	border-radius: 16px;
	border: 1px dashed rgba(120, 160, 200, 0.18);
	background: #07111b;
}
.ci-sc-empty .material-symbols-rounded {
	font-size: 42px !important;
	color: #2bd66b;
	margin-bottom: 8px;
	line-height: 1 !important;
}
.ci-sc-empty h2 {
	font-family: 'Exo 2', sans-serif;
	font-size: 1.1rem;
	color: #eaf1f8;
	margin: 0 0 4px;
}
.ci-sc-empty p { color: #8ea4ba; margin: 0; font-size: 0.88rem; }
.ci-sc-empty a { color: #2bd66b; }

.ci-sc-history-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	border-radius: 10px;
	border: 1px solid rgba(43, 214, 107, 0.28);
	background: rgba(43, 214, 107, 0.06);
	color: #2bd66b;
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 700;
	transition: border-color .14s;
}
.ci-sc-history-link:hover { border-color: rgba(43, 214, 107, 0.55); }
.ci-sc-history-link .material-symbols-rounded { font-size: 16px !important; line-height: 1 !important; }

/* ════════════════════════════════════════════════════════════════════
   Marketing pages — pricing / about / contact (guest, landing chrome)
   ════════════════════════════════════════════════════════════════════ */
.ci-mkt {
	position: relative;
	z-index: 2;
	width: min(1100px, calc(100% - 32px));
	margin: 0 auto;
	padding: 116px 0 8px;          /* top clears the fixed landing nav */
}
.ci-mkt-hero { text-align: center; max-width: 780px; margin: 0 auto; }
.ci-mkt-eyebrow {
	display: inline-block; font-size: 0.7rem; letter-spacing: 0.16em;
	text-transform: uppercase; color: #ffb000; font-weight: 700; margin-bottom: 14px;
}
.ci-mkt-hero h1 {
	font-family: "Exo 2", sans-serif; font-weight: 800;
	font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.08; color: #f4f8ff; margin: 0 0 14px;
}
.ci-mkt-hero > p { color: #9fb2c8; font-size: 1.02rem; line-height: 1.6; margin: 0 auto; max-width: 620px; }

.ci-mkt-section { margin-top: 54px; }
.ci-mkt-section-head { text-align: center; max-width: 700px; margin: 0 auto 26px; }
.ci-mkt-section-head h2 {
	font-family: "Exo 2", sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem);
	color: #eef4fc; margin: 0 0 10px;
}
.ci-mkt-section-head p { color: #9fb2c8; line-height: 1.6; margin: 0; }

.ci-mkt-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
	.ci-mkt-grid-2 { grid-template-columns: 1fr 1fr; }
	.ci-mkt-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
.ci-mkt-card {
	border: 1px solid rgba(255,255,255,0.08);
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(8,16,34,0.5));
	border-radius: 16px; padding: 22px;
}
.ci-mkt-card h3 { color: #eaf1f8; font-weight: 700; font-size: 1.05rem; margin: 12px 0 6px; }
.ci-mkt-card p { color: #93a6bd; font-size: 0.9rem; line-height: 1.55; margin: 0; }
.ci-mkt-card-ic {
	width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
	font-size: 1.2rem; background: rgba(255,176,0,0.12); color: #ffb000;
	border: 1px solid rgba(255,176,0,0.2);
}

.ci-mkt-cta {
	margin-top: 60px; text-align: center; padding: 44px 24px;
	border: 1px solid rgba(255,255,255,0.08); border-radius: 20px;
	background: radial-gradient(120% 140% at 50% 0%, rgba(255,176,0,0.10), transparent 60%), rgba(8,16,34,0.5);
}
.ci-mkt-cta h2 { font-family:"Exo 2",sans-serif; font-weight:800; font-size: clamp(1.5rem,3vw,2rem); color:#f4f8ff; margin:0 0 10px; }
.ci-mkt-cta > p { color:#9fb2c8; margin:0 auto 20px; max-width: 520px; }
.ci-mkt-btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ci-mkt-btn-primary {
	display:inline-flex; align-items:center; gap:8px; padding: 13px 22px; border-radius: 12px;
	background:#f4f4f4; color:#111; font-weight:700; font-size:0.9rem; text-decoration:none;
	border:0; cursor:pointer; transition: transform .2s ease;
}
.ci-mkt-btn-primary:hover { transform: translateY(-1px); }
.ci-mkt-btn-ghost {
	display:inline-flex; align-items:center; gap:8px; padding: 13px 22px; border-radius:12px;
	border:1px solid rgba(255,255,255,0.18); color:#dce6f2; font-weight:600; font-size:0.9rem; text-decoration:none;
}
.ci-mkt-btn-ghost:hover { border-color: rgba(255,255,255,0.4); }

/* FAQ (native <details>) */
.ci-mkt-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.ci-mkt-faq details {
	border:1px solid rgba(255,255,255,0.08); border-radius: 12px; background: rgba(8,16,34,0.45); padding: 2px 18px;
}
.ci-mkt-faq summary {
	cursor: pointer; list-style: none; padding: 15px 0; color:#eaf1f8; font-weight:600; font-size: 0.95rem;
	display:flex; justify-content:space-between; align-items:center; gap: 12px;
}
.ci-mkt-faq summary::-webkit-details-marker { display:none; }
.ci-mkt-faq summary::after { content:"+"; color:#ffb000; font-size:1.3rem; line-height:1; }
.ci-mkt-faq details[open] summary::after { content:"\2013"; }
.ci-mkt-faq details p { color:#93a6bd; line-height:1.6; margin: 0 0 15px; font-size: 0.9rem; }

/* Public pricing cards */
.ci-mkt-plans { display:grid; gap:18px; grid-template-columns:1fr; max-width: 860px; margin: 0 auto; }
@media (min-width: 760px) { .ci-mkt-plans { grid-template-columns: 1fr 1fr; align-items: stretch; } }
.ci-mkt-plan {
	border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding: 26px;
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(8,16,34,0.55)); display:flex; flex-direction:column;
}
.ci-mkt-plan--featured { border-color: rgba(56,189,248,0.45); box-shadow: 0 0 0 1px rgba(56,189,248,0.2), 0 24px 60px -24px rgba(56,189,248,0.45); }
.ci-mkt-plan-name { font-weight:800; font-size:1.1rem; color:#eaf1f8; display:flex; align-items:center; gap:10px; }
.ci-mkt-plan-pill { font-size:0.58rem; letter-spacing:0.08em; text-transform:uppercase; font-weight:700; padding:4px 8px; border-radius:999px; background: rgba(16,185,129,0.16); color:#34d399; border:1px solid rgba(16,185,129,0.3); }
.ci-mkt-plan-tag { color:#8ea4ba; font-size:0.82rem; margin: 4px 0 16px; }
.ci-mkt-plan-price { display:flex; align-items:baseline; gap:6px; }
.ci-mkt-plan-price b { font-family:"Exo 2",sans-serif; font-size: 2.4rem; color:#fff; font-weight:800; line-height:1; }
.ci-mkt-plan-price span { color:#8ea4ba; font-size:0.85rem; }
.ci-mkt-plan-note { color:#7d92a8; font-size:0.78rem; margin: 8px 0 0; }
.ci-mkt-plan-feats { list-style:none; padding:0; margin: 18px 0; display:grid; gap:10px; }
.ci-mkt-plan-feats li { display:flex; gap:10px; color:#cdd9e6; font-size:0.88rem; line-height:1.4; }
.ci-mkt-plan-feats li::before { content:"\2713"; color:#34d399; font-weight:700; }
.ci-mkt-plan .ci-mkt-btn-primary, .ci-mkt-plan .ci-mkt-btn-ghost { justify-content:center; margin-top:auto; }

.ci-mkt-cycle { display:flex; justify-content:center; margin: 10px 0 26px; }
.ci-mkt-cycle-toggle { display:inline-flex; gap:4px; padding:4px; background:#07111b; border:1px solid rgba(120,160,200,0.16); border-radius:999px; }
.ci-mkt-cycle-btn { border:0; background:transparent; color:#9fb2c8; font-weight:600; font-size:0.8rem; padding:8px 16px; border-radius:999px; cursor:pointer; }
.ci-mkt-cycle-btn.is-active { background: rgba(16,185,129,0.18); color:#34d399; }
.ci-mkt-cycle-save { font-size:0.68rem; opacity:0.85; }

/* Contact */
.ci-mkt-contact { display:grid; gap:24px; grid-template-columns:1fr; max-width: 920px; margin: 0 auto; }
@media (min-width: 820px) { .ci-mkt-contact { grid-template-columns: 1.25fr 0.75fr; align-items:start; } }
.ci-mkt-form { position:relative; border:1px solid rgba(255,255,255,0.08); border-radius:18px; padding: 24px; background: rgba(8,16,34,0.5); }
.ci-mkt-field { margin-bottom: 16px; }
.ci-mkt-field label { display:block; font-size:0.8rem; color:#bcccdd; margin-bottom:6px; font-weight:600; }
.ci-mkt-field input, .ci-mkt-field textarea {
	width:100%; background:#0a1626; border:1px solid rgba(255,255,255,0.12); border-radius:10px;
	padding: 11px 13px; color:#eaf1f8; font-size:0.9rem; font-family:inherit;
}
.ci-mkt-field input:focus, .ci-mkt-field textarea:focus { outline:none; border-color: rgba(56,189,248,0.6); }
.ci-mkt-field textarea { min-height: 150px; resize: vertical; }
.ci-mkt-hp { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
.ci-mkt-aside { display:grid; gap:14px; }
.ci-mkt-alert { border-radius:10px; padding: 12px 14px; font-size:0.88rem; margin-bottom: 18px; }
.ci-mkt-alert--ok { background: rgba(16,185,129,0.12); border:1px solid rgba(16,185,129,0.35); color:#a7f3d0; }
.ci-mkt-alert--err { background: rgba(244,63,94,0.12); border:1px solid rgba(244,63,94,0.35); color:#fecdd3; }

/* Marketing footer */
.ci-mkt-footer { position:relative; z-index:2; border-top:1px solid rgba(255,255,255,0.08); margin-top: 64px; padding: 44px 0 28px; background: rgba(4,8,18,0.6); }
.ci-mkt-footer-inner { width:min(1100px, calc(100% - 32px)); margin:0 auto; display:grid; gap:32px; grid-template-columns:1fr; }
@media (min-width: 820px) { .ci-mkt-footer-inner { grid-template-columns: 1.4fr 2fr; } }
.ci-mkt-footer-logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#f3f3f3; font-family:"Exo 2",sans-serif; text-transform:uppercase; font-size:1rem; }
.ci-mkt-footer-logo img { width:30px; height:30px; }
.ci-mkt-footer-logo em { font-style:normal; font-size:0.45rem; font-weight:700; letter-spacing:0.12em; padding:3px 6px; border-radius:999px; background:rgba(255,176,0,0.14); color:#ffb000; border:1px solid rgba(255,176,0,0.2); }
.ci-mkt-footer-brand p { color:#8194ab; font-size:0.85rem; line-height:1.6; margin: 14px 0 0; max-width: 320px; }
.ci-mkt-footer-cols { display:grid; gap:24px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .ci-mkt-footer-cols { grid-template-columns: repeat(4, 1fr); } }
.ci-mkt-footer-col h3 { color:#cdd9e6; font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; margin:0 0 12px; }
.ci-mkt-footer-col a { display:block; color:#8194ab; font-size:0.85rem; text-decoration:none; padding: 5px 0; transition: color .2s; }
.ci-mkt-footer-col a:hover { color:#fff; }
.ci-mkt-footer-bottom { width:min(1100px, calc(100% - 32px)); margin: 28px auto 0; padding-top: 20px; border-top:1px solid rgba(255,255,255,0.06); display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; }
.ci-mkt-footer-bottom p { color:#6f8298; font-size:0.78rem; margin:0; }
.ci-mkt-footer-risk { max-width: 540px; }