/* ───────────────────────────────────────────────────────────
   Ecom Agent — landing styles
   Built on the Cash Joiner design system (dark theme, sky accent)
   ─────────────────────────────────────────────────────────── */

@font-face {
	font-family: 'Nunito';
	src: url('fonts/Nunito-VariableFont.woff2') format('woff2-variations');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Nunito Sans';
	src: url('fonts/NunitoSans-VariableFont.woff2') format('woff2-variations');
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* accent — sky */
	--accent: #a0c4ff;
	--accent-2: #bbd4ff;
	--accent-deep: #8fb8ff; /* bright sky tone for text/links/icons on dark */
	--accent-fg: #0e0f12;
	--accent-dim: rgba(160, 196, 255, 0.16);
	--accent-glow: rgba(160, 196, 255, 0.4);

	/* ink + paper (dark theme) — ink flips to white so rgba(ink, α) surfaces work on dark */
	--ink: 255, 255, 255;
	--bg: #0b0c0f;
	--bg-elev: #16181f;
	--bg-elev-2: #101219;
	--bg-chip: rgba(255, 255, 255, 0.06);
	--stage-1: #14151a;
	--stage-2: #050608;

	--text: #ffffff;
	--text-dim: rgba(255, 255, 255, 0.66);
	--text-mute: rgba(255, 255, 255, 0.46);
	--text-faint: rgba(255, 255, 255, 0.3);

	--border: rgba(255, 255, 255, 0.1);
	--border-strong: rgba(255, 255, 255, 0.2);
	--grid-dot: rgba(255, 255, 255, 0.05);

	/* radii */
	--r-sm: 10px;
	--r-md: 14px;
	--r-lg: 18px;
	--r-xl: 22px;
	--r-2xl: 28px;
	--pill: 999px;

	/* type */
	--font-display: 'Nunito', system-ui, sans-serif;
	--font-sans: 'Nunito Sans', system-ui, 'Segoe UI', Roboto, sans-serif;

	--shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45);
	--shadow-pop: 0 28px 64px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
	--shadow-cta: 0 8px 26px var(--accent-glow);

	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

body {
	font-family: var(--font-sans);
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.5;
	overflow-x: hidden;
	position: relative;
}

/* ── The stage: radial gradient + dot grid, fixed behind everything ── */
.stage {
	position: fixed;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	background: radial-gradient(
		120% 90% at 50% -10%,
		var(--stage-1) 0%,
		var(--bg) 55%,
		var(--stage-2) 130%
	);
}
.stage::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--grid-dot) 1.4px, transparent 1.4px);
	background-size: 28px 28px;
	-webkit-mask-image: radial-gradient(
		130% 90% at 50% 20%,
		#000 30%,
		transparent 78%
	);
	mask-image: radial-gradient(130% 90% at 50% 20%, #000 30%, transparent 78%);
}

/* halo, привязанный к курсору (см. cursor-halo в app.js) */
.cursor-halo {
	position: fixed;
	top: 0;
	left: 0;
	width: 380px;
	height: 380px;
	border-radius: 50%;
	background: radial-gradient(
		circle,
		var(--accent-glow) 0%,
		rgba(160, 196, 255, 0.18) 45%,
		transparent 70%
	);
	filter: blur(40px);
	pointer-events: none;
	z-index: -1;
	opacity: 0;
	transition: opacity 0.4s var(--ease);
	will-change: transform;
}
.cursor-halo.is-on {
	opacity: 1;
}
@media (max-width: 720px) {
	.cursor-halo {
		width: 260px;
		height: 260px;
		filter: blur(30px);
	}
}

::selection {
	background: var(--accent);
	color: var(--accent-fg);
}

/* ── Layout ── */
.wrap {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 24px;
}
section {
	position: relative;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--text-mute);
}
.eyebrow::before {
	content: '';
	width: 18px;
	height: 1.5px;
	background: var(--accent-deep);
	border-radius: 2px;
	opacity: 0.8;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
}
.section-title {
	font-size: clamp(28px, 4.4vw, 46px);
	letter-spacing: -0.03em;
}
.section-lead {
	font-size: clamp(16px, 1.6vw, 19px);
	color: var(--text-dim);
	max-width: 56ch;
	line-height: 1.55;
}

