/* ПДД Узбекистан — лендинг. Токены и компоненты общие для ru и uz версий. */

/* Manrope переменный: один файл на подмножество, вес задаётся диапазоном.
   Греческое и вьетнамское подмножества не подключаем — на сайте их нет. */
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/manrope-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/manrope-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/manrope-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('fonts/manrope-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg: #fff;
	--bg-hero: #F4F8FD;
	--surface: #fff;
	--card: #F5F7FA;
	--panel: #0B0F14;
	--panel-text: #fff;
	--panel-muted: #A8B2BC;
	--text: #0B0F14;
	--muted: #5C666F;
	--faint: #656F79;
	--border: #E8ECF0;
	--hairline: #EEF1F4;
	--line: #DDE3E9;
	--accent: #007AFF;
	--accent-strong: #0068DB;
	/* Фон кнопок отдельно от акцента: на #007AFF белый текст даёт 4.0:1 —
	   ниже порога AA. Оттенок на глаз тот же, контраст уже проходит. */
	--btn: #0A6FE8;
	--btn-strong: #0059C7;
	--accent-soft: #E4EFFF;
	--accent-ink: #0057C2;
	--nav: rgba(255, 255, 255, .9);
	--chip: #F1F4F7;
	--tile-blue: #E4EFFF;
	--ink-blue: #0068DB;
	--tile-red: #FFE7E7;
	--ink-red: #D92C22;
	--tile-green: #E6F7EA;
	--ink-green: #1E8038;
	--shadow-lg: 0 24px 60px rgba(11, 15, 20, .18);
	--shadow-sm: 0 14px 36px rgba(11, 15, 20, .12);
	--shadow-hover: 0 10px 24px rgba(11, 15, 20, .09);
	--cta: #0057C2;
	--cta-soft: #D6E8FF;
	--device: #0B0F14;
	--device-edge: rgba(11, 15, 20, .12);
	--focus: #0057C2;
}

html[data-theme="dark"] {
	--bg: #0A0E13;
	--bg-hero: #101823;
	--surface: #121820;
	--card: #131A22;
	--panel: #1B2530;
	--panel-text: #F2F5F8;
	--panel-muted: #A7B2BD;
	--text: #EEF2F6;
	--muted: #A3AEB8;
	--faint: #8A949E;
	--border: #222B34;
	--hairline: #1A222A;
	--line: #2A343E;
	--accent: #3B96FF;
	--accent-strong: #5AA8FF;
	--btn: #1F6FD4;
	--btn-strong: #1A5FBB;
	--accent-soft: #14283E;
	--accent-ink: #9CC9FF;
	--nav: rgba(10, 14, 19, .86);
	--chip: #171F27;
	--tile-blue: #14283E;
	--ink-blue: #5AA8FF;
	--tile-red: #361618;
	--ink-red: #FF6B62;
	--tile-green: #122C1C;
	--ink-green: #4BD37A;
	--shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
	--shadow-sm: 0 14px 36px rgba(0, 0, 0, .4);
	--shadow-hover: 0 10px 24px rgba(0, 0, 0, .38);
	--cta: #14355C;
	--cta-soft: #C3DCFA;
	--device: #28323D;
	--device-edge: rgba(255, 255, 255, .14);
	--focus: #9CC9FF;
}

html {
	color-scheme: light;
	scroll-behavior: smooth;
	/* якорные ссылки не должны заезжать под липкую шапку */
	scroll-padding-top: 84px;
}

html[data-theme="dark"] {
	color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

a {
	color: var(--accent);
	text-decoration: none;
	transition: color .18s ease;
}

a:hover {
	color: var(--accent-strong);
}

img {
	max-width: 100%;
}

:focus-visible {
	outline: 2px solid var(--focus);
	outline-offset: 3px;
	border-radius: 6px;
}

.wrap {
	max-width: 1160px;
	margin: 0 auto;
}

.sec {
	padding: 88px 28px 0;
}

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 50;
	padding: 12px 18px;
	background: var(--btn);
	color: #fff;
	border-radius: 0 0 12px 0;
	font-weight: 700;
}

.skip:focus {
	left: 0;
	color: #fff;
}

/* ---------- Шапка ---------- */

