/*
Theme Name: Recraft AI Ru
Description: Тема сайта recraftai.info. Язык дизайна — «монтажный стол вектора»: узкий дисплейный шрифт, блоки радиусом 20px по офсайту, оранжевый #ff5b15 как единственный горячий цвет, лента отзывов и всплытие текста.
Version: 1.2.9
Text Domain: rcf-theme
*/

/* ============================================================
   1. ТОКЕНЫ
   Палитра снята КОДОМ из CSS-бандла офсайта
   (recraft-ai-…webflow.shared.min.css), а не пипеткой: там она
   лежит готовыми переменными. Ключевое — --orange-500 #ff5b15,
   именно его владелец просил как акцент.
   Ширины и радиусы оттуда же: контейнер 1440, текстовая колонка
   728, радиус блока 20px (самое частое значение в бандле — 131
   вхождение, то есть это несущая форма, а не случайность).
   ============================================================ */
:root {
	--ink:          #000000;
	--ink-2:        #101010;
	--paper:        #ffffff;
	--surface:      #f6f6f6;
	--surface-2:    #f0f0f0;
	--line:         #d9d9d9;
	--line-2:       #bfbfbf;
	--muted:        #757575;

	--accent:       #ff5b15;   /* --orange-500 офсайта */
	--accent-2:     #ff7316;   /* --orange офсайта */
	--violet:       #6e43fe;
	--violet-soft:  #cfc0fa;
	--green-soft:   #effbc3;
	--cyan-soft:    #caecec;
	--cyan-deep:    #3c8794;

	--shell:   1440px;
	--text-col: 728px;
	--pad:     clamp(20px, 4vw, 60px);

	--r:      20px;   /* блоки — как на офсайте */
	--r-sm:   10px;
	--r-pill: 999px;

	/* Шрифты. Собственные начертания офсайта (AbcGravity, Bourbon)
	   проприетарные — взять нельзя. Кириллица у обоих проверена
	   запросом к Google Fonts браузерным UA 18.08.2026.
	   Соседний сайт того же бренда (recraftai.icu) занимает
	   Alumni Sans / Source Sans 3 / Tektur — пересекаться нельзя. */
	--f-display: 'Yanone Kaffeesatz', 'Arial Narrow', sans-serif;
	--f-text:    'Vollkorn', Georgia, 'Times New Roman', serif;

	--ease: cubic-bezier(.16, 1, .3, 1);
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink-2);
	font-family: var(--f-text);
	font-size: 17px;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

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

a { color: var(--ink-2); text-underline-offset: 3px; }
a:hover { color: var(--accent); }

/* Дисплейный шрифт узкий — крупный кегль и плотный трекинг держит
   его сам, поэтому заголовки набираются в размер, а не «жирнее». */
h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.01em;
	margin: 0 0 .4em;
	text-transform: none;
	text-wrap: balance;
}
h1 { font-size: clamp(3rem, 1.6rem + 6vw, 7rem); }
h2 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.8rem); }
h3 { font-size: clamp(1.4rem, 1.2rem + .9vw, 2rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin-bottom: .5em; }
li::marker { color: var(--accent); }
strong { font-weight: 700; }

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

.lead { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--muted); }

/* Лид и приглушённый текст внутри тёмной и цветной плиты: без этого
   они наследуют чернильный цвет и пропадают на своём же фоне. */
