/* Общие стили лендинга — повторяют приложение nony.bot (vpn-web/src/styles/index.css):
   те же токены цветов, стеклянные карточки, кнопки, фон с блобами и тёмная тема.
   Тема ставится скриптом в <head> страницы: localStorage → система. */

@font-face {
	font-family: 'MontserratLogo';
	src: url('fonts/Montserrat-ExtraBold.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}

:root {
	--max-width: 440px;

	--color-bg: linear-gradient(160deg, #FFA98A 0%, #FFC4A4 40%, #FBB6D9 75%, #E0A7F5 100%);
	--color-bg-solid: #ffaf91;
	--color-text: #1a1a1a;
	--color-text-muted: rgba(0, 0, 0, 0.55);
	--color-dark-grey: #1a1a1a;
	--color-green: #22c55e;
	--color-green-text: #15803d;

	--glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.35));
	--glass-border: rgba(255, 255, 255, 0.6);

	--card-icon-bg: rgba(255, 255, 255, 0.38);
	--card-icon-border: rgba(255, 255, 255, 0.75);
	--card-inner-bg: rgba(0, 0, 0, 0.03);
	--card-inner-border: rgba(0, 0, 0, 0.08);
	--card-divider: rgba(0, 0, 0, 0.06);
	--card-border: #fff6e6b3;
	--card-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
	--card-glare: rgba(255, 255, 255, 0.5);
	--panel-fill-top: #ffffffab;
	--panel-fill-middle: #fff7fc91;
	--panel-fill-bottom: #fff4fb80;

	--pill-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.8));
	--pill-border: rgba(255, 255, 255, 0.55);
	--btn-primary-bg: linear-gradient(135deg, rgba(10, 10, 15, 0.88), rgba(20, 20, 28, 0.75));
	--btn-primary-text: #fff;
	--btn-primary-border: rgba(255, 255, 255, 0.08);

	--chevron-back-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
	--chevron-icon: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

:root[data-theme='dark'] {
	--color-bg: linear-gradient(160deg, #2c1a2a 0%, #201521 45%, #1d1320 100%);
	--color-bg-solid: #291928;
	--color-text: #fff;
	--color-text-muted: rgba(255, 255, 255, 0.6);
	--color-green-text: #4ade80;

	--glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.06));
	--glass-border: rgba(255, 255, 255, 0.14);

	--card-icon-bg: rgba(131, 66, 178, 0.45);
	--card-icon-border: rgba(255, 255, 255, 0.14);
	--card-inner-bg: rgba(255, 255, 255, 0.05);
	--card-inner-border: rgba(255, 255, 255, 0.12);
	--card-divider: rgba(255, 255, 255, 0.1);
	--card-border: rgba(245, 175, 108, 0.35);
	--card-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
	--card-glare: rgba(255, 255, 255, 0.06);
	--panel-fill-top: #45304a80;
	--panel-fill-middle: #24172bd6;
	--panel-fill-bottom: #281a30c9;

	--pill-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.75));
	--pill-border: rgba(255, 255, 255, 0.5);
	--btn-primary-bg: rgba(255, 255, 255, 0.92);
	--btn-primary-text: #1a1a1a;
	--btn-primary-border: rgba(255, 255, 255, 0.4);
}

/* ─── База ─── */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}
::-webkit-scrollbar { width: 0; }

html {
	background-color: var(--color-bg-solid);
}
body {
	min-height: 100vh;
	min-height: 100dvh;
	background-color: var(--color-bg-solid);
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
}
/* Градиент — отдельным фиксированным слоем: background-attachment: fixed
   iOS игнорирует, и на длинной странице градиент растягивался бы */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	background: var(--color-bg);
	pointer-events: none;
}
button { color: inherit; font: inherit; }
a { color: inherit; }

a:focus-visible,
button:focus-visible {
	outline: 2px solid #4d90fe;
	outline-offset: 2px;
}