.header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--nav);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--hairline);
}

.nav-row {
	max-width: 1160px;
	margin: 0 auto;
	padding: 14px 28px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 11px;
	color: var(--text);
	white-space: nowrap;
	flex: 0 0 auto;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.brand:hover {
	color: var(--text);
}

.brand img {
	height: 22px;
	width: auto;
	display: block;
}

.brand .logo-dark {
	display: none;
}

html[data-theme="dark"] .brand .logo-dark {
	display: block;
}

html[data-theme="dark"] .brand .logo-light {
	display: none;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 22px;
	font-size: 14px;
	font-weight: 600;
	flex: 0 0 auto;
}

.nav-links a {
	color: var(--muted);
	white-space: nowrap;
}

.nav-links a:hover {
	color: var(--text);
}

.nav-actions {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	white-space: nowrap;
}

.icon-btn {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background: var(--chip);
	color: var(--text);
	border: 0;
	/* Обе иконки лежат в одной ячейке грида и перекрещиваются прозрачностью.
	   Через display: none это было бы не анимировать. */
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	flex: 0 0 auto;
	transition: background-color .18s ease, transform .12s ease;
}

.icon-btn:active {
	transform: scale(.92);
}

.icon-btn svg {
	grid-area: 1 / 1;
	transition: opacity .2s ease, transform .3s ease;
}

.icon-btn .icon-moon {
	opacity: 0;
	transform: rotate(-90deg) scale(.5);
}

html[data-theme="dark"] .icon-btn .icon-moon {
	opacity: 1;
	transform: none;
}

html[data-theme="dark"] .icon-btn .icon-sun {
	opacity: 0;
	transform: rotate(90deg) scale(.5);
}

.lang {
	display: flex;
	align-items: center;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background: var(--chip);
	font-size: 13px;
	font-weight: 700;
}

.lang a {
	padding: 5px 12px;
	border-radius: 999px;
	color: var(--faint);
	transition: background-color .18s ease, color .18s ease;
}

.nav-cta-short {
	display: none;
}

.lang a[aria-current="true"] {
	background: var(--surface);
	color: var(--text);
}

/* Полоса разделов: на узких экранах уезжает под логотип и скроллится вбок,
   а не прячется — иначе с телефона до секций не добраться. */
.nav-scroll {
	display: none;
}

/* ---------- Кнопки ---------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 26px;
	border-radius: 14px;
	font-size: 16px;
	font-weight: 700;
	border: 1px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}

.btn:active {
	transform: scale(.97);
}

.btn-primary {
	background: var(--btn);
	color: #fff;
}

.btn-primary:hover {
	background: var(--btn-strong);
	color: #fff;
}

.btn-ghost {
	background: var(--surface);
	border-color: var(--line);
	color: var(--text);
}

.btn-ghost:hover {
	border-color: var(--accent);
	color: var(--text);
}

.btn-sm {
	padding: 10px 18px;
	font-size: 14px;
	border-radius: 12px;
}

.btn-store {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 16px;
	border-radius: 12px;
	background: var(--panel);
	color: var(--panel-text);
	font-size: 14px;
	font-weight: 700;
	border: 1px solid var(--border);
	transition: opacity .18s ease, background-color .18s ease, color .18s ease, transform .12s ease;
}

.btn-store:active {
	transform: scale(.97);
}

.btn-store:hover {
	color: var(--panel-text);
	opacity: .9;
}

.btn-store.tg {
	background: var(--accent-soft);
	color: var(--accent-ink);
	border-color: transparent;
}

.btn-store.tg:hover {
	color: var(--accent-ink);
}

.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.store-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	padding-top: 6px;
}

/* ---------- Первый экран ---------- */

.hero-sec {
	background: var(--bg-hero);
	padding: 76px 28px 0;
}

.hero {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.hero-copy {
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}

.hero h1 {
	margin: 0;
	font-size: clamp(38px, 4.4vw, 56px);
	line-height: 1.06;
	font-weight: 800;
	letter-spacing: -.03em;
	text-wrap: pretty;
}

.hero .lead {
	margin: 0;
	font-size: 18px;
	line-height: 1.6;
	color: var(--muted);
	max-width: 520px;
	text-wrap: pretty;
}

.hint {
	font-size: 14px;
	color: var(--faint);
	font-weight: 600;
}

.phones {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	min-width: 0;
	max-width: 100%;
	padding: 16px 0 8px;
}

.device {
	background: var(--device);
	border: 1px solid var(--device-edge);
	box-shadow: var(--shadow-sm);
	flex: 0 1 auto;
}

.device img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
	display: block;
}

.device-side {
	width: 31%;
	max-width: 172px;
	aspect-ratio: 172 / 352;
	border-radius: 30px;
	padding: 6px;
}

.device-side img {
	border-radius: 25px;
}

.device-side.left {
	margin-right: -28px;
}

.device-side.right {
	margin-left: -28px;
}

.device-main {
	position: relative;
	z-index: 2;
	width: 45%;
	max-width: 250px;
	aspect-ratio: 250 / 510;
	border-radius: 42px;
	padding: 8px;
	box-shadow: var(--shadow-lg);
}

.device-main img {
	border-radius: 34px;
}

/* ---------- Цифры ---------- */

.stats-sec {
	padding: 8px 28px 0;
}

.stats {
	max-width: 1160px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 22px;
	padding: 30px 34px;
	border-radius: 26px;
	background: var(--panel);
	border: 1px solid var(--border);
}

.stat b {
	display: block;
	font-size: 38px;
	font-weight: 800;
	color: var(--panel-text);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.stat span {
	display: block;
	margin-top: 5px;
	font-size: 14px;
	font-weight: 600;
	color: var(--panel-muted);
}

/* ---------- Заголовки секций ---------- */

.sec-head {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 640px;
}

.sec-head h2 {
	margin: 0;
	font-size: clamp(30px, 3.2vw, 40px);
	font-weight: 800;
	letter-spacing: -.025em;
}

.sec-head p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--muted);
}

