/*
Theme Name: MiniMax Ru
Theme URI: https://minimaxai.info/
Description: Тема брендового сайта MiniMax Ru. Палитра снята с minimax.io, язык дизайна собран под этот сайт.
Author: MiniMax Ru
Version: 1.1.0
Text Domain: minimax-ru
*/

/* ==========================================================================
   1. Токены
   ========================================================================== */

:root {
	--bg: #ffffff;
	--surface: #f7f8fa;
	--tint: #f2f0ff;
	--ink: #181e25;
	--ink-2: #18181b;
	--line: #e5e7eb;
	--line-soft: #eff1f4;
	--muted: #86909c;
	--muted-2: #636465;
	--accent: #5b3df5;
	--accent-ink: #ffffff;

	/* Подложка под текстом на видео: тот же --ink, но полупрозрачный.
	   Держим отдельным токеном, чтобы плотность правилась в одном месте. */
	--plate: rgba(24, 30, 37, .58);
	--plate-line: rgba(255, 255, 255, .14);

	--wrap: 1680px;
	--gut: 32px;
	--r-lg: 28px;
	--r-md: 18px;
	--r-sm: 12px;
	--r-pill: 999px;

	--f-head: "Ubuntu Sans", "Segoe UI", Arial, sans-serif;
	--f-body: "Ubuntu Sans", "Segoe UI", Arial, sans-serif;
	--f-serif: "Vollkorn", Georgia, "Times New Roman", serif;
	--f-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. База
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--f-body);
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

img, video, svg, canvas { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
	font-family: var(--f-head);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -.035em;
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(38px, 5.4vw, 84px); }
h2 { font-size: clamp(30px, 3.4vw, 54px); }
h3 { font-size: clamp(20px, 1.6vw, 27px); letter-spacing: -.02em; font-weight: 500; }
h4 { font-size: 19px; letter-spacing: -.01em; font-weight: 500; }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .45em; }
li:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

.wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gut);
}

.lead {
	font-size: clamp(18px, 1.35vw, 22px);
	line-height: 1.5;
	color: var(--muted-2);
	max-width: 62ch;
}

.sec { padding: clamp(64px, 7vw, 128px) 0; }
.sec--tight { padding: clamp(48px, 5vw, 88px) 0; }
.sec--surface { background: var(--surface); }

.muted { color: var(--muted); }

/* ==========================================================================
   3. Кнопки
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 15px 28px;
	border-radius: var(--r-pill);
	font-family: var(--f-head);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: -.01em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
	white-space: nowrap;
}

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

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

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--on-dark { background: #fff; color: var(--ink); }
.btn--on-dark:hover { background: var(--tint); }

.btn--ghost-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.btn--ghost-on-dark:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn--sm { padding: 11px 20px; font-size: 15px; }

.btn__arw { width: 16px; height: 16px; flex: none; }

/* короткая подпись кнопки — включается на узких экранах, см. блок 17 */
.btn__t--s { display: none; }

/* ==========================================================================
   4. Шапка — логотип и кнопка в разных углах
   ========================================================================== */

.hdr {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255,255,255,.86);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--line-soft);
}

.hdr__in {
	max-width: var(--wrap);
	margin-inline: auto;
	padding: 0 var(--gut);
	height: 76px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.hdr__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-head);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -.03em;
	flex: none;
	margin-right: auto;
}

.hdr__logo img { width: 30px; height: 30px; border-radius: 8px; }

.hdr__nav {
	display: flex;
	align-items: center;
	gap: 26px;
	font-size: 15.5px;
	color: var(--muted-2);
}

.hdr__nav a { transition: color .16s var(--ease); }
.hdr__nav a:hover, .hdr__nav a[aria-current="page"] { color: var(--ink); }

.hdr__act { display: flex; align-items: center; gap: 10px; flex: none; }

.burger {
	display: none;
	width: 44px; height: 44px;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: transparent;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	flex: none;
}

.burger span {
	display: block;
	width: 17px; height: 1.6px;
	background: var(--ink);
	position: relative;
	transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.burger span::before, .burger span::after {
	content: ""; position: absolute; left: 0;
	width: 17px; height: 1.6px; background: var(--ink);
	transition: transform .2s var(--ease);
}
.burger span::before { top: -5.5px; }
.burger span::after  { top: 5.5px; }

.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5.5px) rotate(-45deg); }

