/* AlmaPay design tokens — blue/violet edition */
:root {
	--bg: #fdfdff;
	--bg-warm: #f5f6ff;
	--bg-sand: #eef0ff;
	--bg-ink: #0f1535;
	--ink: #0f1535;
	--ink-2: #2c3266;
	--ink-3: #6068a0;
	--ink-4: #a5abd0;
	--line: #e6e7f5;
	--line-2: #d6d8ed;
	--accent: #5061f5;
	--accent-2: #6f72ff;
	--accent-violet: #8b5cf6;
	--accent-soft: #e7eaff;
	--accent-soft-2: #ede5ff;
	--accent-deep: #3a48c7;
	--warn: oklch(0.72 0.13 65);
	--grad-hero: radial-gradient(
			ellipse 110% 90% at 15% -10%,
			#c7d2ff 0%,
			transparent 70%
		),
		radial-gradient(ellipse 100% 80% at 105% 25%, #d8c5ff 0%, transparent 65%),
		radial-gradient(ellipse 90% 100% at 50% 120%, #b8c8ff 0%, transparent 70%),
		#f4f5ff;
	--grad-soft: radial-gradient(
			ellipse 90% 100% at -10% 50%,
			#d6cdff 0%,
			transparent 75%
		),
		radial-gradient(ellipse 90% 100% at 110% 50%, #c2d0ff 0%, transparent 75%),
		#f4f5ff;
	--grad-brand: linear-gradient(135deg, #6f72ff 0%, #5061f5 50%, #8b5cf6 100%);
	--radius: 14px;
	--radius-sm: 8px;
	--radius-lg: 22px;
	--pad: 1.25rem;
	--max: 1280px;
	--gutter: clamp(20px, 4vw, 56px);
	--font-sans: 'Geist', 'Inter', ui-sans-serif, system-ui, -apple-system,
		'Segoe UI', Roboto, sans-serif;
	--font-serif: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif;
	--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body {
	background-color: #ffffff;
}

/* Точечные градиент-пятна на конкретных секциях */
.hero,
.app-demo,
.methods {
	position: relative;
	isolation: isolate;
}
.hero::before,
.app-demo::before,
.methods::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
.hero::before {
	background: radial-gradient(
			ellipse 50vw 60vh at 0% 10%,
			#d4dcff 0%,
			transparent 60%
		),
		radial-gradient(ellipse 40vw 50vh at 100% 5%, #e2d4ff 0%, transparent 60%);
}
.app-demo::before {
	background: radial-gradient(
		ellipse 45vw 50vh at 100% 50%,
		#ddd0ff 0%,
		transparent 60%
	);
}
.methods::before {
	background: radial-gradient(
		ellipse 45vw 50vh at 0% 50%,
		#d4dcff 0%,
		transparent 60%
	);
}

a {
	color: inherit;
	text-decoration: none;
}
button {
	font-family: inherit;
	cursor: default;
}

.container {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* Typography */
.eyebrow {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-3);
	font-weight: 500;
}

.h-display {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(40px, 6vw, 84px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--ink);
	margin: 0;
}

.h-display em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.h-section {
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: 0;
}

.h-section em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: -0.01em;
}

.h-display em,
.h-section em {
	display: inline;
	padding-right: 0.04em;
}

.lede {
	font-size: clamp(17px, 1.4vw, 19px);
	line-height: 1.55;
	color: var(--ink-2);
	letter-spacing: -0.005em;
}

.mono {
	font-family: var(--font-mono);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 18px;
	border-radius: 10px;
	border: 0.5px solid transparent;
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: -0.005em;
	transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.18s,
		color 0.18s, border-color 0.18s;
}
.btn-primary {
	background: var(--grad-brand);
	color: white;
	box-shadow: 0 4px 14px -4px rgba(80, 97, 245, 0.45),
		0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 22px -6px rgba(80, 97, 245, 0.55),
		0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.btn-ghost {
	background: transparent;
	color: var(--ink);
	border-color: var(--line-2);
}
.btn-ghost:hover {
	background: rgba(0, 0, 0, 0.03);
}
.btn-sm {
	height: 36px;
	padding: 0 14px;
	font-size: 13.5px;
	border-radius: 8px;
}

.arrow {
	transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.btn:hover .arrow {
	transform: translateX(3px);
}

/* Section spacing */
section {
	padding: clamp(72px, 10vw, 140px) 0;
}
section.tight {
	padding: clamp(48px, 7vw, 96px) 0;
}

.section-head {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: clamp(40px, 6vw, 72px);
}

/* Cards */
.card {
	background: var(--bg-warm);
	border: 0.5px solid var(--line);
	border-radius: var(--radius);
	padding: 28px;
}

.divider {
	height: 1px;
	background: var(--line);
	width: 100%;
}

/* Utility */
.fade-up {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fade-up.in {
	opacity: 1;
	transform: translateY(0);
}

/* Grid helpers */
.grid {
	display: grid;
	gap: 20px;
}
.grid-2 {
	grid-template-columns: repeat(2, 1fr);
}
.grid-3 {
	grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
	grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 880px) {
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr 1fr;
	}
	.grid-2 {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 560px) {
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}
}

/* Selection */
::selection {
	background: var(--accent);
	color: white;
}

/* Brand gradient text */
.grad-text {
	background: var(--grad-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}