/* Колонка приложения */
.app {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 16px 40px;
	padding-bottom: calc(40px + env(safe-area-inset-bottom));
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* ─── Фоновые блобы (как в приложении) ─── */
.blobs-container {
	position: fixed;
	top: 0; bottom: 0; left: 50%;
	width: 100%;
	max-width: var(--max-width);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1;
	/* Без overflow: hidden — на широком экране блобы не обрезаются по краю колонки;
	   fixed-слой горизонтальную прокрутку не создаёт */
}
.blob {
	position: absolute;
	will-change: transform;
	background: center / 100% 100% no-repeat;
}
.blob--1 {
	background-image: url('blobs/blob-1-pair.svg');
	animation: blobOrbit 16s ease-in-out infinite;
	width: 140px; height: 111px; left: -19px; top: -3px;
}
.blob--3 {
	background-image: url('blobs/blob-3-bean.svg');
	animation: blobDrift 29s ease-in-out -18s infinite alternate;
	width: 300px; height: 282px; left: -130px; top: 380px;
}
.blob--4 {
	background-image: url('blobs/blob-4-circle.svg');
	animation: blobOrbitSoft 23s ease-in-out -11s infinite;
	width: 140px; height: 133px; right: 55px; top: 334px;
}
.blob--6 {
	background-image: url('blobs/blob-2-capsule-top.svg');
	animation: blobOrbitSoft 21s ease-in-out -4s infinite;
	width: 110px; height: 103px; left: 80px; top: 156px;
}
.blob--13 {
	background-image: url('blobs/blob-2-capsule-top.svg');
	animation: blobOrbitSoft 25s ease-in-out -9s infinite;
	width: 200px; height: 187px; right: -80px; top: -20px;
}
/* Зеркальные копии: transform элемента занят анимацией, картинка — на ::after */
.blob--14::after,
.blob--15::after {
	content: '';
	position: absolute;
	inset: 0;
	background: center / 100% 100% no-repeat;
	transform: scaleX(-1);
}
.blob--14 {
	animation: blobOrbitSoft 27s ease-in-out -13s infinite;
	width: 240px; height: 226px; right: -110px; top: 560px;
}
.blob--14::after { background-image: url('blobs/blob-3-bean.svg'); }
.blob--15 {
	animation: blobOrbit 19s ease-in-out -12s infinite;
	width: 150px; height: 127px; left: 42px; bottom: -21px;
}
.blob--15::after { background-image: url('blobs/blob-5-capsule-bottom.svg'); }
@media (min-aspect-ratio: 430 / 810) {
	.blob--15 { display: none; }
}

/* Блобы тёмной темы */
.blob--7, .blob--8, .blob--9, .blob--10, .blob--11, .blob--12 { display: none; }

:root[data-theme='dark'] .blob { opacity: 0.85; }
:root[data-theme='dark'] .blob--1 {
	background-image: url('blobs/theme-6.svg');
	width: 256px; height: 241px; left: -48px; top: -10px;
}
:root[data-theme='dark'] .blob--3,
:root[data-theme='dark'] .blob--4,
:root[data-theme='dark'] .blob--6,
:root[data-theme='dark'] .blob--13,
:root[data-theme='dark'] .blob--14,
:root[data-theme='dark'] .blob--15 {
	display: none;
}
:root[data-theme='dark'] .blob--7 {
	display: block;
	background-image: url('blobs/theme-7.svg');
	animation: blobOrbitSoft 25s ease-in-out -9s infinite;
	width: 260px; height: 194px; right: -90px; top: 240px;
}
:root[data-theme='dark'] .blob--8 {
	display: block;
	background-image: url('blobs/circle-1.svg');
	animation: blobOrbitSoft 27s ease-in-out -13s infinite;
	width: 300px; height: 308px; left: -90px; top: 310px;
}
:root[data-theme='dark'] .blob--9 {
	display: block;
	background-image: url('blobs/circle-2.svg');
	animation: blobOrbitSoft 24s ease-in-out -6s infinite;
	width: 260px; height: 243px; right: -120px; bottom: -70px;
}
:root[data-theme='dark'] .blob--10 {
	display: block;
	background-image: url('blobs/theme-8.svg');
	animation: blobOrbit 19s ease-in-out -7s infinite;
	width: 155px; height: 132px; left: 40px; bottom: -24px;
}
:root[data-theme='dark'] .blob--11 {
	display: block;
	background-image: url('blobs/glow-orange.svg');
	animation: blobOrbitSoft 26s ease-in-out -11s infinite;
	width: 320px; height: 320px; left: -130px; top: 590px;
}
:root[data-theme='dark'] .blob--12 {
	display: block;
	background-image: url('blobs/glow-orange.svg');
	animation: blobOrbitSoft 22s ease-in-out -5s infinite;
	width: 260px; height: 260px; right: -185px; top: -70px;
}

@media (prefers-reduced-motion: reduce) {
	.blob, .blob::after { animation: none !important; }
}

/* ─── Шапка: логотип + название, справа переключатель темы ─── */
.header-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 4px;
	padding-top: calc(16px + env(safe-area-inset-top));
}
.app-logo-row {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--color-text);
}
.app-logo-row svg { width: 22px; height: 22px; flex-shrink: 0; }
.app-title {
	font-family: 'MontserratLogo', sans-serif;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.3px;
}
.glass-btn {
	width: 42px;
	height: 42px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: transparent;
	border: none;
	color: var(--color-text);
}
.glass-btn svg { width: 22px; height: 22px; }
.glass-btn .ico-sun { display: none; }
:root[data-theme='dark'] .glass-btn .ico-sun { display: block; }
:root[data-theme='dark'] .glass-btn .ico-moon { display: none; }