.drawer {
	display: none;
	position: fixed;
	inset: 76px 0 0;
	z-index: 55;
	background: var(--bg);
	padding: 22px var(--gut) 40px;
	overflow-y: auto;
}
.drawer.is-open { display: block; }

.drawer a {
	display: block;
	padding: 15px 0;
	font-family: var(--f-head);
	font-size: 21px;
	letter-spacing: -.02em;
	border-bottom: 1px solid var(--line-soft);
}

/* ==========================================================================
   5. Hero — вложенная медиа-панель с полями
   ========================================================================== */

.hero { padding: 18px; }

.hero__panel {
	position: relative;
	max-width: var(--wrap);
	margin-inline: auto;
	border-radius: var(--r-lg);
	overflow: hidden;
	background: var(--ink);
	isolation: isolate;
	min-height: clamp(430px, 62vh, 720px);
	display: flex;
	align-items: flex-end;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.hero__media img, .hero__media video {
	width: 100%; height: 100%;
	object-fit: cover;
}

/* Вуали поверх кадра нет намеренно: затемняющий градиент на всю панель
   гасил цвет видео. Читаемость обеспечивает подложка .hero__plate —
   она стоит только под текстом и кнопками, а не поверх всего кадра. */

.hero__body {
	padding: clamp(28px, 4vw, 64px);
	width: 100%;
	color: #fff;
}

/* Полупрозрачная подложка: только текст и кнопки. Ширину ограничивает
   .hero__body, поэтому плашка не расползается на всю панель. */
.hero__plate {
	padding: clamp(22px, 2.4vw, 40px);
    border-radius: var(--r-md);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.hero__plate > :last-child { margin-bottom: 0; }

.hero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: rgba(255,255,255,.8);
	border: 1px solid rgba(255,255,255,.28);
	border-radius: var(--r-pill);
	padding: 7px 15px;
	margin-bottom: 20px;
}

.hero h1 { color: #fff; max-width: 20ch; margin-bottom: .32em; }

.hero__sub {
	font-size: clamp(17px, 1.25vw, 21px);
	line-height: 1.5;
	color: rgba(255,255,255,.86);
	max-width: 56ch;
	margin-bottom: 28px;
}

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

/* На широких экранах текстовый блок уходит вправо. Потолок 900px и доля
   58% держат правую колонку уже панели: без ограничения плашка на 1680px
   растянулась бы во всю ширину и снова стала бы вуалью.
   Ниже 1025px колонка возвращается на всю ширину — там делить нечего. */
@media (min-width: 1025px) {
	.hero__body {
		max-width: min(58%, 900px);
		margin-left: auto;
	}
}

/* ==========================================================================
   6. Счётчики — анимация чисел
   ========================================================================== */

.nums {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	overflow: hidden;
}

.nums__cell { background: var(--bg); padding: clamp(22px, 2.4vw, 38px); }

.nums__val {
	font-family: var(--f-head);
	font-size: clamp(36px, 4.2vw, 62px);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	display: block;
	margin-bottom: 10px;
}

.nums__lbl { font-size: 15px; color: var(--muted); line-height: 1.35; }

/* ==========================================================================
   7. Бенто — неравные блоки
   ========================================================================== */

.bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 14px;
}

.tile {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: clamp(22px, 2.2vw, 34px);
	background: var(--bg);
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tile--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.tile--dark .tile__note { color: rgba(255,255,255,.66); }

.tile--tint { background: var(--tint); border-color: transparent; }
.tile--surface { background: var(--surface); border-color: transparent; }

.tile--w3 { grid-column: span 3; }
.tile--w4 { grid-column: span 4; }
.tile--w5 { grid-column: span 5; }
.tile--w6 { grid-column: span 6; }
.tile--w7 { grid-column: span 7; }
.tile--w8 { grid-column: span 8; }
.tile--w12 { grid-column: span 12; }

.tile--tall { min-height: 340px; }

.tile__eyebrow {
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
	margin-bottom: 14px;
}

.tile__big {
	font-family: var(--f-head);
	font-size: clamp(30px, 3vw, 46px);
	font-weight: 500;
	letter-spacing: -.04em;
	line-height: 1;
	margin-bottom: 10px;
	font-variant-numeric: tabular-nums;
}

.tile__note { font-size: 15.5px; color: var(--muted-2); }

.tile__foot { margin-top: auto; padding-top: 20px; }

/* заголовок со встроенной кнопкой (референс 3) */
.h-inline {
	display: inline;
	vertical-align: baseline;
}
.h-inline .btn {
	vertical-align: middle;
	margin: 0 .12em;
	transform: translateY(-.06em);
}

/* ==========================================================================
   8. Веерная карусель видео
   ========================================================================== */

.fan { text-align: center; }

.fan__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.2vw, 22px);
	perspective: 1800px;
	padding: 10px 0 26px;
}