.stack {
	display: flex;
	flex-direction: column;
	gap: 34px;
}

/* ---------- Возможности ---------- */

.feat-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.feat {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 26px 26px 0;
	border-radius: 24px;
	background: var(--card);
	border: 1px solid var(--hairline);
	overflow: hidden;
}

.feat h3 {
	margin: 0;
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.02em;
}

.feat p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--muted);
}

.tile {
	width: 44px;
	height: 44px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.tile-green {
	background: var(--tile-green);
	color: var(--ink-green);
}

.tile-red {
	background: var(--tile-red);
	color: var(--ink-red);
}

.tile-blue {
	background: var(--tile-blue);
	color: var(--ink-blue);
}

.feat-shot {
	margin-top: auto;
	display: flex;
	justify-content: center;
	padding-top: 8px;
}

.feat-shot .device {
	width: 74%;
	max-width: 210px;
	aspect-ratio: 210 / 300;
	border-radius: 26px 26px 0 0;
	border-bottom: none;
	padding: 7px 7px 0;
}

.feat-shot .device img {
	border-radius: 20px 20px 0 0;
}

.minor-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px 30px;
	padding-top: 6px;
	margin: 0;
	list-style: none;
}

.minor-grid li {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 2px 0;
}

.minor-grid li::before {
	content: '';
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: var(--accent);
	flex: 0 0 auto;
	margin-top: 8px;
}

.minor-grid b {
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.minor-grid span {
	display: block;
	margin-top: 2px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--muted);
}

/* ---------- Маршрут подготовки ---------- */

.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: step;
}

.steps li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 26px 24px;
	border-radius: 22px;
	background: var(--surface);
	border: 1px solid var(--border);
}

.step-top {
	display: flex;
	align-items: center;
	gap: 10px;
}

.step-top::before {
	counter-increment: step;
	content: counter(step);
	width: 30px;
	height: 30px;
	border-radius: 10px;
	background: var(--btn);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 800;
	flex: 0 0 auto;
}

.step-top span {
	font-size: 13px;
	font-weight: 700;
	color: var(--faint);
	letter-spacing: .06em;
	text-transform: uppercase;
}

.steps h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.steps p {
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
	color: var(--muted);
}

/* ---------- Вопросы ---------- */