/* ── Buttons ── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 16px;
	border: none;
	border-radius: var(--pill);
	cursor: pointer;
	padding: 15px 24px;
	text-decoration: none;
	line-height: 1;
	transition:
		transform 0.18s var(--ease),
		box-shadow 0.25s var(--ease),
		background 0.2s var(--ease);
	white-space: nowrap;
}
.btn svg {
	width: 18px;
	height: 18px;
}
.btn-primary {
	background: var(--accent);
	color: var(--accent-fg);
	box-shadow: var(--shadow-cta);
}
.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 36px var(--accent-glow);
}
.btn-primary:active {
	transform: translateY(0);
}
.btn-ghost {
	background: var(--bg-chip);
	color: var(--text);
	border: 1px solid var(--border);
}
.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: translateY(-1px);
}
.btn-lg {
	padding: 17px 30px;
	font-size: 17px;
	border-radius: var(--pill);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	color: var(--text);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	background: none;
	border: none;
	font-family: var(--font-sans);
	padding: 6px 0;
}
.link-arrow svg {
	width: 16px;
	height: 16px;
	transition: transform 0.25s var(--ease);
}
.link-arrow:hover svg {
	transform: translateX(4px);
}

/* ── Nav ── */
.nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition:
		background 0.3s var(--ease),
		box-shadow 0.3s var(--ease),
		backdrop-filter 0.3s;
}
.nav.scrolled {
	background: rgba(11, 12, 15, 0.72);
	backdrop-filter: saturate(160%) blur(18px);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	box-shadow: 0 1px 0 var(--border);
}
.nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 68px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
	flex: 0 1 auto;
	text-decoration: none;
	color: var(--text);
}
.brand > span {
	min-width: 0;
	overflow: hidden;
}
.brand-mark {
	width: 36px;
	height: 36px;
	flex: none;
}
.brand-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: -0.02em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.brand-tag {
	font-size: 12.5px;
	color: var(--text-mute);
	margin-top: -2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.nav .btn {
	padding: 11px 20px;
	font-size: 15px;
}

/* ── generic card ── */
.card {
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-card);
}

/* reveal-on-scroll — transform-only so content is NEVER invisible,
   even if class toggling or transitions misbehave in a preview frame */
.reveal {
	opacity: 1;
	transform: translateY(20px);
	transition:
		transform 0.7s var(--ease-out),
		opacity 0.7s var(--ease-out);
	will-change: transform;
}
.reveal.in {
	transform: none;
}
.reveal.d1 {
	transition-delay: 0.08s;
}
.reveal.d2 {
	transition-delay: 0.16s;
}
.reveal.d3 {
	transition-delay: 0.24s;
}

/* ─────────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────────── */
.hero {
	padding: 132px 0 72px;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.02fr 0.98fr;
	gap: 56px;
	align-items: center;
}
.hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	border-radius: var(--pill);
	padding: 7px 14px 7px 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dim);
	box-shadow: 0 1px 2px rgba(14, 15, 18, 0.04);
}
.hero-badge .dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2bbf6a;
	box-shadow: 0 0 0 0 rgba(43, 191, 106, 0.5);
	animation: pulse 1.8s infinite;
}
.hero h1 {
	font-size: clamp(36px, 6.2vw, 66px);
	line-height: 1.04;
	margin: 22px 0 0;
	letter-spacing: -0.035em;
}
.hero h1 .hl {
	color: var(--accent-deep);
}
.hero-sub {
	font-size: clamp(16px, 1.8vw, 19.5px);
	color: var(--text-dim);
	margin-top: 22px;
	max-width: 30ch;
	line-height: 1.55;
}
.hero-sub strong {
	color: var(--text);
	font-weight: 700;
}
.hero-cta {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 34px;
	flex-wrap: wrap;
}
.hero-trust {
	display: flex;
	gap: 20px;
	margin-top: 30px;
	flex-wrap: wrap;
}
.hero-trust .t {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--text-mute);
	font-weight: 600;
}
.hero-trust .t svg {
	width: 16px;
	height: 16px;
	color: var(--accent-deep);
}

/* ── Phone / Telegram chat mock ── */
.phone {
	position: relative;
	width: 100%;
	max-width: 372px;
	margin: 0 auto;
	justify-self: center;
}
.phone-shell {
	background: var(--bg-elev);
	border-radius: 36px;
	padding: 11px;
	box-shadow:
		var(--shadow-pop),
		0 0 0 1px var(--border);
	border: 1px solid rgba(255, 255, 255, 0.06);
}
.phone-screen {
	position: relative;
	border-radius: 27px;
	overflow: hidden;
	background: linear-gradient(180deg, #0f1218 0%, #0a0c11 100%);
	height: 580px;
	display: flex;
	flex-direction: column;
}
.tg-head {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 14px 15px;
	background: var(--bg-elev);
	border-bottom: 1px solid var(--border);
	position: relative;
	z-index: 2;
}
.tg-ava {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	flex: none;
	background: linear-gradient(
		135deg,
		var(--accent) 0%,
		var(--accent-deep) 120%
	);
	display: grid;
	place-items: center;
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 17px;
}
.tg-meta {
	flex: 1;
	min-width: 0;
}
.tg-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 15.5px;
	letter-spacing: -0.01em;
}
.tg-status {
	font-size: 12px;
	color: var(--accent-deep);
	font-weight: 600;
	height: 15px;
}
.tg-status.idle {
	color: var(--text-mute);
}
.tg-plane {
	width: 22px;
	height: 22px;
	color: var(--text-faint);
	flex: none;
}