/* Кнопка «Назад» */
.back-button {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	background: transparent;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: var(--color-text);
	align-self: flex-start;
}
.back-button::before {
	content: '';
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--chevron-back-icon) center / contain no-repeat;
	mask: var(--chevron-back-icon) center / contain no-repeat;
	flex-shrink: 0;
}

.chevron-right {
	display: inline-flex;
	align-items: center;
}
.chevron-right::after {
	content: '';
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--chevron-icon) center / contain no-repeat;
	mask: var(--chevron-icon) center / contain no-repeat;
}

/* ─── Стеклянные карточки ─── */
.glass-card {
	position: relative;
	overflow: hidden;
	width: 100%;
	border-radius: 22px;
	background: linear-gradient(135deg, var(--panel-fill-top), var(--panel-fill-middle) 50%, var(--panel-fill-bottom));
	border: 1px solid var(--card-border);
	box-shadow: var(--card-shadow);
	padding: 20px;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}
/* Световой блик в правом верхнем углу */
.glass-card::before {
	content: '';
	position: absolute;
	top: -20px;
	right: -20px;
	width: 120px;
	height: 70px;
	background: radial-gradient(ellipse, var(--card-glare) 0%, transparent 70%);
	transform: rotate(-30deg);
	pointer-events: none;
}
.glass-card > * { position: relative; }

.glass-card--compact { padding: 18px; }
.glass-card--clickable {
	cursor: pointer;
	text-decoration: none;
	color: var(--color-text);
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.glass-card--clickable:active { transform: scale(0.98); }
@media (hover: hover) {
	.glass-card--clickable:hover { transform: translateY(-2px); }
}

/* Иконка в стеклянном квадрате */
.icon-container {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--card-icon-bg);
	border: 1px solid var(--card-icon-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text);
	font-size: 16px;
	font-weight: 800;
}
.icon-container svg { width: 24px; height: 24px; }
.icon-container--52 { width: 52px; height: 52px; border-radius: 16px; }
.icon-container--40 { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; }

/* ─── Типографика ─── */
.page-hero {
	padding: 8px 4px 4px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}