.faq-wrap {
	max-width: 820px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* details/summary вместо скриптового аккордеона: ответы всегда есть в разметке,
   работают с клавиатуры и индексируются, даже когда пункт свёрнут. */
.faq-item {
	border: 1px solid var(--border);
	border-radius: 18px;
	background: var(--surface);
	overflow: hidden;
}

.faq-item summary {
	display: flex;
	align-items: center;
	gap: 16px;
	/* справа оставлено место под значок: он выведен из потока, чтобы
	   вертикальную палочку можно было доворачивать до минуса */
	padding: 20px 56px 20px 22px;
	position: relative;
	cursor: pointer;
	font-size: 17px;
	font-weight: 700;
	list-style: none;
}

.faq-item summary::-webkit-details-marker {
	display: none;
}

/* Значок собран из двух палочек вместо символов «+» и «−»: content
   не анимируется, а поворот вертикальной палочки — да. */
.faq-item summary::before,
.faq-item summary::after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	width: 14px;
	height: 2px;
	border-radius: 2px;
	background: var(--faint);
	transition: transform .25s ease, background-color .18s ease;
}

.faq-item summary::before {
	transform: translateY(-50%);
}

.faq-item summary::after {
	transform: translateY(-50%) rotate(90deg);
}

.faq-item[open] summary::after {
	transform: translateY(-50%) rotate(0deg);
}

.faq-item .answer {
	margin: 0;
	padding: 0 22px 20px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--muted);
}

/* Базовый вариант: ответ мягко проявляется. Высота при этом всё равно
   встаёт скачком — это работает везде и ничего не ломает. */
.faq-item[open] .answer {
	animation: faq-answer .24s ease;
}

@keyframes faq-answer {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* Где движок умеет ::details-content и interpolate-size — разворачивается
   сама высота блока. Остальные остаются на проявлении выше. */
@supports selector(::details-content) and (interpolate-size: allow-keywords) {
	:root {
		interpolate-size: allow-keywords;
	}

	.faq-item::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size .28s ease, content-visibility .28s allow-discrete;
	}

	.faq-item[open]::details-content {
		block-size: auto;
	}

	/* высоту двигает уже сам блок, второе движение текста лишнее */
	.faq-item[open] .answer {
		animation: none;
	}
}

/* ---------- Финальный блок ---------- */

.cta {
	max-width: 1160px;
	margin: 0 auto;
	padding: 56px 32px;
	border-radius: 30px;
	background: var(--cta);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	text-align: center;
}

.cta h2 {
	margin: 0;
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 800;
	color: #fff;
	letter-spacing: -.025em;
	max-width: 640px;
	text-wrap: pretty;
}

.cta p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--cta-soft);
	max-width: 520px;
}

.cta .store-row {
	justify-content: center;
	gap: 12px;
}

.cta .btn-store {
	padding: 15px 26px;
	font-size: 16px;
	border-radius: 14px;
	background: #0B0F14;
	color: #fff;
	border-color: transparent;
}

.cta .btn-store.web {
	background: #fff;
	color: #0B0F14;
}

.cta .btn-store.web:hover {
	background: #EAF2FF;
	color: #0B0F14;
}

/* ---------- Подвал ---------- */

.footer {
	padding: 56px 28px 44px;
}

.foot {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	padding-top: 28px;
	border-top: 1px solid var(--hairline);
}

.foot-links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-left: 14px;
	font-size: 14px;
	font-weight: 600;
}

.foot-links a {
	color: var(--muted);
}

.foot-links a:hover {
	color: var(--text);
}

.foot .brand {
	font-size: 15px;
}

.foot .brand img {
	height: 19px;
}

.foot-copy {
	margin-left: auto;
	font-size: 13px;
	color: var(--faint);
}

.foot-copy a {
	color: var(--faint);
}

/* ---------- Липкая кнопка на телефоне ---------- */

.sticky-cta {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: var(--nav);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--hairline);
	transform: translateY(120%);
	transition: transform .2s ease;
}

.sticky-cta.visible {
	transform: translateY(0);
}

.sticky-cta .btn {
	width: 100%;
}

/* ---------- Наведение на карточки ---------- */

/* Только там, где есть настоящий курсор: на тач-экранах :hover залипает после
   тапа и карточка так и остаётся приподнятой. */