.tg-body {
	flex: 1;
	overflow: hidden;
	padding: 16px 13px 8px;
	display: flex;
	flex-direction: column;
	gap: 9px;
	position: relative;
}
.msg {
	max-width: 82%;
	padding: 9px 12px;
	font-size: 13.5px;
	line-height: 1.42;
	border-radius: 16px;
	position: relative;
	word-wrap: break-word;
}
.msg.in {
	align-self: flex-start;
	background: var(--bg-elev);
	border-bottom-left-radius: 5px;
	box-shadow: 0 1px 2px rgba(14, 15, 18, 0.07);
}
.msg.out {
	align-self: flex-end;
	background: linear-gradient(180deg, var(--accent-2), var(--accent));
	color: #18253f;
	border-bottom-right-radius: 5px;
}
.msg .time {
	font-size: 10px;
	color: var(--text-faint);
	margin-top: 3px;
	text-align: right;
}
.msg.out .time {
	color: rgba(24, 37, 63, 0.5);
}
.msg strong {
	font-weight: 800;
}
.msg .bullet {
	display: flex;
	gap: 6px;
	margin-top: 4px;
}
.msg .bullet b {
	color: var(--accent-deep);
}

.msg-enter {
	animation: msgIn 0.42s var(--ease-out) both;
}
@keyframes msgIn {
	from {
		transform: translateY(9px) scale(0.97);
	}
	to {
		transform: none;
	}
}

.doc-chip {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 12px 8px 9px;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 700;
	border: 1px solid var(--border);
}
.doc-chip .ic {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--accent-deep);
	display: grid;
	place-items: center;
	color: #fff;
	flex: none;
}
.doc-chip .ic svg {
	width: 16px;
	height: 16px;
}
.doc-chip .sz {
	font-size: 11px;
	color: var(--text-mute);
	font-weight: 600;
}
.msg.out .doc-chip {
	background: rgba(255, 255, 255, 0.45);
	border-color: rgba(255, 255, 255, 0.5);
}

/* typing indicator */
.typing {
	align-self: flex-start;
	background: var(--bg-elev);
	padding: 12px 14px;
	border-radius: 16px;
	border-bottom-left-radius: 5px;
	display: inline-flex;
	gap: 4px;
	box-shadow: 0 1px 2px rgba(14, 15, 18, 0.07);
}
.typing span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--text-faint);
	animation: blink 1.3s infinite both;
}
.typing span:nth-child(2) {
	animation-delay: 0.2s;
}
.typing span:nth-child(3) {
	animation-delay: 0.4s;
}
@keyframes blink {
	0%,
	60%,
	100% {
		opacity: 0.25;
		transform: translateY(0);
	}
	30% {
		opacity: 1;
		transform: translateY(-3px);
	}
}

/* composer + draggable doc */
.tg-foot {
	padding: 10px 12px 13px;
	background: var(--bg-elev);
	border-top: 1px solid var(--border);
	position: relative;
	z-index: 2;
}
.tg-hint {
	font-size: 11.5px;
	color: var(--text-mute);
	text-align: center;
	margin-bottom: 9px;
	font-weight: 600;
}
.tg-input-row {
	display: flex;
	align-items: center;
	gap: 9px;
}
.tg-input {
	flex: 1;
	height: 40px;
	border-radius: var(--pill);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--border);
	display: flex;
	align-items: center;
	padding: 0 15px;
	font-size: 13px;
	color: var(--text-mute);
	transition:
		border-color 0.2s,
		background 0.2s;
}
.tg-input.drop-armed {
	border-color: var(--accent-deep);
	border-style: dashed;
	background: var(--accent-dim);
	color: var(--accent-deep);
}
.tg-send {
	width: 40px;
	height: 40px;
	flex: none;
	border-radius: 50%;
	background: var(--accent);
	display: grid;
	place-items: center;
	color: var(--accent-fg);
	border: none;
	cursor: pointer;
}
.tg-send svg {
	width: 18px;
	height: 18px;
}

.drag-doc {
	position: absolute;
	left: 14px;
	bottom: 72px;
	z-index: 6;
	cursor: grab;
	touch-action: none;
	user-select: none;
	transition:
		box-shadow 0.2s,
		transform 0.12s;
	box-shadow: 0 6px 18px rgba(14, 15, 18, 0.14);
}
.drag-doc.dragging {
	cursor: grabbing;
	box-shadow: 0 16px 36px rgba(14, 15, 18, 0.22);
	z-index: 20;
}
.drag-doc .pull {
	position: absolute;
	top: -26px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--accent-deep);
	background: var(--bg-elev);
	padding: 3px 9px;
	border-radius: 999px;
	box-shadow: 0 2px 8px rgba(14, 15, 18, 0.1);
	animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(-4px);
	}
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(43, 191, 106, 0.5);
	}
	70% {
		box-shadow: 0 0 0 7px rgba(43, 191, 106, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(43, 191, 106, 0);
	}
}

/* ─────────────────────────────────────────────────────────────
   PROBLEM
   ───────────────────────────────────────────────────────────── */
.block {
	padding: 92px 0;
}
.block-head {
	max-width: 660px;
}
.block-head .section-lead {
	margin-top: 16px;
}

.problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 46px;
}
.pain {
	padding: 28px;
	border-radius: var(--r-xl);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	position: relative;
	overflow: hidden;
	transition:
		transform 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}
