/*
Theme Name: Qwen AI Ru
Description: Тема сайта о нейросети Qwen. Язык дизайна — «терминал»: командная панель как несущая форма, жидкий фон из слипающихся пятен.
Version: 1.3.2
Author: —
*/

/* ─────────────────────────────────────────────────────────
   ТОКЕНЫ. Палитра, контейнер, радиусы и тайминги сняты с
   бандлов офсайта g.alicdn.com/qwenweb/qwen-ai-fe/0.0.78
   ───────────────────────────────────────────────────────── */
:root {
	--brand:        #0a28f0;
	--brand-hover:  #0008c9;
	--brand-deep:   #00059e;
	--brand-soft:   #3b6fff;

	--ink:          #1d1d1f;
	--ink-2:        #35353d;
	--muted:        #6a6c78;
	--line:         #e1e3ea;
	--surface:      #ffffff;
	--surface-2:    #f6f7fb;
	--paper:        #fbfbfd;

	--amber:        #ec9214;
	--danger:       #e12121;

	--wrap:         1440px;
	--text-col:     800px;
	--pad:          clamp(16px, 4vw, 40px);

	--r:            12px;
	--r-pill:       999px;
	--r-sm:         8px;

	--t:            .3s ease-in-out;
	--t-slow:       .33s ease-in-out;

	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--sans: "Ysabeau", system-ui, -apple-system, sans-serif;
}

/* ─────────────────────────────────────────────────────────
   БАЗА
   ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: #ecf1ff;
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.62;
	font-weight: 400;
	overflow-x: hidden;
}

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

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

h1, h2, h3, h4 {
	margin: 0 0 .5em;
	line-height: 1.16;
	font-weight: 600;
	letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.35rem); }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.3em; }
li { margin-bottom: .45em; }

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

.skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--ink); color: #fff; padding: 10px 16px; z-index: 200;
}
.skip:focus { left: 8px; top: 8px; color: #fff; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.col { max-width: var(--text-col); }

/* ─────────────────────────────────────────────────────────
   ЖИДКИЙ ФОН. Слипающиеся пятна: круги под SVG-фильтром goo.
   z-index: -1 и pointer-events: none — фон никогда не
   перехватывает клики по кнопкам и ссылкам.
   ───────────────────────────────────────────────────────── */