.card--dark .lead, .card--accent .lead { color: #ececec; }
.card--dark .muted { color: #a9a9a9; }
.card--accent .muted { color: #ffe2d4; }

/* Размер инлайновой иконки. Без него любая иконка вне кнопки и звёзд
   разворачивается в дефолтные 300×150 замещаемого элемента: у SVG без
   width/height это поведение по спецификации, а не сбой. */
.ic { width: 22px; height: 22px; flex: none; vertical-align: -4px; }

.section { padding-block: clamp(56px, 7vw, 120px); }
.section--tight { padding-top: clamp(40px, 4vw, 72px); }

/* Отбивка внутри секции. Без неё приходится плодить вторую секцию
   ради воздуха между блоками, а это удваивает вертикальный зазор. */
.stack > * + * { margin-top: clamp(16px, 1.8vw, 24px); }
.mt   { margin-top: clamp(20px, 2.4vw, 32px); }
.mt-l { margin-top: clamp(30px, 3.6vw, 52px); }

/* ============================================================
   3. ШАПКА
   Повторяет офсайт: тонкая полоса, логотип слева, ссылки по
   центру, кнопка-пилюля справа. Реф-кнопка НЕ прячется в бургер
   ни на какой ширине — правило 3 playbook.
   ============================================================ */
.nav {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
}
.nav__in {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 72px;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.nav__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--f-display);
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.nav__logo img { width: 30px; height: 30px; flex: none; }
/* Меню растягивается на всё свободное место и центрирует ссылки внутри
   себя. Центрировать его через margin-inline:auto нельзя: тогда в строке
   оказывается три auto-отступа (два у меню, один у правой группы), а
   flexbox делит свободное место между всеми auto поровну — правая группа
   не доезжает до края. Единственный auto в строке остался у .nav__side. */
.nav__links { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.nav__link {
	padding: 8px 13px;
	border-radius: var(--r-pill);
	font-family: var(--f-display);
	font-size: 1.08rem;
	text-decoration: none;
	white-space: nowrap;
	transition: background .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover { background: var(--surface-2); color: var(--ink-2); }
.nav__link.is-current { background: var(--ink); color: var(--paper); }

/* Правая группа шапки: реф-кнопка стоит вплотную к бургеру. Прижимаем
   группу вправо явно одним auto-отступом — он работает одинаково и когда
   меню показано, и когда оно погашено на узких экранах, где соседство в
   разметке сохраняется, а элемент из потока уже выпал. */
.nav__side { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }

.burger {
	display: none;
	padding: 8px;
	background: none;
	border: 0;
	color: var(--ink);
	cursor: pointer;
}
.burger svg { width: 24px; height: 24px; }

.drawer { display: none; border-top: 1px solid var(--line); background: var(--paper); padding: 6px var(--pad) 22px; }
.drawer.is-open { display: block; }
/* Шторку открыли на телефоне, потом растянули окно — бургер скрылся,
   а она осталась висеть. Гасим её шириной, а не скриптом: правило
   сработает и в тот кадр, когда обработчик resize ещё не отработал. */
@media (min-width: 992px) {
	.drawer, .drawer.is-open { display: none; }
}
.drawer a { display: block; padding: 13px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-family: var(--f-display); font-size: 1.2rem; }
/* Кнопка в шторке — не строчная ссылка меню: display:block от
   `.drawer a` иначе убивает gap и центрирование, и значок липнет
   к тексту. Раскладку возвращаем целиком. */
.drawer .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	margin-top: 16px;
	border-bottom: 0;
}

/* ============================================================
   4. КНОПКИ — пилюли офсайта
   ============================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	font-family: var(--f-display);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
/* Белый на оранжевом #ff5b15 — 3,11:1 по фактическим пикселям. Кегль
   кнопки 18,4px при весе 600 крупным по WCAG не считается (нужно 24px
   либо 18,7px при 700), то есть норма для неё 4,5:1, и белый её не
   берёт. Чернильный на том же оранжевом даёт 6,76:1, пилюля при этом
   остаётся оранжевой — новый цвет не понадобился. */
.btn--primary { background: var(--accent); color: var(--ink); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--on-dark { background: var(--paper); color: var(--ink); }
.btn--on-dark:hover { background: var(--accent); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================================================
   5. БЛОКИ
   Несущая форма — плита радиусом 20px без тени, как на офсайте.
   Тёмные и цветные плиты чередуются, чтобы страница не была
   лентой одинаковых карточек.
   ============================================================ */
.card {
	border-radius: var(--r);
	background: var(--surface);
	padding: clamp(22px, 2.4vw, 34px);
	min-width: 0;
}
.card--dark { background: var(--ink-2); color: var(--paper); }
.card--dark .muted { color: #a8a8a8; }
.card--accent { background: var(--accent); color: var(--paper); }
.card--green { background: var(--green-soft); }
.card--violet { background: var(--violet-soft); }
.card--cyan { background: var(--cyan-soft); }
.card--outline { background: transparent; border: 1px solid var(--line); }

/* Ссылки и кнопки внутри цветных плит. Базовое правило красит ссылку
   чернильным, а ховер — оранжевым: на тёмной плите она сливается с
   фоном, на оранжевой пропадает при наведении, потому что ховер
   совпадает с заливкой. Без этих правил ссылки нельзя ставить
   в тёмные и акцентные блоки вообще. */
.card--dark a   { color: var(--paper); text-decoration-color: rgba(255,255,255,.45); }
.card--dark a:hover { color: var(--accent-2); }
.card--accent a { color: var(--paper); text-decoration-color: rgba(255,255,255,.6); }
.card--accent a:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* Прозрачная кнопка на тёмном: у базовой .btn--ghost текст чернильный
   и на тёмной плите не читается. */
.card--dark .btn--ghost {
	color: var(--paper);
	border-color: rgba(255, 255, 255, .38);
}
.card--dark .btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Белая кнопка внутри тёмной и оранжевой плиты. Правила `.card--dark a`
   и `.card--accent a` бьют `.btn--on-dark` по специфичности — класс плюс
   тип против одного класса, — и кнопка получала белый текст на своей же
   белой заливке: 1,00:1, надпись пропадала целиком. На наведении то же
   самое: `.card--dark a:hover` (два класса и тип) перебивал
   `.btn--on-dark:hover` (два класса) и красил текст в --accent-2 #ff7316
   поверх --accent #ff5b15 — 1,14:1. Возвращаем кнопке её собственные
   цвета правилом, которое выигрывает специфичностью. */
.card--dark .btn--on-dark,
.card--accent .btn--on-dark { background: var(--paper); color: var(--ink); }
.card--dark .btn--on-dark:hover,
.card--accent .btn--on-dark:hover { background: var(--accent); color: var(--ink); }

.grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 991px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 560px) and (max-width: 991px) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Асимметрия: широкая плита + узкая, как на текстовых страницах офсайта */
@media (min-width: 992px) {
	.grid--wide-left  { grid-template-columns: 1.6fr 1fr; }
	.grid--wide-right { grid-template-columns: 1fr 1.6fr; }
}

/* ============================================================
   6. КАРТИНКИ: увеличение при наведении
   Растёт САМА картинка внутри кадра, кадр стоит на месте —
   иначе поехала бы сетка и появился бы горизонтальный скролл.
   ============================================================ */
.zoom {
	overflow: hidden;
	border-radius: var(--r);
	background: var(--surface-2);
}
.zoom img,
.zoom video {
	width: 100%;
	transition: transform .55s var(--ease);
	will-change: transform;
}
.zoom:hover img,
.zoom:hover video { transform: scale(1.06); }

/* ============================================================
   7. ВСПЛЫТИЕ ТЕКСТА И БЛОКОВ
   Класс вешается в шаблоне, класс is-in добавляет скрипт по
   IntersectionObserver. Без скрипта (или при prefers-reduced-motion)
   контент виден сразу — анимация не должна прятать текст.
   ============================================================ */
.rise {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.rise.is-in { opacity: 1; transform: none; }
.rise-d1 { transition-delay: .08s; }
.rise-d2 { transition-delay: .16s; }
.rise-d3 { transition-delay: .24s; }
.rise-d4 { transition-delay: .32s; }

/* Заголовок первого экрана выезжает построчно из-под маски */
.reveal { display: block; overflow: hidden; }
.reveal > span {
	display: block;
	transform: translateY(105%);
	transition: transform .85s var(--ease);
}
.reveal.is-in > span { transform: none; }
.reveal:nth-of-type(2) > span { transition-delay: .1s; }
.reveal:nth-of-type(3) > span { transition-delay: .2s; }

/* ============================================================
   8. ЛЕНТА ОТЗЫВОВ
   Приём с главной офсайта: строка карточек едет справа налево и
   ОСТАНАВЛИВАЕТСЯ ПРИ НАВЕДЕНИИ. Лента печатается дважды подряд,
   сдвиг на -50% — тогда стык незаметен и петля бесшовная.
   Ширину карточки фиксируем: иначе строка «дышит» и рывками
   меняет период анимации.
   ============================================================ */
.marquee {
	position: relative;
	overflow: hidden;
	/* поля растворяются к краям, чтобы карточки не обрубались */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track {
	display: flex;
	width: max-content;
	gap: 18px;
	animation: marquee 46s linear infinite;
}
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.review {
	flex: none;
	width: 360px;
	border-radius: var(--r);
	background: var(--surface);
	padding: 24px;
}
.review__top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review__ava {
	width: 42px; height: 42px; flex: none;
	border-radius: 50%;
	display: grid; place-items: center;
	background: var(--accent);
	color: var(--paper);
	font-family: var(--f-display);
	font-size: 1.25rem;
}
.review__name { font-family: var(--f-display); font-size: 1.2rem; line-height: 1.1; }
.review__stars { display: flex; gap: 2px; }
.review__stars svg { width: 15px; height: 15px; fill: var(--accent); }
.review p { font-size: .97rem; margin: 0; }

/* ============================================================
   9. ПЕРВЫЙ ЭКРАН
   Видео во всю ширину, поверх — заголовок и кнопки. Затемнение
   обязательно: кадры генеративного видео непредсказуемы по
   яркости, без подложки белый текст местами пропадает.
   ============================================================ */
.hero { position: relative; overflow: hidden; background: var(--ink); color: var(--paper); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media picture { display: block; width: 100%; height: 100%; }
.hero__media img,
.hero__media video { width: 100%; height: 100%; object-fit: cover; }

/* Плёнка поверх кадра осталась только под видео: яркость кадров
   генеративной петли непредсказуема, и без подложки белый текст на
   них местами пропадает. Под фотографией её нет — владелец просил
   убрать вуаль, снимок отдаётся как снят. Читаемость держит плашка
   под самими буквами, а не плёнка на всю картинку. */
.hero__media--video::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 45%, rgba(0,0,0,.78) 100%);
}
.hero__in { position: relative; z-index: 1; padding-block: clamp(90px, 13vw, 190px); }

/* Плашка стоит ровно под текстом и кнопками и больше ничего не
   закрывает: фигура на камне, кот, дерево и стая остаются в полном
   цвете. Радиус — те же 20px, что у карточек темы, чтобы читалась
   как блок вёрстки, а не как пятно на фотографии. */
.hero__plate {
	max-width: 760px;
	padding: clamp(22px, 3vw, 40px);
	border-radius: var(--r);
	background: rgba(0, 0, 0, .62);
}
.hero__plate > :first-child { margin-top: 0; }
.hero__plate > :last-child  { margin-bottom: 0; }
.hero h1 { color: var(--paper); max-width: 15ch; }
.hero .lead { color: #e8e8e8; margin-bottom: 30px; }

/* ── Точки-подсказки поверх иллюстрации ──────────────────────
   Приём из блока «exceptional prompt understanding» на офсайте:
   маркер на детали, при наведении — кусок промта, который эту
   деталь породил. Подписи ставятся КОДОМ, а не рисуются внутри
   картинки: генераторы кириллицу в изображении портят, а так
   текст ещё и доступен скринридеру. Каждая точка — button. */
.scene { position: relative; }
.hint {
	position: absolute;
	width: 22px; height: 22px;
	padding: 0;
	transform: translate(-50%, -50%);
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	z-index: 2;
}
.hint::before {
	content: "";
	position: absolute; inset: 4px;
	border-radius: 50%;
	background: var(--accent);
	/* Кольцо вокруг кружка — двойное, и это не украшение. Оранжевый
	   сам по себе даёт с фотографией от 1,17:1: на траве и на небе
	   точка пропадает. Одного тёмного кольца тоже мало — на пальто
	   и на дождевике фон сам тёмный, замер давал 2,7:1.
	   Белое кольцо отделяет от всего, что темнее середины, тёмное —
	   от всего, что светлее. Вдвоём они закрывают весь диапазон, и
	   3:1 набирается на любом участке кадра, включая засветку. */
	box-shadow:
		0 0 0 2px #ffffff,
		0 0 0 4px rgba(0, 0, 0, .75),
		0 0 0 7px rgba(255, 91, 21, .28),
		0 2px 10px rgba(0, 0, 0, .5);
}
.hint::after {
	content: "";
	position: absolute; inset: 0;
	border-radius: 50%;
	border: 1px solid var(--accent);
	animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping {
	0%   { transform: scale(.6); opacity: .9; }
	80%, 100% { transform: scale(1.9); opacity: 0; }
}
.hint__text {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 12px);
	transform: translateX(-50%) translateY(6px);
	width: max-content;
	max-width: 260px;
	padding: 10px 14px;
	border-radius: var(--r-sm);
	background: var(--paper);
	color: var(--ink-2);
	font-family: var(--f-text);
	font-size: .9rem;
	line-height: 1.4;
	text-align: left;
	opacity: 0;
	pointer-events: none;
	transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.hint:hover .hint__text,
.hint:focus-visible .hint__text,
.hint.is-open .hint__text { opacity: 1; transform: translateX(-50%); }

/* Точки у самых краёв кадра: плашка, центрированная по точке, уезжает
   за границу картинки и обрезается. Прижимаем её к своему краю.
   Ширину заодно ограничиваем вьюпортом — на 320px 260px не помещаются. */
/* Ширина плашки. Верхняя граница считается от худшей точки: у
   центрированной подсказки на 33 % кадра половина ширины должна
   уместиться слева от точки, иначе плашка уезжает за край экрана.
   На 320px это даёт 56vw, на широком экране упирается в 300px —
   английская строка переносится иначе русской и требует запаса. */
.hint__text { max-width: min(300px, 56vw); }
.hint--start .hint__text { left: 0; transform: translateX(0) translateY(6px); }
.hint--end   .hint__text { left: auto; right: 0; transform: translateX(0) translateY(6px); }
.hint--start:hover .hint__text, .hint--start:focus-visible .hint__text, .hint--start.is-open .hint__text,
.hint--end:hover .hint__text,   .hint--end:focus-visible .hint__text,   .hint--end.is-open .hint__text {
	transform: translateX(0);
}
/* Точка у верхней кромки кадра: плашка над ней уезжает на текст
   выше и накрывает абзац. Разворачиваем её под точку. */
.hint--low .hint__text { bottom: auto; top: calc(100% + 12px); }

.hint:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }

/* Внутри .scene увеличение по ховеру выключено. Картинка уезжает
   под неподвижными точками, и маркер перестаёт показывать на свой
   объект — ровно то, ради чего блок и сделан. */
.scene .zoom:hover img { transform: none; }

/* Блок «Модель дочитывает промт до конца»: картинка прилегает к
   краям кадра вплотную.
   Полоска подложки под снимком — не паддинг, а строчный просвет:
   <img> внутри <picture> остаётся строчным элементом и тянет за
   собой место под базовую линию. Переводим его в блок — просвет
   исчезает. Скруглением и фоном кадр тоже больше не отступает:
   и то и другое было видно как рамка вокруг снимка. */
.scene .zoom {
	border-radius: 0;
	background: none;
	padding: 0;
	line-height: 0;
}
.scene .zoom picture { display: block; }
.scene .zoom img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

/* Звёзды процентной заливкой: два одинаковых ряда друг над другом,
   верхний обрезается по ширине оценки. Так рисуется настоящая дробь
   (4,6 из 5), а не округление до целых звёзд. */
.stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
.stars__bg svg { fill: var(--line-2); }
.stars__fg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	white-space: nowrap;
}
.stars__fg svg { fill: var(--accent); }

/* Крупное число вне тарифной карточки — оценка, счёт, любой акцентный
   показатель. Отдельный класс, чтобы не занимать .plan__price. */
.figure {
	font-family: var(--f-display);
	font-size: clamp(2.4rem, 1.8rem + 2.4vw, 3.6rem);
	line-height: 1;
}

/* ============================================================
   10. ТАБЛИЦЫ И ЦЕНЫ
   ============================================================ */
.tablewrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 560px; background: var(--paper); }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-family: var(--f-display); font-size: 1.15rem; font-weight: 600; background: var(--surface); }
tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Тариф: кнопка у КАЖДОГО тарифа, не одна общая под таблицей —
   требование владельца, проверенное на прошлых сайтах сетки. */
.plan { display: flex; flex-direction: column; }
.plan__price { font-family: var(--f-display); font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); line-height: 1; margin-bottom: 4px; }
.plan__body { flex: 1; }
.plan .btn { margin-top: 20px; align-self: flex-start; }

/* ============================================================
   11. FAQ
   ============================================================ */
.qa { border-bottom: 1px solid var(--line); }
.qa__q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	background: none;
	border: 0;
	font-family: var(--f-display);
	font-size: clamp(1.2rem, 1.1rem + .5vw, 1.55rem);
	text-align: left;
	color: var(--ink-2);
	cursor: pointer;
}
.qa__q:hover { color: var(--accent); }
.qa__chev { width: 16px; height: 16px; flex: none; position: relative; }
.qa__chev::before, .qa__chev::after {
	content: ""; position: absolute; background: currentColor; border-radius: 2px;
	transition: transform .25s var(--ease);
}
.qa__chev::before { inset: 7px 0 7px 0; height: 2px; }
.qa__chev::after  { inset: 0 7px 0 7px; width: 2px; }
.qa.is-open .qa__chev::after { transform: scaleY(0); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding-bottom: 20px; }

/* ============================================================
   12. ГАЛЕРЕЯ НА ГЛАВНОЙ
   Сплошная лента высоких кадров во всю ширину полотна: плитки
   встык, без скруглений, разделённые светлым волоском.
   Волосок — это gap на бумажном фоне, а не рамка: рамка съела
   бы пиксель внутри самого кадра и сбила бы ряд.
   Ширину ленте не задаём: секция стоит вне .shell и так занимает
   всю страницу. Трюк с width:100vw здесь дал бы горизонтальную
   прокрутку ровно на ширину полосы прокрутки.
   ============================================================ */
.gal__band { background: var(--paper); }
.gal__strip {
	display: flex;
	gap: 2px;
	background: var(--paper);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Системную полосу прокрутки прячем. Прокрутка при этом живая:
	   overflow-x остаётся auto, лента тянется пальцем, колесом и
	   клавишами. Убираем именно полоску — под лентой стоят свои
	   стрелки и точки, и серая планка рядом с ними была бы второй
	   ручкой от той же двери, да ещё и отъедала бы 8–10px высоты
	   у самого нижнего кадра.
	   Три записи, а не одна: scrollbar-width — Firefox и свежий
	   Chrome, -ms-overflow-style — старая Edge, ::-webkit-scrollbar —
	   Safari и Chrome до 121-го. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.gal__strip::-webkit-scrollbar { display: none; }
/* Ниже 992px пять кадров в строку превращаются в марки: лента
   прокручивается с прилипанием, в поле зрения два кадра и край
   третьего — он и подсказывает, что полосу можно тянуть. */
.gal__cell {
	margin: 0;
	min-width: 0;
	flex: 0 0 clamp(180px, 46vw, 260px);
	scroll-snap-align: center;
}
.gal__frame {
	aspect-ratio: 2 / 3;
	/* На широком мониторе лента во всю ширину дала бы кадр под 900px
	   высотой — выше экрана. Высоту ограничиваем, object-fit: cover
	   дорезает кадр, ряд остаётся сплошным. */
	max-height: min(74vh, 620px);
	overflow: hidden;
	background: var(--surface-2);
}
.gal__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gal__note { margin-top: 18px; color: var(--muted); font-size: .92rem; }

/* ── Переключатели прокрутки ленты ───────────────────────────
   Появляются только там, где лента реально не влезает: атрибут
   hidden снимает скрипт после замера scrollWidth, а не медиа-
   запрос. Ширина кадра задана через clamp с vw, и точка, на
   которой прокрутка исчезает, зависит не от одного порога 992px,
   а от того, сколько кадров сегодня в наборе.
   Правило на [hidden] обязательно: display: flex ниже перебил бы
   атрибут, и стрелки висели бы на широком экране. */
.gal__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 20px;
}
.gal__nav[hidden] { display: none; }

.gal__arrow {
	width: 46px;
	height: 46px;
	flex: none;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: var(--paper);
	color: var(--ink);
	cursor: pointer;
	transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.gal__arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
/* Край ленты: кнопка остаётся на месте, но гаснет — исчезающая
   стрелка дёргала бы весь ряд переключателей на каждом шаге. */
.gal__arrow[disabled] { opacity: .3; cursor: default; }
.gal__arrow[disabled]:hover { background: var(--paper); border-color: var(--line-2); color: var(--ink); }
/* Одна иконка стрелки на обе кнопки: левая — та же, развёрнутая. */
.gal__arrow-ic--back { transform: rotate(180deg); }

.gal__dots { display: flex; align-items: center; gap: 4px; }
/* Кнопка крупнее самой точки: 26px — минимальная мишень для пальца,
   рисованная точка внутри остаётся мелкой. */
.gal__dot {
	position: relative;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.gal__dot::before {
	content: "";
	position: absolute;
	inset: 9px;
	border-radius: 50%;
	background: var(--line-2);
	transition: background .3s var(--ease), transform .3s var(--ease);
}
.gal__dot.is-on::before { background: var(--accent); transform: scale(1.5); }

.gal__arrow:focus-visible,
.gal__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (min-width: 992px) {
	/* Пять кадров ровно на ширину полотна: базис 20% плюс сжатие
	   съедает волоски между ними, прокрутка не появляется. */
	.gal__cell { flex: 1 1 20%; }
	/* Лёгкий изгиб ленты: горизонтальный радиус в половину ширины,
	   вертикальный — 22px. Углы уходят вниз, середина остаётся на
	   месте, полоса читается слегка выгнутой, как на референсе.
	   На узких экранах изгиб снят: там лента прокручивается, и
	   срезанные углы жевали бы крайние кадры на каждом кадре
	   прокрутки. */
	.gal__band { overflow: hidden; border-radius: 50% / 22px; }
}

/* ============================================================
   13. ПОДВАЛ
   ============================================================ */
.foot { background: var(--ink); color: var(--paper); padding-block: clamp(48px, 6vw, 84px); margin-top: clamp(56px, 7vw, 110px); }
.foot a { color: #cfcfcf; text-decoration: none; }
.foot a:hover { color: var(--accent); }
.foot__top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: start; }
.foot__links { display: flex; flex-wrap: wrap; gap: 10px 26px; padding: 22px 0; margin-top: 26px; border-top: 1px solid #262626; border-bottom: 1px solid #262626; }
.foot__note { padding-top: 20px; font-size: .88rem; color: #8b8b8b; line-height: 1.6; }

/* ============================================================
   14. КРОШКИ, СЛУЖЕБНОЕ
   ============================================================ */
.crumbs { font-size: .88rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.pagehead { padding-block: clamp(36px, 4vw, 64px) clamp(20px, 2vw, 34px); }

.note { border-left: 3px solid var(--accent); padding: 6px 0 6px 18px; margin: 22px 0; }

.skip {
	position: absolute; left: -9999px;
	background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: var(--r-sm);
}
.skip:focus { left: var(--pad); top: 10px; z-index: 60; }

/* ============================================================
   15. АДАПТИВ — лестница офсайта: 991 / 767 / 479
   ============================================================ */
@media (max-width: 991px) {
	.nav__links { display: none; }
	.burger { display: inline-flex; }
	.nav__in { gap: 12px; }
	.review { width: 300px; }
}
@media (max-width: 767px) {
	body { font-size: 16.5px; }
	.hero__in { padding-block: clamp(70px, 16vw, 120px); }

	/* 16:9 в вертикальный экран влезает узкой полосой, и по центру
	   кадра остаётся одна трава. Окно сдвигается влево — в него
	   попадают женщина с картой и закатное солнце за ней. */
	.hero__media img { object-position: 30% 45%; }

	/* На узком экране плашка занимает всю колонку, и воздуха вокруг
	   букв меньше — поджимаем внутренние поля, чтобы блок не съел
	   первый экран целиком. */
	.hero__plate { padding: 20px; }
	.hint { width: 26px; height: 26px; }
	.hint__text { max-width: min(200px, 56vw); font-size: .85rem; }
	.marquee__track { animation-duration: 34s; }
}
@media (max-width: 359px) {
	/* Строка шапки на 320px собирается впритык: знак + слово + кнопка +
	   бургер. И логотип, и кнопка стоят с nowrap, поэтому при промахе
	   будет обрез, а не перенос — снимаем слово, знак остаётся. */
	.nav__logo span { display: none; }
}
@media (max-width: 479px) {
	.review { width: 258px; }
	.btn { padding: 12px 20px; font-size: 1.08rem; }
	.btn-row .btn { flex: 1 1 auto; }
}

/* Уважаем системную настройку: движение выключаем, но контент
   обязан остаться видимым — иначе страница окажется пустой. */
@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; }
	.reveal > span { transform: none; }
	/* Прилипание — это тоже движение: ленту оставляем прокручиваемой,
	   но рывок к следующему кадру убираем. */
	.gal__strip { scroll-snap-type: none; }
	.marquee__track { animation: none; }
}