.pain:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-pop);
}
.pain .nope {
	width: 40px;
	height: 40px;
	border-radius: 11px;
	background: rgba(229, 72, 77, 0.1);
	color: #d24a4f;
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}
.pain .nope svg {
	width: 20px;
	height: 20px;
}
.pain h3 {
	font-size: 18px;
	letter-spacing: -0.01em;
}
.pain p {
	color: var(--text-dim);
	font-size: 14.5px;
	margin-top: 9px;
	line-height: 1.55;
}

/* ── Solution band ── */
.solution {
	padding: 96px 0;
}
.solution-card {
	position: relative;
	border-radius: var(--r-2xl);
	overflow: hidden;
	background: linear-gradient(135deg, #181b23 0%, #20283a 100%);
	border: 1px solid rgba(255, 255, 255, 0.09);
	color: #fff;
	padding: 64px 56px;
	box-shadow: var(--shadow-pop);
}
.solution-card .s-grid {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 2;
}
.solution-card .eyebrow {
	color: rgba(255, 255, 255, 0.55);
}
.solution-card .eyebrow::before {
	background: var(--accent);
}
.solution-card h2 {
	font-size: clamp(26px, 3.4vw, 38px);
	margin-top: 16px;
}
.solution-card h2 .hl {
	color: var(--accent);
}
.solution-card p {
	color: rgba(255, 255, 255, 0.72);
	font-size: 16.5px;
	margin-top: 18px;
	line-height: 1.6;
}
.solution-card .accent-line {
	color: #fff;
	font-weight: 700;
}
.solution-glow {
	position: absolute;
	width: 460px;
	height: 460px;
	border-radius: 50%;
	background: var(--accent-glow);
	filter: blur(90px);
	opacity: 0.35;
	top: -160px;
	right: -120px;
}

/* schematic diagram inside solution */
.schema {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.schema-node {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.09);
}
.schema-node .sn-ic {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	flex: none;
}
.schema-node .sn-ic svg {
	width: 19px;
	height: 19px;
}
.schema-node .sn-t {
	font-weight: 700;
	font-size: 14.5px;
}
.schema-node .sn-d {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.55);
	margin-top: 1px;
}
.schema-node.is-you .sn-ic {
	background: var(--accent);
	color: #18253f;
}
.schema-node.is-agent .sn-ic {
	background: rgba(160, 196, 255, 0.18);
	color: var(--accent);
}
.schema-arrow {
	width: 1.5px;
	height: 14px;
	background: rgba(255, 255, 255, 0.2);
	margin-left: 33px;
}

/* ─────────────────────────────────────────────────────────────
   DIFFERENTIATORS (key)
   ───────────────────────────────────────────────────────────── */
.diff-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: 46px;
}
.diff {
	padding: 30px;
	border-radius: var(--r-xl);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	position: relative;
	overflow: hidden;
	transition:
		transform 0.3s var(--ease),
		box-shadow 0.3s var(--ease),
		border-color 0.3s;
}
.diff::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(135deg, var(--accent), transparent 60%);
	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.3s;
}
.diff:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-pop);
}
.diff:hover::before {
	opacity: 1;
}
.diff-num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 13px;
	color: var(--accent-deep);
	letter-spacing: 0.04em;
}
.diff-ic {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--accent-dim);
	color: var(--accent-deep);
	display: grid;
	place-items: center;
	margin: 16px 0 18px;
}
.diff-ic svg {
	width: 25px;
	height: 25px;
}
.diff h3 {
	font-size: 21px;
	letter-spacing: -0.015em;
}
.diff p {
	color: var(--text-dim);
	font-size: 15px;
	margin-top: 10px;
	line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────
   TIERS — три формата (Базовый / Преднастроенный / Custom)
   ───────────────────────────────────────────────────────────── */
.tiers {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 48px;
}
.tier {
	padding: 30px 28px;
	border-radius: var(--r-xl);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	position: relative;
	overflow: hidden;
	transition:
		transform 0.3s var(--ease),
		box-shadow 0.3s var(--ease);
}
.tier:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-pop);
}
.tier-ic {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	background: var(--accent-dim);
	color: var(--accent-deep);
	display: grid;
	place-items: center;
	margin-bottom: 20px;
}
.tier-ic svg {
	width: 24px;
	height: 24px;
}
.tier-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.02em;
	margin-bottom: 10px;
}
.tier p {
	color: var(--text-dim);
	font-size: 14.5px;
	line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────
   CONSTRUCTOR (амплуа)
   ───────────────────────────────────────────────────────────── */
.builder {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	margin-top: 48px;
	align-items: start;
}
.builder-controls {
	display: flex;
	flex-direction: column;
	gap: 26px;
}
.bc-block .bc-label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--text-mute);
	margin-bottom: 12px;
}