.morph {
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	filter: url('#goo') blur(28px);
	opacity: .7;
}
.morph__ball {
	position: absolute;
	width: 46vmax;
	height: 46vmax;
	border-radius: 50%;
	will-change: transform;
	mix-blend-mode: multiply;
}
.morph__ball--1 { background: radial-gradient(circle at 30% 30%, #cfe0ff, #cfe0ff00 70%); }
.morph__ball--2 { background: radial-gradient(circle at 30% 30%, #e6dcff, #e6dcff00 70%); }
.morph__ball--3 { background: radial-gradient(circle at 30% 30%, #d3f4ec, #d3f4ec00 70%); }
.morph__ball--4 { background: radial-gradient(circle at 30% 30%, #ffe6f0, #ffe6f000 70%); }

.morph__defs { position: absolute; width: 0; height: 0; }

/* ─────────────────────────────────────────────────────────
   ШАПКА. Реф-кнопка стоит СНАРУЖИ бургера и видна всегда.
   ───────────────────────────────────────────────────────── */
.hdr {
	position: sticky;
	top: 0;
	z-index: 90;
	background: rgba(251, 251, 253, .86);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
.hdr__in {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 64px;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--ink);
	letter-spacing: -.01em;
	flex-shrink: 0;
}
.brand:hover { color: var(--ink); }
/* Знак — та же иконка, что стоит фавиконом. Своя форма и свой цвет,
   поэтому ни плашки, ни скругления под ней не нужно. */
.brand__mark {
	width: 26px; height: 26px;
	display: block;
	object-fit: contain;
	flex-shrink: 0;
}

.nav { margin-left: auto; min-width: 0; }

/* В строке шапки — только несущие пункты. Второстепенные лежат в том
   же списке и раскрываются в шторке бургера, страницы из навигации
   не пропадают. */
.nav__item--extra { display: none; }

/* Знак — в левом углу, реф-кнопка и бургер — в правом, рядом.
   Кнопка не прячется ни на одной ширине. */
.hdr__side {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.nav__list {
	display: flex; flex-wrap: wrap; gap: 2px;
	list-style: none; margin: 0; padding: 0;
}
.nav__list a {
	display: block;
	padding: 7px 11px;
	border-radius: var(--r-pill);
	color: var(--ink-2);
	font-size: 15px;
	transition: background var(--t), color var(--t);
}
.nav__list a:hover { background: var(--surface-2); color: var(--ink); }
.nav__list [aria-current="page"] { background: var(--surface-2); color: var(--brand); }

.burger {
	display: none;
	width: 42px; height: 42px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--surface);
	cursor: pointer;
	padding: 0;
	position: relative;
	flex-shrink: 0;
}
.burger span, .burger::before, .burger::after {
	content: "";
	position: absolute;
	left: 11px; right: 11px;
	height: 2px;
	background: var(--ink);
	transition: transform var(--t), opacity var(--t);
}
.burger span  { top: 20px; }
.burger::before { top: 14px; }
.burger::after  { top: 26px; }
.is-open .burger span { opacity: 0; }
.is-open .burger::before { transform: translateY(6px) rotate(45deg); }
.is-open .burger::after  { transform: translateY(-6px) rotate(-45deg); }

/* ─────────────────────────────────────────────────────────
   КНОПКИ — пилюли офсайта
   ───────────────────────────────────────────────────────── */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 20px;
	border-radius: var(--r-pill);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	font-family: inherit;
	cursor: pointer;
	border: 0;
	transition: background var(--t), color var(--t), transform var(--t);
	white-space: nowrap;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-hover); color: #fff; }
.btn--ghost {
	background: transparent;
	color: var(--ink);
	box-shadow: inset 0 0 0 1px var(--line);
}
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--sm { height: 34px; padding: 0 14px; font-size: 15px; }

.hdr .btn { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────
   КОМАНДНАЯ ПАНЕЛЬ — несущая форма темы
   ───────────────────────────────────────────────────────── */
.cmd {
	background: #14141a;
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: 0 18px 44px -28px rgba(20, 20, 26, .55);
	min-width: 0;
}
.cmd__bar {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 11px 14px;
	background: #1d1d26;
	border-bottom: 1px solid #2a2a35;
}
.cmd__dot {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: #3a3a47;
	flex-shrink: 0;
}
.cmd__dot:nth-child(1) { background: #e05561; }
.cmd__dot:nth-child(2) { background: #e0a355; }
.cmd__dot:nth-child(3) { background: #5ac37d; }
.cmd__name {
	margin-left: 6px;
	font-family: var(--mono);
	font-size: 12px;
	color: #6f7180;
	letter-spacing: .04em;
}
.cmd__body {
	padding: 16px 18px 18px;
	font-family: var(--mono);
	font-size: 14px;
	line-height: 1.75;
	color: #d6d8e2;
	overflow-x: auto;
}
.cmd__line { margin: 0 0 2px; white-space: pre-wrap; word-break: break-word; }
.cmd__line--in { color: #fff; }
.cmd__sign { color: var(--brand-soft); font-weight: 700; margin-right: 6px; }
.cmd__line b { color: #fff; font-weight: 600; }
.cmd__line em { color: #8f93a6; font-style: normal; }

/* каретка на первом экране */
.cmd__caret {
	display: inline-block;
	width: 9px; height: 1.05em;
	background: var(--brand-soft);
	vertical-align: -2px;
	animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* ─────────────────────────────────────────────────────────
   ПЕРВЫЙ ЭКРАН
   ───────────────────────────────────────────────────────── */
.hero { padding: clamp(40px, 7vw, 84px) 0 clamp(32px, 5vw, 60px); }
.hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.hero__lead {
	font-size: clamp(1.05rem, 1.6vw, 1.22rem);
	color: var(--ink-2);
	max-width: 700px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.hero__note {
	margin-top: 14px;
	font-size: 14px;
	color: var(--muted);
	font-family: var(--mono);
}

/* ─────────────────────────────────────────────────────────
   СЕКЦИИ. Разделитель — строка команды, а не полоса.
   ───────────────────────────────────────────────────────── */
.sec { padding: clamp(34px, 5vw, 62px) 0; }
.sec__head { margin-bottom: clamp(20px, 3vw, 32px); }

/* Заголовок секции сам набран как строка команды: знак приглашения —
   часть заголовка, а не отдельная подпись над ним. */
.sec__head h2 { display: flex; align-items: baseline; gap: .4em; }
.sec__head h2::before {
	content: "$";
	font-family: var(--mono);
	color: var(--brand);
	font-weight: 700;
	font-size: .62em;
	flex-shrink: 0;
}
.sec__lead { color: var(--ink-2); max-width: 62ch; margin-top: -.2em; }

/* ─────────────────────────────────────────────────────────
   СЕТКИ И КАРТОЧКИ
   ───────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 20px;
	min-width: 0;
	position: relative;
	transition: border-color var(--t), background var(--t);
}
/* ховер: слева отрастает каретка, карточка не двигается */
.card::before {
	content: "";
	position: absolute;
	left: 0; top: 20px; bottom: 20px;
	width: 2px;
	background: var(--brand);
	border-radius: 2px;
	transform: scaleY(0);
	transform-origin: top;
	transition: transform var(--t);
}
.card:hover { border-color: #c9cddb; }
.card:hover::before { transform: scaleY(1); }
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card__tag {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--brand);
	letter-spacing: .04em;
	display: block;
	margin-bottom: 6px;
}

/* числа — моноширинные, в квадратных скобках */
.num {
	font-family: var(--mono);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--ink);
	letter-spacing: -.02em;
	display: block;
}
.num::before { content: "["; color: var(--brand); margin-right: 2px; }
.num::after  { content: "]"; color: var(--brand); margin-left: 2px; }
.num + .num__label { color: var(--muted); font-size: 14px; }

/* ─────────────────────────────────────────────────────────
   ТАБЛИЦЫ
   ───────────────────────────────────────────────────────── */
.tbl-wrap {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	min-width: 0;
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
}
table.data { width: 100%; border-collapse: collapse; font-size: 15px; color: var(--ink); }
table.data th, table.data td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-weight: 600; background: var(--surface-2); white-space: nowrap; }
table.data tr:last-child td { border-bottom: 0; }
table.data code { font-family: var(--mono); font-size: 13px; }

/* ─────────────────────────────────────────────────────────
   АККОРДЕОН
   ───────────────────────────────────────────────────────── */
.acc { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.acc__item + .acc__item { border-top: 1px solid var(--line); }
.acc__btn {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	background: none;
	border: 0;
	font: inherit;
	font-weight: 600;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}
.acc__btn::before { content: "$"; font-family: var(--mono); color: var(--brand); font-weight: 700; flex-shrink: 0; }
.acc__btn::after {
	content: "";
	margin-left: auto;
	width: 9px; height: 9px;
	border-right: 2px solid var(--muted);
	border-bottom: 2px solid var(--muted);
	transform: rotate(45deg) translateY(-2px);
	transition: transform var(--t);
	flex-shrink: 0;
}
.acc__item.is-open .acc__btn::after { transform: rotate(-135deg) translateY(-2px); }
.acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t); }
.acc__item.is-open .acc__body { grid-template-rows: 1fr; }
.acc__inner { overflow: hidden; }
.acc__inner > div { padding: 0 18px 16px 40px; color: var(--ink-2); }

/* ─────────────────────────────────────────────────────────
   ЗВЁЗДЫ. fill: currentColor обязателен, иначе любая оценка
   выглядит пятёркой. Заливка тянется только от левого края.
   ───────────────────────────────────────────────────────── */
.stars { position: relative; display: inline-flex; line-height: 0; vertical-align: middle; }
.stars__bg, .stars__fg { display: flex; gap: 2px; }
.stars__bg { color: var(--line); }
.stars__fg { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; white-space: nowrap; color: var(--amber); }
.stars svg { width: var(--star, 18px); height: var(--star, 18px); flex-shrink: 0; fill: currentColor; }

.voice { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; min-width: 0; }
.voice__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.voice__who { font-weight: 600; }
.voice__role { color: var(--muted); font-size: 14px; }
.voice__text { margin: 0; color: var(--ink-2); }

.rate {
	display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
	padding: 18px 20px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
}
.rate__val { font-family: var(--mono); font-size: 2.2rem; font-weight: 700; line-height: 1; }

/* ─────────────────────────────────────────────────────────
   ПЕРЕЛИНКОВКА
   ───────────────────────────────────────────────────────── */
.next { margin-top: clamp(28px, 4vw, 44px); padding-top: 22px; border-top: 1px solid var(--line); }
.next__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.next__list a {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px;
	border-radius: var(--r-pill);
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 15px;
	transition: border-color var(--t), color var(--t);
}
.next__list a:hover { border-color: var(--brand); color: var(--brand); }
.next__sign { font-family: var(--mono); color: var(--brand); }

/* ─────────────────────────────────────────────────────────
   ХЛЕБНЫЕ КРОШКИ И СТРАНИЦА
   ───────────────────────────────────────────────────────── */
.crumbs { font-size: 14px; color: var(--muted); padding-top: 22px; font-family: var(--mono); }
.crumbs a { color: var(--muted); }

/* Мелкий текст, который лежит прямо на пятнах фона: после того как фон
   стал ярче, светло-серый на нём проседал по контрасту — берём грифель
   потемнее. Тот же текст внутри белых карточек остаётся --muted. */
.hero__note, .crumbs, .crumbs a { color: #4e5060; }
.crumbs a:hover { color: var(--brand); }
.crumbs__sep { margin: 0 7px; opacity: .6; }

.page-head { padding: 8px 0 clamp(20px, 3vw, 30px); }
.page-head .hero__lead { margin-top: 6px; }

.prose { max-width: var(--text-col); }
.prose h2 { margin-top: 1.7em; }
.prose h3 { margin-top: 1.4em; }
.prose > *:first-child { margin-top: 0; }

.note {
	border-left: 2px solid var(--brand);
	background: var(--surface);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	padding: 14px 18px;
	margin: 1.4em 0;
	color: var(--ink-2);
}

/* ─────────────────────────────────────────────────────────
   ГАЛЕРЕЯ ПРИМЕРОВ РАБОТ
   Прокрутки нет ни на какой ширине. Прежде ниже 781px тут была
   лента с overflow-x: auto и scroll-snap — она и уезжала вбок;
   теперь её нет вовсе, и листают галерею только переключатели
   под ней (плюс стрелки клавиатуры).
   Веер включается классом .is-ready (его ставит скрипт) и
   работает на любой ширине. Карточки веера абсолютные и лежат
   в .gal__track с overflow-x: clip: он обрезает, но прокрутки
   не создаёт, так что повёрнутая боковая карточка не может
   ни выехать за макет, ни утащить страницу вбок.
   Ниже 720px веер в экран не влезает — там остаётся одна
   карточка целиком (см. медиазапрос в конце блока).
   Базовое состояние без JS — flex-wrap: перенос по строкам,
   тоже без прокрутки.
   ───────────────────────────────────────────────────────── */
.gal { --gal-card: clamp(190px, 21vw, 290px); }

.gal__stage { position: relative; }

.gal__meta {
	margin: 0 0 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
	min-height: 3.2em;
}
.gal__title {
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--ink);
}
.gal__style {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--brand);
}

.gal__track {
	list-style: none;
	margin: 0;
	padding: 4px 0 12px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.gal__item {
	flex: 0 0 var(--gal-card);
	max-width: 100%;
	min-width: 0;
	margin: 0;
}

.gal__card {
	display: block;
	width: 100%;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: var(--surface);
	overflow: hidden;
	box-shadow: 0 12px 30px -20px rgba(10, 40, 240, .5);
	transition: box-shadow var(--t);
}
/* Рамка держит 2:3 — ровно тот формат, в котором пришли работы
   (832×1248). При заявленных в промтах 3:4 у каждой картинки срезалось
   бы по ~8 % сверху и снизу: у портрета уходила макушка, у граната —
   низ композиции. Важно, что формат у всех пяти одинаковый: разнобой
   развалил бы веер. */
.gal__card img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
}

/* Веер: центральная работа прямо и крупнее, боковые уведены
   в перспективу. Геометрию держит CSS, скрипт только
   проставляет data-pos.
   Раньше веер включался с 781px, а ниже оставалась лента со
   scroll-snap и overflow-x: auto — она и уезжала вбок. Теперь веер
   работает на любой ширине, и ленте просто негде появиться:
   карточки абсолютные, а .gal__track обрезан overflow-x: clip,
   который прокрутки не создаёт вовсе. */
.gal.is-ready .gal__track {
	display: block;
	position: relative;
	/* Высота считается от того же формата, что и .gal__card img.
	   Если тут останется 4/3, а карточка станет 2:3 — она вылезет
	   из стойки и накроет кнопки перелистывания. Менять обе строки. */
	height: calc(var(--gal-card) * 3 / 2 + 2px);
	padding: 0;
	overflow-x: clip;
	overflow-y: visible;
	perspective: 1500px;
}
.gal.is-ready .gal__item {
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--gal-card);
	margin-left: calc(var(--gal-card) / -2);
	transition: transform var(--t-slow), opacity var(--t-slow);
	will-change: transform;
}
.gal.is-ready .gal__item[data-pos="0"]  { transform: rotateY(0deg) scale(1);                        z-index: 6; opacity: 1; }
.gal.is-ready .gal__item[data-pos="-1"] { transform: translateX(-74%) rotateY(24deg) scale(.84);    z-index: 5; opacity: 1; }
.gal.is-ready .gal__item[data-pos="1"]  { transform: translateX(74%) rotateY(-24deg) scale(.84);    z-index: 5; opacity: 1; }
.gal.is-ready .gal__item[data-pos="-2"] { transform: translateX(-132%) rotateY(31deg) scale(.7);    z-index: 4; opacity: .82; }
.gal.is-ready .gal__item[data-pos="2"]  { transform: translateX(132%) rotateY(-31deg) scale(.7);    z-index: 4; opacity: .82; }
.gal.is-ready .gal__item[data-pos="far"] { transform: scale(.6); z-index: 1; opacity: 0; pointer-events: none; }

.gal.is-ready .gal__item[data-pos="0"] .gal__card { box-shadow: 0 28px 60px -32px rgba(10, 40, 240, .6); }

/* Просили меньше движения — переключение достаётся мгновенным. */
@media (prefers-reduced-motion: reduce) {
	.gal.is-ready .gal__item { transition: none; }
}

/* Узкие экраны: веер в телефон не помещается — при центральной
   карточке 190px крайние уходят на ±317px от центра при половине
   ленты в 179px. Раньше это разъезжание разбирала горизонтальная
   прокрутка. Теперь боковые карточки просто убираются, остаётся одна
   работа целиком во всю ширину, а листают её переключатели внизу.
   720px — та ширина, ниже которой веер перестаёт помещаться целиком. */
@media (max-width: 719.98px) {
	.gal { --gal-card: min(320px, calc(100vw - 48px)); }

	.gal.is-ready .gal__item:not([data-pos="0"]) {
		transform: scale(.6);
		opacity: 0;
		pointer-events: none;
		z-index: 1;
	}
}

.gal__nav {
	margin-top: clamp(16px, 2.6vw, 26px);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
}
.gal__btn {
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink-2);
	cursor: pointer;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.gal__btn svg { width: 20px; height: 20px; }
.gal__btn:hover { border-color: var(--brand-soft); color: var(--brand); }
.gal__btn--next {
	width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t);
}
.gal__btn--next:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }

.gal__count {
	font-family: var(--mono);
	font-size: 13px;
	letter-spacing: .06em;
	color: var(--muted);
	min-width: 6ch;
	text-align: center;
}
.gal__note {
	margin: 14px 0 0;
	text-align: center;
	font-size: 14px;
	color: var(--muted);
}

/* ─────────────────────────────────────────────────────────
   ПОДВАЛ — вывод справки
   ───────────────────────────────────────────────────────── */
.ftr { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--line); background: var(--surface); }
.ftr__in { padding: clamp(28px, 4vw, 44px) 0; }
.ftr__cmd { font-family: var(--mono); font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.ftr__cmd span { color: var(--brand); font-weight: 700; }
.ftr__list { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ftr__list a { color: var(--ink-2); font-size: 15px; }
.ftr__list a:hover { color: var(--brand); }
.ftr__legal { color: var(--muted); font-size: 14px; max-width: 70ch; }
.ftr__legal p { margin-bottom: .6em; }

/* ─────────────────────────────────────────────────────────
   МОБИЛЬНЫЙ CTA
   ───────────────────────────────────────────────────────── */
.mcta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 95;
	display: none;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: rgba(251, 251, 253, .94);
	backdrop-filter: blur(10px);
	border-top: 1px solid var(--line);
}
.mcta .btn { width: 100%; }

/* ─────────────────────────────────────────────────────────
   ПОЯВЛЕНИЕ БЛОКОВ — тайминги офсайта
   ───────────────────────────────────────────────────────── */
.rise { opacity: 0; transform: translateY(18px); transition: opacity var(--t-slow), transform var(--t-slow); }
.rise.is-in { opacity: 1; transform: none; }
.rise:nth-child(2) { transition-delay: .08s; }
.rise:nth-child(3) { transition-delay: .16s; }
.rise:nth-child(4) { transition-delay: .24s; }

/* ─────────────────────────────────────────────────────────
   БРЕЙКПОИНТЫ. Своя лестница: 1180 / 1024 / 940 / 700 / 560 / 400
   ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
	.grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
	.hero__grid { grid-template-columns: minmax(0, 1fr); }
	.grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 940px) {
	.burger { display: block; }
	.nav {
		display: none;
		position: absolute;
		left: 0; right: 0; top: 100%;
		background: var(--surface);
		border-bottom: 1px solid var(--line);
		padding: 10px var(--pad) 16px;
		max-height: calc(100svh - 64px);
		overflow-y: auto;
		overscroll-behavior: contain;
	}
	.is-open .nav { display: block; }
	.nav__list { flex-direction: column; gap: 0; }
	.nav__list a { padding: 11px 8px; border-radius: var(--r-sm); }
	.nav__item--extra { display: block; }
	.hdr__in { position: relative; }
	.nav { margin-left: 0; }
	.hdr__side { margin-left: auto; }
}
@media (max-width: 700px) {
	body { font-size: 16px; }
	.grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
	.mcta { display: block; }
	body { padding-bottom: 68px; }
}
@media (max-width: 560px) {
	.cmd__body { font-size: 13px; padding: 14px; }
	.card { padding: 16px; }
}
@media (max-width: 400px) {
	.brand__name { display: none; }   /* прячем только слово, знак остаётся */
	.hdr__in { gap: 10px; }
	.hdr__side { gap: 8px; }
	.hdr .btn--sm { padding: 0 12px; font-size: 14px; }
}

/* ─────────────────────────────────────────────────────────
   ДОСТУПНОСТЬ
   ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.rise { opacity: 1; transform: none; }
	.morph { display: none; }
	.cmd__caret { animation: none; }
}