/* Карточки горизонтальные: ролики 1366×768, то есть 16:9. Ширины подобраны
   так, чтобы веер из пяти карточек укладывался в контейнер 1680px:
   2×(260×.86) + 2×(260×.94) + 560 + 4 зазора = 1584px. Ниже 1600px пятая
   и первая карточки прячутся — иначе ряд выходит за экран. */
.fan__cell {
	flex: 0 0 auto;
	width: clamp(150px, 16vw, 260px);
	aspect-ratio: 16 / 9;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--surface);
	border: 1px solid var(--line);
	transition: transform .5s var(--ease), opacity .5s var(--ease), width .5s var(--ease);
	transform-style: preserve-3d;
	position: relative;
}

.fan__cell video, .fan__cell img { width: 100%; height: 100%; object-fit: cover; }

.fan__cell[data-pos="-2"] { transform: rotateY(26deg) scale(.86); opacity: .55; }
.fan__cell[data-pos="-1"] { transform: rotateY(16deg) scale(.94); opacity: .82; }
.fan__cell[data-pos="0"]  { transform: none; width: clamp(240px, 36vw, 560px); opacity: 1; box-shadow: 0 24px 60px rgba(24,30,37,.18); }
.fan__cell[data-pos="1"]  { transform: rotateY(-16deg) scale(.94); opacity: .82; }
.fan__cell[data-pos="2"]  { transform: rotateY(-26deg) scale(.86); opacity: .55; }

/* Крайние карточки веера показываем только там, где ряд из пяти горизонтальных
   кадров действительно помещается. Ниже порога остаются три — предыдущая,
   активная и следующая. Раньше порог стоял на 900px, но это было при
   вертикальных карточках вдвое уже нынешних. */
@media (max-width: 1599px) {
	.fan__cell[data-pos="-2"], .fan__cell[data-pos="2"] { display: none; }
}

/* На узких экранах горизонтальная карточка не делится на троих: три кадра
   16:9 в ряд дают переполнение (замерено на 390px — ряд выходил за экран
   на 68px). Ниже 700px остаётся только активный кадр, зато крупный. */
@media (max-width: 700px) {
	.fan__cell[data-pos="-1"], .fan__cell[data-pos="1"] { display: none; }
	.fan__cell[data-pos="0"] { width: min(88vw, 520px); }
}

.fan__meta { min-height: 62px; }
.fan__ttl {
	font-family: var(--f-head);
	font-size: clamp(21px, 1.9vw, 30px);
	letter-spacing: -.03em;
	margin-bottom: 4px;
}
.fan__cap { font-size: 15px; color: var(--muted); }

.fan__ctl { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }

.fan__btn {
	width: 46px; height: 46px;
	border-radius: var(--r-pill);
	border: 1px solid var(--line);
	background: transparent;
	cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .18s var(--ease), border-color .18s var(--ease);
}
.fan__btn:hover { border-color: var(--ink); }
.fan__btn--on { background: var(--ink); border-color: var(--ink); width: 74px; }
.fan__btn--on svg { stroke: #fff; }
.fan__btn svg { width: 17px; height: 17px; stroke: var(--ink); fill: none; stroke-width: 1.7; }

/* ==========================================================================
   9. Всплывающий текст
   ========================================================================== */

.rise > * {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.rise.is-in > * { opacity: 1; transform: none; }
.rise.is-in > *:nth-child(2) { transition-delay: .08s; }
.rise.is-in > *:nth-child(3) { transition-delay: .16s; }
.rise.is-in > *:nth-child(4) { transition-delay: .24s; }
.rise.is-in > *:nth-child(5) { transition-delay: .32s; }
.rise.is-in > *:nth-child(6) { transition-delay: .40s; }

.rise-line { display: block; overflow: hidden; }
.rise-line > span {
	display: block;
	transform: translateY(100%);
	transition: transform .7s var(--ease);
}
.is-in .rise-line > span { transform: none; }
.is-in .rise-line:nth-child(2) > span { transition-delay: .07s; }
.is-in .rise-line:nth-child(3) > span { transition-delay: .14s; }
.is-in .rise-line:nth-child(4) > span { transition-delay: .21s; }

/* ==========================================================================
   10. Таблицы
   ========================================================================== */

.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	min-width: 620px;
}

th, td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-weight: 500; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--surface); white-space: nowrap; }
tr:last-child td { border-bottom: none; }
td strong { font-weight: 700; }

/* ==========================================================================
   11. Тарифы
   ========================================================================== */

.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.plan {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	background: var(--bg);
}

.plan--best { border-color: var(--ink); border-width: 1.5px; }

.plan__tag {
	display: inline-block;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--tint);
	color: var(--accent);
	border-radius: var(--r-pill);
	padding: 5px 12px;
	margin-bottom: 16px;
	align-self: flex-start;
}

.plan__name { font-family: var(--f-head); font-size: 20px; letter-spacing: -.02em; margin-bottom: 8px; }

.plan__price {
	font-family: var(--f-head);
	font-size: clamp(32px, 3vw, 44px);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: 1;
	margin-bottom: 4px;
	font-variant-numeric: tabular-nums;
}
.plan__was { font-size: 15px; color: var(--muted); text-decoration: line-through; }
.plan__per { font-size: 15px; color: var(--muted); margin-bottom: 20px; }

.plan ul { list-style: none; padding: 0; margin: 0 0 24px; font-size: 15.5px; }
.plan li { padding-left: 24px; position: relative; color: var(--muted-2); }
.plan li::before {
	content: "";
	position: absolute; left: 2px; top: .55em;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--tint);
	border: 1.5px solid var(--accent);
}
.plan .btn { margin-top: auto; width: 100%; }

/* ==========================================================================
   12. Полоса CTA
   ========================================================================== */