.seg {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	background: var(--bg-chip);
	padding: 6px;
	border-radius: var(--pill);
	border: 1px solid var(--border);
	--thumb-x: 0px;
	--thumb-w: 0px;
}
.seg::before {
	content: '';
	position: absolute;
	top: 6px;
	left: 0;
	width: var(--thumb-w);
	height: calc(100% - 12px);
	background: var(--text);
	border-radius: var(--pill);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
	transform: translateX(var(--thumb-x));
	transition:
		transform 0.35s var(--ease-out),
		width 0.35s var(--ease-out);
	pointer-events: none;
	z-index: 0;
}
.seg.no-anim::before {
	transition: none;
}
.seg button {
	position: relative;
	z-index: 1;
	border: none;
	background: transparent;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 14px;
	color: var(--text-dim);
	padding: 13px 8px;
	border-radius: var(--pill);
	cursor: pointer;
	transition: color 0.25s var(--ease);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
}
.seg button .sg-ic {
	width: 22px;
	height: 22px;
	transition: color 0.25s var(--ease);
}
.seg button.active {
	color: var(--accent-fg);
}
.seg button.active .sg-ic {
	color: #2e62d6;
}

.skills {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.skill-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 15px 10px 12px;
	border-radius: var(--pill);
	border: 1px solid var(--border);
	background: var(--bg-elev);
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s var(--ease);
	user-select: none;
	color: var(--text-dim);
}
.skill-toggle .chk {
	width: 18px;
	height: 18px;
	border-radius: 6px;
	border: 1.5px solid var(--border-strong);
	display: grid;
	place-items: center;
	transition: all 0.2s;
	flex: none;
}
.skill-toggle .chk svg {
	width: 12px;
	height: 12px;
	color: var(--accent-fg);
	opacity: 0;
	transform: scale(0.5);
	transition: all 0.2s;
}
.skill-toggle.on {
	background: var(--accent-dim);
	border-color: transparent;
	color: var(--text);
}
.skill-toggle.on .chk {
	background: var(--accent);
	border-color: var(--accent);
}
.skill-toggle.on .chk svg {
	opacity: 1;
	transform: none;
}

/* live agent card */
.agent-card {
	border-radius: var(--r-2xl);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-pop);
	padding: 28px;
	position: sticky;
	top: 92px;
	overflow: hidden;
}
.agent-card .ac-glow {
	position: absolute;
	top: -90px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: var(--accent-glow);
	filter: blur(70px);
	opacity: 0.4;
	transition: background 0.4s;
}
.ac-top {
	display: flex;
	align-items: center;
	gap: 15px;
	position: relative;
}
.ac-ava {
	width: 60px;
	height: 60px;
	border-radius: 18px;
	flex: none;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 26px;
	color: #fff;
	background: linear-gradient(140deg, var(--accent), var(--accent-deep));
	transition: background 0.4s;
	box-shadow: 0 8px 20px var(--accent-dim);
}
.ac-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	letter-spacing: -0.02em;
}
.ac-role {
	font-size: 13.5px;
	color: var(--text-dim);
	margin-top: 2px;
}
.ac-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	font-weight: 700;
	color: #2bbf6a;
	margin-top: 7px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.ac-status .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #2bbf6a;
	animation: pulse 1.8s infinite;
}
.ac-divider {
	height: 1px;
	background: var(--border);
	margin: 22px 0;
}
.ac-section-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--text-mute);
	margin-bottom: 12px;
}
.ac-skills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	min-height: 34px;
}
.ac-skill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 13px;
	border-radius: var(--pill);
	background: var(--accent-dim);
	color: var(--accent-deep);
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	animation: chipIn 0.3s var(--ease-out) both;
}
.ac-skill svg {
	width: 13px;
	height: 13px;
}
@keyframes chipIn {
	from {
		transform: scale(0.86);
	}
	to {
		transform: none;
	}
}
.ac-empty {
	font-size: 13px;
	color: var(--text-faint);
	font-style: italic;
}
.ac-task {
	margin-top: 22px;
	padding: 15px 16px;
	border-radius: var(--r-md);
	background: var(--bg-elev-2);
	border: 1px solid var(--border);
}
.ac-task .ttl {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--text-mute);
	display: flex;
	align-items: center;
	gap: 6px;
}
.ac-task .ttl svg {
	width: 13px;
	height: 13px;
	color: var(--accent-deep);
}
.ac-task p {
	font-size: 14px;
	color: var(--text);
	margin-top: 7px;
	line-height: 1.5;
}

/* ─────────────────────────────────────────────────────────────
   TRUST
   ───────────────────────────────────────────────────────────── */