.text-title {
	font-size: 26px;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.3px;
}
.text-card-title {
	font-size: 22px;
	font-weight: 800;
	line-height: 1.25;
}
.text-list-title {
	font-size: 16px;
	font-weight: 700;
}
.text-description {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
}
.text-description--lg { font-size: 16px; }
.text-small {
	font-size: 13px;
	font-weight: 500;
	color: var(--color-text-muted);
	line-height: 1.4;
}
.text-link {
	color: var(--color-text);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1.5px solid currentColor;
	border-bottom-color: color-mix(in srgb, currentColor 35%, transparent);
	cursor: pointer;
}

/* ─── Кнопки ─── */
.black-button,
.white-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px 18px;
	border-radius: 18px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.black-button svg,
.white-button svg { width: 18px; height: 18px; flex-shrink: 0; }
.black-button:active,
.white-button:active { transform: scale(0.98); }

.black-button {
	background: var(--btn-primary-bg);
	border: 1px solid var(--btn-primary-border);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
	color: var(--btn-primary-text);
}
/* Светлая кнопка — в обеих темах светлая, текст всегда тёмный */
.white-button {
	background: var(--pill-bg);
	border: 1px solid var(--pill-border);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	color: var(--color-dark-grey);
}
.black-button--large,
.white-button--large {
	padding: 18px;
	font-size: 16px;
	border-radius: 22px;
}
.black-button--disabled {
	background: var(--card-inner-bg);
	border: 1px solid var(--card-inner-border);
	color: var(--color-text-muted);
	box-shadow: none;
	cursor: default;
	pointer-events: none;
}
/* Вторая строка внутри кнопки (архитектура · размер) */
.black-button small,
.white-button small {
	font-size: 12px;
	font-weight: 600;
	opacity: 0.6;
}

/* Пилюля-бейдж */
.pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 50px;
	background: var(--pill-bg);
	border: 1px solid var(--pill-border);
	color: var(--color-dark-grey);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.pill--green {
	background: rgba(34, 197, 94, 0.16);
	border-color: rgba(34, 197, 94, 0.45);
	color: var(--color-green-text);
}

/* ─── Спиннер / статус ─── */
.spinner {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2.5px solid var(--card-inner-border);
	border-top-color: var(--color-text);
	animation: spin 0.8s linear infinite;
}

/* ─── Тост (как в приложении: тёмное стекло сверху) ─── */
.toast {
	position: fixed;
	top: calc(24px + env(safe-area-inset-top));
	left: 50%;
	z-index: 200;
	transform: translate(-50%, -20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	background: linear-gradient(135deg, rgba(10, 10, 15, 0.92), rgba(20, 20, 28, 0.85));
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 16px;
	padding: 14px 22px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}
.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ─── Появление ─── */
.appear { animation: slideUp 0.5s ease both; }
.appear--1 { animation-delay: 0.05s; }
.appear--2 { animation-delay: 0.1s; }
.appear--3 { animation-delay: 0.15s; }
.appear--4 { animation-delay: 0.2s; }

/* ─── Анимации ─── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideUp {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes blobDrift {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(5%, -6%) scale(1.08) rotate(4deg); }
	100% { transform: translate(-4%, 5%) scale(0.95) rotate(-3deg); }
}
@keyframes blobOrbit {
	0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
	25% { transform: translate(22px, -8px) scale(1.08) rotate(5deg); }
	50% { transform: translate(14px, 16px) scale(0.94) rotate(-4deg); }
	75% { transform: translate(-10px, 8px) scale(1.04) rotate(3deg); }
}
@keyframes blobOrbitSoft {
	0%, 100% { transform: translate(0, 0) scale(1) rotate(0deg); }
	25% { transform: translate(9px, -4px) scale(1.05) rotate(4deg); }
	50% { transform: translate(5px, 8px) scale(0.96) rotate(-3deg); }
	75% { transform: translate(-7px, 4px) scale(1.03) rotate(2deg); }
}