@media (hover: hover) {

	.feat,
	.steps li {
		transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
	}

	.feat:hover,
	.steps li:hover {
		transform: translateY(-2px);
		box-shadow: var(--shadow-hover);
		border-color: var(--line);
	}

	/* Вопросы не поднимаем: строка во всю ширину, да ещё и раскрытая,
	   при подъёме дёргает всю колонку. */
	.faq-item {
		transition: border-color .2s ease;
	}

	.faq-item:hover {
		border-color: var(--line);
	}

	.faq-item summary:hover::before,
	.faq-item summary:hover::after {
		background: var(--text);
	}
}

/* ---------- Уважение к системной настройке ---------- */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

	.feat:hover,
	.steps li:hover {
		transform: none;
	}
}

/* ---------- Адаптив ---------- */

@media (max-width: 1180px) {
	.sec,
	.stats-sec,
	.hero-sec,
	.footer {
		padding-left: 22px;
		padding-right: 22px;
	}

	.nav-row {
		padding-left: 22px;
		padding-right: 22px;
	}

	.hero {
		gap: 36px;
	}
}

@media (max-width: 1080px) {
	.nav-row .nav-links {
		display: none;
	}

	.nav-scroll {
		display: block;
		border-top: 1px solid var(--hairline);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.nav-scroll::-webkit-scrollbar {
		display: none;
	}

	.nav-scroll ul {
		display: flex;
		gap: 8px;
		margin: 0;
		padding: 10px 22px;
		list-style: none;
		width: max-content;
	}

	.nav-scroll a {
		display: block;
		padding: 7px 14px;
		border-radius: 999px;
		background: var(--chip);
		color: var(--muted);
		font-size: 13px;
		font-weight: 700;
		white-space: nowrap;
	}

	.nav-scroll a:hover {
		color: var(--text);
	}

	html {
		scroll-padding-top: 124px;
	}
}

@media (max-width: 960px) {
	.hero {
		grid-template-columns: 1fr;
	}

	.phones {
		padding-top: 4px;
	}

	.sec {
		padding-top: 64px;
	}

	.hero-sec {
		padding-top: 52px;
	}

	.stats {
		padding: 24px 22px;
	}

	.cta {
		padding: 44px 24px;
	}

	.feat-grid {
		grid-template-columns: 1fr;
	}

	.feat-shot .device {
		max-width: 240px;
	}
}

@media (max-width: 760px) {
	.nav-cta-long {
		display: none;
	}

	.nav-cta-short {
		display: inline;
	}
}

@media (max-width: 620px) {
	.sec,
	.stats-sec,
	.footer {
		padding-left: 18px;
		padding-right: 18px;
		padding-top: 52px;
	}

	.hero-sec {
		padding: 36px 18px 0;
	}

	.hero {
		gap: 28px;
	}

	.nav-row {
		padding: 12px 16px;
		gap: 10px;
	}

	.nav-scroll ul {
		padding: 10px 16px;
	}

	.nav-actions .btn-sm {
		padding: 9px 14px;
		font-size: 13px;
	}

	.cta-row a {
		flex: 1 1 auto;
		padding: 15px 20px;
	}

	.store-row {
		width: 100%;
	}

	.stats {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}

	.stat b {
		font-size: 30px;
	}

	.cta {
		padding: 36px 20px;
		border-radius: 24px;
	}

	.faq-item summary {
		font-size: 16px;
		padding: 17px 48px 17px 18px;
	}

	.faq-item summary::before,
	.faq-item summary::after {
		right: 18px;
	}

	.faq-item .answer {
		padding: 0 18px 18px;
	}

	.feat {
		padding: 20px 20px 0;
	}

	.steps li {
		padding: 20px;
	}

	.foot {
		gap: 14px;
	}

	.foot-links {
		margin-left: 0;
		gap: 14px;
	}

	.foot-copy {
		margin-left: 0;
	}

	.sticky-cta {
		display: block;
	}

	/* чтобы липкая кнопка не перекрывала подвал */
	.footer {
		padding-bottom: 104px;
	}
}

@media (max-width: 420px) {
	.brand span {
		display: none;
	}
}