.trust-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 44px;
}
.trust-item {
	padding: 28px;
	border-radius: var(--r-xl);
	background: var(--bg-elev-2);
	border: 1px solid var(--border);
}
.trust-item .ti-ic {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--bg-elev);
	border: 1px solid var(--border);
	color: var(--accent-deep);
	display: grid;
	place-items: center;
	margin-bottom: 16px;
}
.trust-item .ti-ic svg {
	width: 22px;
	height: 22px;
}
.trust-item h3 {
	font-size: 17px;
	letter-spacing: -0.01em;
}
.trust-item p {
	font-size: 14px;
	color: var(--text-dim);
	margin-top: 8px;
	line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────
   PILOT / SCARCITY
   ───────────────────────────────────────────────────────────── */
.pilot {
	padding: 40px 0 0;
}
.pilot-card {
	border-radius: var(--r-2xl);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-card);
	padding: 48px;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 40px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.pilot-card h2 {
	font-size: clamp(24px, 3vw, 34px);
}
.pilot-card p {
	color: var(--text-dim);
	font-size: 16px;
	margin-top: 14px;
	line-height: 1.6;
	max-width: 46ch;
}
.seats {
	text-align: center;
}
.seats .seat-row {
	display: flex;
	gap: 7px;
	justify-content: center;
	flex-wrap: wrap;
	max-width: 220px;
	margin: 0 auto 16px;
}
.seat {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: var(--accent);
	transition: all 0.3s var(--ease);
}
.seat.taken {
	background: rgba(255, 255, 255, 0.12);
}
.seats .seat-count {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 40px;
	letter-spacing: -0.03em;
}
.seats .seat-count span {
	color: var(--accent-deep);
}
.seats .seat-label {
	font-size: 13px;
	color: var(--text-mute);
	font-weight: 600;
	margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────
   FORM
   ───────────────────────────────────────────────────────────── */
.form-section {
	padding: 96px 0;
}
.form-wrap {
	max-width: 720px;
	margin: 0 auto;
}
.form-card {
	border-radius: var(--r-2xl);
	background: var(--bg-elev);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-pop);
	padding: clamp(28px, 4vw, 48px);
	position: relative;
	overflow: hidden;
}
.form-head {
	text-align: center;
	margin-bottom: 34px;
}
.form-head h2 {
	font-size: clamp(26px, 3.6vw, 40px);
}
.form-head p {
	color: var(--text-dim);
	margin-top: 12px;
	font-size: 16px;
}
.field {
	margin-bottom: 24px;
}
.field > label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.3px;
	margin-bottom: 9px;
}
.field .req {
	color: var(--accent-deep);
}
.field .hint {
	font-weight: 500;
	color: var(--text-mute);
	font-size: 12.5px;
}
.input,
.textarea {
	width: 100%;
	font-family: var(--font-sans);
	font-size: 15.5px;
	color: var(--text);
	background: var(--bg-elev-2);
	border: 1.5px solid var(--border);
	border-radius: var(--r-md);
	padding: 14px 16px;
	transition:
		border-color 0.2s,
		background 0.2s,
		box-shadow 0.2s;
	resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
	color: var(--text-faint);
}
.input:focus,
.textarea:focus {
	outline: none;
	border-color: var(--accent-deep);
	background: var(--bg-elev);
	box-shadow: 0 0 0 4px var(--accent-dim);
}
.input.err {
	border-color: #e5484d;
}
.field-err {
	color: #d24a4f;
	font-size: 12.5px;
	margin-top: 7px;
	display: none;
	font-weight: 600;
}
.field-err.show {
	display: block;
}

.choice-row {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}
.choice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 16px;
	border-radius: var(--pill);
	border: 1.5px solid var(--border);
	background: var(--bg-elev-2);
	cursor: pointer;
	user-select: none;
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dim);
	transition: all 0.18s var(--ease);
}
.choice:hover {
	border-color: var(--border-strong);
}
.choice.sel {
	background: var(--accent-dim);
	border-color: var(--accent);
	color: var(--text);
}
.choice .c-dot {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 1.5px solid var(--border-strong);
	flex: none;
	transition: all 0.2s;
	position: relative;
}
.choice.multi .c-dot {
	border-radius: 5px;
}
.choice.sel .c-dot {
	background: var(--accent);
	border-color: var(--accent);
}
.choice.sel .c-dot::after {
	content: '';
	position: absolute;
	inset: 3px;
	border-radius: inherit;
	background: var(--accent-fg);
}
.choice.multi.sel .c-dot::after {
	inset: 0;
	border-radius: 5px;
	background: none;
}
.choice.multi.sel .c-dot {
	background-image: url('assets/icons/check.svg');
	background-size: 11px;
	background-repeat: no-repeat;
	background-position: center;
}

.form-submit {
	width: 100%;
	margin-top: 8px;
}
.form-foot {
	text-align: center;
	font-size: 13px;
	color: var(--text-mute);
	margin-top: 16px;
}

/* thank-you */
.thanks {
	text-align: center;
	padding: 40px 20px;
}
.thanks .tk-ic {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--accent-dim);
	color: var(--accent-deep);
	display: grid;
	place-items: center;
	margin: 0 auto 24px;
	animation: popCheck 0.5s var(--ease-out) 0.1s both;
}
.thanks .tk-ic svg {
	width: 38px;
	height: 38px;
}
@keyframes popCheck {
	from {
		transform: scale(0.5);
	}
	to {
		transform: scale(1);
	}
}
.thanks h2 {
	font-size: clamp(26px, 3.4vw, 36px);
}
.thanks p {
	color: var(--text-dim);
	font-size: 16.5px;
	margin-top: 14px;
	max-width: 40ch;
	margin-inline: auto;
	line-height: 1.6;
}
.thanks .tk-tg {
	margin-top: 26px;
}