.cta {
	background: var(--ink);
	color: #fff;
	border-radius: var(--r-lg);
	padding: clamp(36px, 4.5vw, 76px);
	text-align: center;
}
.cta h2 { color: #fff; margin-bottom: .3em; }
.cta p { color: rgba(255,255,255,.78); max-width: 58ch; margin-inline: auto; margin-bottom: 28px; }
.cta__row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================================
   13. Аккордеон
   ========================================================================== */

.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__q {
	width: 100%;
	background: none;
	border: 0;
	text-align: left;
	padding: 24px 48px 24px 0;
	font-family: var(--f-head);
	font-size: clamp(17px, 1.35vw, 21px);
	letter-spacing: -.02em;
	color: var(--ink);
	cursor: pointer;
	position: relative;
	line-height: 1.3;
}
.acc__q::after {
	content: "";
	position: absolute; right: 6px; top: 50%;
	width: 12px; height: 12px;
	border-right: 1.6px solid var(--ink);
	border-bottom: 1.6px solid var(--ink);
	transform: translateY(-70%) rotate(45deg);
	transition: transform .22s var(--ease);
}
.acc__item.is-open .acc__q::after { transform: translateY(-20%) rotate(-135deg); }
.acc__a { display: none; padding: 0 60px 26px 0; color: var(--muted-2); font-size: 16.5px; }
.acc__item.is-open .acc__a { display: block; }

/* ==========================================================================
   14. Рейтинг и отзывы
   ========================================================================== */

.rate { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rate__val { font-family: var(--f-head); font-size: 46px; font-weight: 500; letter-spacing: -.04em; line-height: 1; }
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 19px; height: 19px; fill: var(--accent); }

.revs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.rev { border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px; }
.rev__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.rev__who { font-weight: 500; font-size: 16px; }
.rev__txt { font-size: 16px; color: var(--muted-2); }

/* ==========================================================================
   15. Подвал
   ========================================================================== */

.ftr { background: var(--ink); color: rgba(255,255,255,.72); padding: clamp(48px, 5vw, 80px) 0 34px; font-size: 15.5px; }
.ftr a { color: rgba(255,255,255,.72); transition: color .16s var(--ease); }
.ftr a:hover { color: #fff; }
.ftr__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; margin-bottom: 44px; }
.ftr__logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-head); font-weight: 700; font-size: 20px; letter-spacing: -.03em; color: #fff; margin-bottom: 14px; }
.ftr__logo img { width: 28px; height: 28px; border-radius: 7px; }
.ftr h4 { color: #fff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.ftr ul { list-style: none; padding: 0; margin: 0; }
.ftr li { margin-bottom: 11px; }
.ftr__bot { border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; font-size: 14px; color: rgba(255,255,255,.5); }

/* ==========================================================================
   16. Мелочи
   ========================================================================== */

.crumbs { font-size: 14.5px; color: var(--muted); padding: 22px 0 0; }
.crumbs a:hover { color: var(--ink); }

.pagehead { padding: clamp(30px, 3.6vw, 60px) 0 clamp(30px, 3vw, 52px); }
.pagehead h1 { max-width: 22ch; }

.also { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.also a {
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	padding: 22px 24px;
	display: block;
	transition: border-color .18s var(--ease), background .18s var(--ease);
}
.also a:hover { border-color: var(--ink); background: var(--surface); }
.also__t { font-family: var(--f-head); font-size: 18px; letter-spacing: -.02em; margin-bottom: 5px; }
.also__d { font-size: 14.5px; color: var(--muted); }

.note {
	border-left: 2px solid var(--accent);
	background: var(--tint);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	padding: 20px 24px;
	font-size: 16px;
}

.pull {
	font-family: var(--f-serif);
	font-size: clamp(22px, 2.2vw, 34px);
	line-height: 1.32;
	letter-spacing: -.015em;
	font-weight: 500;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 56px); align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.sec__head { margin-bottom: clamp(28px, 3vw, 52px); max-width: 76ch; }

/* ==========================================================================
   17. Адаптив
   ========================================================================== */

@media (max-width: 1180px) {
	.nums { grid-template-columns: repeat(2, 1fr); }
	.plans { grid-template-columns: repeat(2, 1fr); }
	.ftr__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
	.hdr__nav { display: none; }
	.burger { display: inline-flex; }
	.tile--w3, .tile--w4, .tile--w5 { grid-column: span 6; }
	.tile--w7, .tile--w8 { grid-column: span 12; }
	.revs, .also, .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
	:root { --gut: 16px; --r-lg: 20px; }
	body { font-size: 16px; }
	.hdr__in { height: 66px; }
	.drawer { inset: 66px 0 0; }
	.tile { grid-column: span 12 !important; }
	.plans { grid-template-columns: 1fr; }
	.revs, .also, .grid-2, .grid-3 { grid-template-columns: 1fr; }
	.nums { grid-template-columns: 1fr 1fr; }
	.ftr__grid { grid-template-columns: 1fr; gap: 28px; }
	.hero__panel { min-height: 0; }
	.hero__panel--media .hero__body { padding-top: 210px; }
	.fan__stage { gap: 8px; }
	.acc__q { padding-right: 40px; font-size: 17px; }
	.acc__a { padding-right: 0; }
}

/* Шапка на узких экранах: логотип, кнопка и бургер должны уложиться в строку.
   Замерено на 390px — полная подпись кнопки давала переполнение 32px. */
@media (max-width: 560px) {
	.hdr__in { gap: 12px; }
	.hdr__logo { gap: 8px; font-size: 18px; }
	.btn--sm { padding: 10px 16px; }
	.hdr__act .btn__t { display: none; }
	.hdr__act .btn__t--s { display: inline; }
}

@media (max-width: 420px) {
	.hdr__logo span { display: none; }
	.hdr__act { gap: 8px; }
}


@media (prefers-reduced-motion: reduce) {
	.rise > *, .rise-line > span, .fan__cell { transition: none !important; }
	.rise > * { opacity: 1; transform: none; }
	.rise-line > span { transform: none; }
	.btn:hover { transform: none; }
}