/* ─────────────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────────────── */
.faq-section {
	padding: 40px 0 100px;
}
.faq-list {
	max-width: 760px;
	margin: 40px auto 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.faq-item {
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	background: var(--bg-elev);
	overflow: hidden;
	transition:
		box-shadow 0.25s,
		border-color 0.25s;
}
.faq-item.open {
	box-shadow: var(--shadow-card);
	border-color: var(--border-strong);
}
.faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: -0.01em;
	color: var(--text);
	text-align: left;
}
.faq-q .fq-plus {
	width: 26px;
	height: 26px;
	flex: none;
	position: relative;
	transition: transform 0.3s var(--ease);
}
.faq-q .fq-plus::before,
.faq-q .fq-plus::after {
	content: '';
	position: absolute;
	background: var(--accent-deep);
	border-radius: 2px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.faq-q .fq-plus::before {
	width: 14px;
	height: 2px;
}
.faq-q .fq-plus::after {
	width: 2px;
	height: 14px;
	transition: transform 0.3s var(--ease);
}
.faq-item.open .fq-plus::after {
	transform: translate(-50%, -50%) scaleY(0);
}
.faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s var(--ease);
}
.faq-a-inner {
	padding: 0 24px 24px;
	color: var(--text-dim);
	font-size: 15px;
	line-height: 1.6;
}

/* ── Footer ── */
.footer {
	padding: 48px 0;
	border-top: 1px solid var(--border);
}
.footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.footer .brand-name {
	font-size: 17px;
}
.footer-note {
	font-size: 13px;
	color: var(--text-mute);
	max-width: 40ch;
}
.footer a.btn {
	font-size: 14px;
	padding: 11px 18px;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.hero-grid {
		grid-template-columns: 1fr;
		gap: 44px;
	}
	.hero {
		padding: 116px 0 56px;
		text-align: center;
	}
	.hero h1 {
		max-width: 16ch;
		margin-inline: auto;
	}
	.hero-sub {
		max-width: 40ch;
		margin-inline: auto;
	}
	.hero-cta,
	.hero-trust,
	.hero-badge {
		justify-content: center;
	}
	.hero-trust {
		justify-content: center;
	}
	.solution-card .s-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.builder {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.agent-card {
		position: relative;
		top: 0;
	}
	.pilot-card {
		grid-template-columns: 1fr;
		gap: 30px;
	}
}
@media (max-width: 720px) {
	.problem-grid,
	.diff-grid,
	.tiers,
	.trust-grid {
		grid-template-columns: 1fr;
	}
	.solution-card {
		padding: 40px 26px;
	}
	.block {
		padding: 70px 0;
	}
	.solution,
	.form-section {
		padding: 70px 0;
	}
	.nav-inner {
		height: 58px;
		gap: 10px;
	}
	.nav .brand {
		gap: 9px;
	}
	.nav .brand-mark {
		width: 32px;
		height: 32px;
	}
	.nav .brand-name {
		font-size: 17px;
	}
	.nav .brand-tag {
		display: none;
	}
	.btn-tg-sm {
		padding: 7px 12px;
		font-size: 13.5px;
	}
	.btn-tg-sm .tg-ic {
		width: 1.55em;
		height: 1.55em;
		transform: translateY(-3px);
	}
	.auth-chip {
		padding: 4px 8px 4px 4px;
		gap: 8px;
		font-size: 12.5px;
		margin-left: 0;
	}
	.auth-chip-pic {
		width: 22px;
		height: 22px;
	}
	.auth-chip-name {
		max-width: 90px;
	}
	.hero {
		padding-top: 96px;
	}
	.pilot-card {
		padding: 32px 24px;
	}
	.form-card {
		padding: 26px 20px;
	}
}
@media (max-width: 480px) {
	.wrap {
		padding: 0 16px;
	}
	.hero {
		padding-top: 86px;
	}
	.hero h1 {
		font-size: 34px;
	}
	.nav-inner {
		height: 54px;
	}
	.nav .brand-mark {
		width: 30px;
		height: 30px;
	}
	.nav .brand-name {
		font-size: 16px;
	}
	/* Иконка Telegram-птички универсальна — на узких экранах достаточно её */
	.btn-tg-sm {
		padding: 8px 10px;
		gap: 0;
	}
	.btn-tg-sm span {
		display: none;
	}
	.btn-tg-sm .tg-ic {
		width: 22px;
		height: 22px;
		transform: none;
		margin: -2px 0;
	}
	.auth-chip-name {
		display: none;
	}
	.auth-chip-logout {
		font-size: 11px;
		padding: 3px 5px;
	}
}
@media (max-width: 380px) {
	.wrap {
		padding: 0 14px;
	}
	.nav .brand-mark {
		width: 28px;
		height: 28px;
	}
	.nav .brand-name {
		font-size: 15px;
	}
	.hero h1 {
		font-size: 32px;
	}
	.seg button {
		font-size: 12.5px;
	}
}

/* ── Telegram Login button (stub) ── */
.btn-tg-login {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #54a9eb;
	color: #fff;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background 0.15s ease,
		transform 0.05s ease,
		box-shadow 0.15s ease;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-tg-login:hover {
	background: #4ba0e2;
}
.btn-tg-login:active {
	transform: translateY(1px);
}
.btn-tg-login:focus-visible {
	outline: 2px solid #54a9eb;
	outline-offset: 2px;
}
.btn-tg-login .tg-ic {
	width: 1.75em;
	height: 1.75em;
	flex: 0 0 auto;
	transform: translateY(-5px);
}
.btn-tg-sm {
	padding: 8px 14px;
	font-size: 14px;
}
.btn-tg-lg {
	padding: 14px 22px;
	font-size: 16px;
}

/* ── Toast ── */
.toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translate(-50%, 16px);
	background: rgba(20, 22, 28, 0.92);
	color: #fff;
	padding: 12px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
	z-index: 9999;
}
.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		transition-duration: 0.01ms !important;
	}
	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* ─────────── success modal (after CP-widget или re-login active) ─────────── */
.cj-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(5, 6, 9, 0.74);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	z-index: 10000;
	animation: cjFadeIn 0.18s ease-out;
}
.cj-modal {
	position: relative;
	width: 100%;
	max-width: 420px;
	background: var(--bg-elev);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 18px;
	padding: 32px 28px 24px;
	box-shadow:
		0 20px 60px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.04) inset;
	text-align: center;
	animation: cjModalIn 0.22s var(--ease-out);
}
.cj-modal-close {
	position: absolute;
	top: 12px;
	right: 14px;
	background: transparent;
	border: 0;
	color: var(--text-mute);
	font-size: 24px;
	line-height: 1;
	padding: 6px 10px;
	cursor: pointer;
	transition: color 0.15s ease;
}
.cj-modal-close:hover {
	color: var(--text);
}
.cj-modal-check {
	width: 56px;
	height: 56px;
	margin: 4px auto 16px;
	border-radius: 50%;
	background: var(--accent-dim);
	color: var(--accent-deep);
	font-size: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
}
.cj-modal-title {
	margin: 0 0 8px;
	font-family: var(--font-display, 'Nunito');
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.cj-modal-sub {
	margin: 0 0 20px;
	color: var(--text-dim);
	font-size: 14.5px;
	line-height: 1.5;
}
.cj-modal-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 13px 18px;
	background: var(--accent);
	color: var(--accent-fg);
	border-radius: 12px;
	font-weight: 700;
	font-size: 15.5px;
	text-decoration: none;
	box-shadow: var(--shadow-cta);
	transition:
		transform 0.15s ease,
		box-shadow 0.15s ease,
		background 0.15s ease;
}
.cj-modal-cta:hover {
	background: var(--accent-2);
	transform: translateY(-1px);
	box-shadow: 0 10px 32px var(--accent-glow);
}
.cj-modal-cta:focus-visible {
	outline: 2px solid var(--accent-2);
	outline-offset: 2px;
}
.cj-modal-cta svg {
	width: 18px;
	height: 18px;
}
.cj-modal-copy {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 11px 14px;
	background: var(--bg-chip);
	border: 1px solid rgba(255, 255, 255, 0.08);
	color: var(--text-dim);
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 500;
	cursor: pointer;
	transition:
		background 0.15s ease,
		color 0.15s ease;
}
.cj-modal-copy:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--text);
}
.cj-modal-hint {
	margin: 16px 0 0;
	color: var(--text-faint);
	font-size: 12.5px;
	line-height: 1.4;
}

@keyframes cjFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes cjModalIn {
	from {
		opacity: 0;
		transform: translateY(8px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

/* ─────────── auth chip в навбаре (залогинен) ─────────── */
.auth-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 10px 6px 6px;
	background: var(--bg-chip);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
	margin-left: 8px;
	font-size: 13px;
	color: var(--text);
}
/* HTML attribute `hidden` должен явно перебивать display: inline-flex выше. */
.auth-chip[hidden] {
	display: none;
}
.auth-chip-pic {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--accent-dim);
	flex-shrink: 0;
}
.auth-chip-name {
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}
.auth-chip-logout {
	background: transparent;
	border: 0;
	color: var(--text-mute);
	cursor: pointer;
	font-size: 12px;
	padding: 4px 6px;
	border-radius: 6px;
	transition:
		color 0.15s ease,
		background 0.15s ease;
}
.auth-chip-logout:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.06);
}

/* ─────────── email modal form ─────────── */
.cj-email-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}
.cj-email-form input[type='email'] {
	width: 100%;
	padding: 13px 14px;
	background: var(--bg-elev-2);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	color: var(--text);
	font-size: 15px;
	font-family: inherit;
	transition:
		border-color 0.15s ease,
		background 0.15s ease;
}
.cj-email-form input[type='email']:focus {
	outline: none;
	border-color: var(--accent);
	background: var(--bg-elev);
}
.cj-email-form input[type='email'].cj-input-error {
	border-color: #ff6b6b;
	animation: cjShake 0.25s ease;
}
@keyframes cjShake {
	0%,
	100% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-4px);
	}
	75% {
		transform: translateX(4px);
	}
}

/* ─────────── Telegram widget wrapper ─────────── */
/* Виджет рендерит iframe-кнопку Telegram'а — мы только обёртку выравниваем. */
.tg-widget-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.tg-widget-wrap iframe {
	border-radius: 14px;
	overflow: hidden;
}