/*
Theme Name: Wan Ru
Theme URI: https://wanai.help/
Description: Тема сайта wanai.help. Язык дизайна — «световое поле»: светлое полотно офсайта, bloom-свечение фиолетовым акцентом, карточки с мягкой тенью, дисплейный сериф в числах.
Version: 1.0.0
Text Domain: wan-help
*/

/* ==================================================================
   Токены. Палитра снята кодом с wan.video и create.wan.video.
   ================================================================== */

:root {
	/* полотно и поверхности */
	--canvas:      #fafafc;
	--surface:     #ffffff;
	--surface-2:   #f1f2f8;
	--line:        #e5e5ee;
	--line-strong: #d3d3e0;

	/* чернила */
	--ink:         #0d0d0e;
	--ink-2:       #26262c;
	--muted:       #5e5e5e;
	--muted-2:     #858693;

	/* акцент бренда */
	--accent:      #3f00ff;
	--accent-deep: #4214cc;
	--accent-mid:  #8566ff;
	--accent-soft: #aa99ff;
	--accent-wash: #ece7ff;

	/* геометрия */
	--wrap:        1200px;
	--gutter:      120px;
	--r-card:      20px;
	--r-pill:      100px;
	--r-media:     16px;

	/* движение — тайминги офсайта */
	--t-fast:      .2s;
	--t-base:      .3s;
	--ease:        cubic-bezier(.4, 0, .2, 1);
	--ease-out:    cubic-bezier(.16, 1, .3, 1);

	/* типографика */
	--f-display:   "Source Serif 4", "Times New Roman", Georgia, serif;
	--f-text:      "Libre Franklin", "Segoe UI", Tahoma, sans-serif;
	--f-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ==================================================================
   База
   ================================================================== */

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

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

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

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

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

h1, h2, h3, h4 {
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	color: var(--ink);
	text-wrap: balance;
}

h1 { font-size: clamp(38px, 5vw, 68px); letter-spacing: -.032em; }
h2 { font-size: clamp(28px, 3.2vw, 42px); }
h3 { font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -.012em; }

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

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

strong { font-weight: 600; }

::selection { background: var(--accent-wash); color: var(--ink); }

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

.skip {
	position: absolute; left: -9999px; top: 0;
	background: var(--ink); color: #fff; padding: 12px 20px; z-index: 2000;
}
.skip:focus { left: 12px; top: 12px; }

/* ==================================================================
   Раскладка
   ================================================================== */

/* ЕДИНСТВЕННЫЙ контейнер сайта. Одна ширина на всех страницах, включая
   первый экран главной: внешняя коробка --wrap (1200px), поля 24px,
   значит поле содержимого 1152px на любой ширине окна от 1200px.
   Ничего, кроме шапки (ей нужна вся ширина под меню), из него не выходит,
   и НИЧТО внутри не заводит собственный max-width — иначе ширина снова
   начнёт гулять между страницами. */
.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 24px;
}

/* Полноширинная полоса с полями офсайта. Служебный класс, в шаблонах не занят. */
.bleed { padding-inline: var(--gutter); }

.sec { padding-block: clamp(56px, 8vw, 104px); }
.sec--tight { padding-block: clamp(40px, 5vw, 68px); }
.sec--wash { background: var(--surface-2); }

.lede {
	font-size: clamp(18px, 1.5vw, 21px);
	line-height: 1.6;
	color: var(--muted);
	max-width: 62ch;
}

/* Класса .col в этом файле больше нет правила, и это намеренно.
   Раньше на нём стоял max-width: 74ch — он резал текстовые разделы внутренних
   страниц до 866px при контейнере 1200px, и содержимое одной и той же страницы
   съезжало относительно шапки страницы, блока чисел и полосы CTA.
   В шаблонах класс оставлен (он ничего не делает), ширину даёт .wrap.
   Не возвращайте сюда max-width: ни 74ch, ни none — none точно так же
   перебьёт max-width у .wrap, потому что вес селекторов одинаковый,
   и колонка растянется во всю ширину окна. */

.grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px)  { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px)  { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================
   Кнопки — геометрия снята с wan.video
   пилюля 100px, высота 40px, паддинг 8/23, кегль 16, вес 500
   ================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	padding: 8px 23px;
	border-radius: var(--r-pill);
	font-family: var(--f-text);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--t-base), color var(--t-base),
	            border-color var(--t-base), box-shadow var(--t-base),
	            transform var(--t-base);
	white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn--primary {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 6px 22px -8px rgba(63, 0, 255, .55);
}
.btn--primary:hover {
	background: var(--accent-deep);
	box-shadow: 0 10px 30px -8px rgba(63, 0, 255, .62);
}

/* вторичная — как на офсайте: прозрачная с волосяной рамкой */
.btn--ghost {
	background: transparent;
	color: var(--ink);
	border-color: rgba(0, 0, 0, .2);
}
.btn--ghost:hover {
	border-color: var(--ink);
	background: rgba(0, 0, 0, .03);
}

.btn--light {
	background: rgba(255, 255, 255, .14);
	color: #fff;
	border-color: rgba(255, 255, 255, .38);
}
.btn--light:hover { background: rgba(255, 255, 255, .24); }

.btn--xs { min-height: 34px; padding: 6px 16px; font-size: 14px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ==================================================================
   Шапка — fixed, 72px, прозрачная, как на офсайте;
   по скроллу наливается фоном, чтобы текст читался
   ================================================================== */

.hdr {
	position: fixed;
	inset: 0 0 auto 0;
	height: 72px;
	z-index: 1000;
	display: flex;
	align-items: center;
	transition: background var(--t-base), box-shadow var(--t-base);
	background: transparent;
}
.hdr.is-stuck {
	background: rgba(250, 250, 252, .88);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 1px 0 var(--line);
}

.hdr__in {
	width: 100%;
	max-width: none;
	padding-inline: clamp(16px, 4vw, var(--gutter));
	display: flex;
	align-items: center;
	gap: 18px;
}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--f-display);
	font-weight: 700;
	font-size: 21px;
	letter-spacing: -.025em;
	color: var(--ink);
	text-decoration: none;
	flex-shrink: 0;
}
.logo:hover { text-decoration: none; }
.logo__mark { width: 26px; height: 26px; flex: 0 0 26px; }

.nav { display: none; margin-left: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav li { margin: 0; }
.nav a {
	display: block;
	padding: 7px 13px;
	border-radius: var(--r-pill);
	color: var(--ink-2);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: background var(--t-fast), color var(--t-fast);
}
.nav a:hover { background: rgba(0, 0, 0, .05); color: var(--ink); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--accent); }

@media (min-width: 1080px) { .nav { display: block; } }

/* Реф-кнопка в шапке — видна на всех ширинах, вне бургера */
.hdr__cta { margin-left: auto; flex-shrink: 0; }
@media (min-width: 1080px) { .hdr__cta { margin-left: 0; } }
@media (max-width: 420px) {
	.hdr__cta .btn { padding: 8px 15px; font-size: 15px; }
	.logo { font-size: 19px; }
	.logo__mark { width: 23px; height: 23px; flex-basis: 23px; }
}

.burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	flex: 0 0 40px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .2);
	border-radius: var(--r-pill);
	background: transparent;
	cursor: pointer;
	transition: border-color var(--t-fast), background var(--t-fast);
}
.burger:hover { border-color: var(--ink); }
.burger svg { width: 19px; height: 19px; }
@media (min-width: 1080px) { .burger { display: none; } }

.mnav {
	position: fixed;
	inset: 72px 0 auto 0;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: 12px clamp(16px, 4vw, 32px) 22px;
	z-index: 999;
	display: none;
	max-height: calc(100vh - 72px);
	overflow-y: auto;
}
.mnav.is-open { display: block; }
.mnav ul { list-style: none; margin: 0; padding: 0; }
.mnav li { margin: 0; border-bottom: 1px solid var(--line); }
.mnav li:last-child { border-bottom: 0; }
.mnav a { display: block; padding: 13px 2px; color: var(--ink); font-weight: 500; text-decoration: none; }
@media (min-width: 1080px) { .mnav { display: none !important; } }

.hdr-spacer { height: 72px; }

/* ==================================================================
   Первый экран — сцена unicorn.studio на светлом полотне
   ================================================================== */

/* Секция первого экрана — во всю ширину: фон обязан доходить до кромок.
   Поля даёт не она, а .hero__in, у которого коробка ровно как у .wrap. */
.hero {
	position: relative;
	padding-block: clamp(64px, 10vw, 132px) clamp(48px, 7vw, 96px);
	padding-inline: 0;
	overflow: hidden;
	isolation: isolate;
}

/* Фон первого экрана — чужая сцена: проект 9tVO0xGS8DIar1DF4Sqc на
   unicorn.studio, рисует её их плеер, подключённый из scripts.js.
   Собственного холста у первого экрана больше нет (был bloom на canvas,
   снят 26.08.2026 — владелец забраковал его как «градиент»).
   Пока скрипт не приехал или не приедет вовсе, здесь пустой div,
   и первый экран показывает чистое светлое полотно. */
.hero__fx {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
	/* Сцена нарисована светящимися формами на ЧЁРНОМ поле: как есть она даёт
	   тёмный первый экран, на котором заголовок меряется 1.08:1 при норме 3:1.
	   Инверсия светимости переводит её на светлое полотно — чёрное поле
	   становится белым, свечение сохраняет форму, движение и объём.
	   hue-rotate возвращает синь, которую инверсия увела в жёлтый,
	   saturate снимает перекал, brightness подгоняет белое поле сцены
	   под полотно сайта (#fff → ~#fafafa против --canvas #fafafc),
	   чтобы на растворении маски не читалась кромка.
	   Коэффициенты подобраны замером, а не на глаз: см. отчёт от 26.08.2026. */
	filter: invert(1) hue-rotate(180deg) saturate(.85) brightness(.98);
	/* растворяется к нижней кромке, чтобы стык с секцией не читался линией */
	-webkit-mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
	        mask-image: linear-gradient(to bottom, #000 0, #000 62%, transparent 100%);
}

/* Коробка сцены шире первого экрана и прижата влево. Вспышка сцены сидит
   ровно в середине СВОЕЙ коробки, поэтому при 175% она уезжает в правую
   треть окна, где текста нет. Двигаем только рамку кадра — саму сцену
   не трогаем. Замер по пикселям: при 100% вспышка садится на подзаголовок
   и даёт там 1.46:1 при норме 4.5:1, при 175% — 5.61:1. */
.hero__fx-scene { width: 175%; height: 100%; }

/* Пока окно уже 1024px, текст первого экрана занимает всю ширину и свободного
   места справа нет: вспышка садится прямо на подзаголовок. Замер по пикселям,
   худшие 5% пикселей под подзаголовком при 175%:
       768px — 2.38:1, 900px — 3.25:1, 1024px — 5.45:1 (норма 4.5:1).
   Поэтому до 1024px сцену отодвигаем дальше, в кадр входит только край
   свечения. Порог именно 1024, а не 760: на 768 и 900 текст ещё во всю
   ширину, и брейкпоинт сетки темы (760px) здесь не годится.
   260% — предел, за которым фон умирает совсем: при 320% в кадре чистое
   белое поле и между кадрами не меняется ни один пиксель. При 260%
   под подзаголовком 6.11:1 и двигается 6.7% пикселей — фон ещё живой. */
@media (max-width: 1023px) {
	.hero__fx-scene { width: 260%; }
}

/* Засветка под текстом первого экрана — только на узких экранах.
   Вспышка сцены не стоит на месте: она гуляет, и на 390px в отдельных кадрах
   заезжает под подзаголовок даже при 260%. Замер по одному кадру это
   пропускает — на трёх кадрах подряд там выходило 6.11:1, 2.60:1 и снова
   больше пяти. Отодвинуть сцену ещё дальше нельзя: при 320% фон умирает
   совсем. Поэтому держим пол по контрасту засветкой, а не глушим сцену:
   градиент плотный над колонкой текста и полностью прозрачен у правой
   кромки, где и виден край свечения.
   Печатается псевдоэлементом, а не тегом: ::after — последний ребёнок .hero,
   поэтому при одинаковом z-index он ложится ПОВЕРХ .hero__fx и под .hero__in
   (у которого z-index auto, а отрицательные слои всегда ниже потока). */
@media (max-width: 1023px) {
	.hero::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		pointer-events: none;
		background: linear-gradient(
			to right,
			var(--canvas) 0%,
			rgba(250, 250, 252, .93) 62%,
			rgba(250, 250, 252, .60) 84%,
			rgba(250, 250, 252, 0) 100%
		);
	}
}

/* На телефонах строки подзаголовка дотягиваются почти до правой кромки —
   ровно туда, где у засветки выше прозрачный хвост. Замер по пяти кадрам
   подряд: без хвоста 2.60:1, с хвостом .52 — от 3.30 до 4.80 при норме 4.5.
   Разброс здесь и есть суть проблемы: вспышка гуляет, и один кадр ничего
   не доказывает — пол надо держать в худшем кадре, а не в среднем.
   Хвост поднят до .68. Дальше по этой дороге идти некуда: на 360px колонка
   текста занимает всю ширину первого экрана, и яркое свечение под серым
   подзаголовком 18px и его читаемость несовместимы. Поэтому на телефоне
   фон сознательно спокойнее десктопного: он остаётся живым (между кадрами
   меняется 7.9% пикселей), но читается тонированием, а не вспышкой.
   Типографику первого экрана при этом не трогаем — она везде одна. */
@media (max-width: 560px) {
	.hero::after {
		background: linear-gradient(
			to right,
			var(--canvas) 0%,
			rgba(250, 250, 252, .97) 62%,
			rgba(250, 250, 252, .88) 84%,
			rgba(250, 250, 252, .78) 100%
		);
	}
}

/* Просили не двигаться — не двигаемся. Скрипт при reduce не загружается
   вовсе (см. scene() в scripts.js), это правило — страховка на случай,
   если плеер всё же окажется на странице. */
@media (prefers-reduced-motion: reduce) {
	.hero__fx { display: none; }
}

/* Тот же контейнер, что у .wrap. Раньше стоял max-width: 980px, из-за чего
   первый экран был на 172px уже всех остальных блоков сайта и начинался
   левее их на 86px. Ширину менять только вместе с .wrap. */
.hero__in {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 24px;
}

.hero h1 { margin-bottom: 22px; }

.hero__lede {
	font-size: clamp(18px, 1.75vw, 23px);
	line-height: 1.55;
	color: var(--muted);
	max-width: 60ch;
	margin-bottom: 30px;
}

.hero__acts { margin-bottom: 44px; }

.hero__stats {
	display: grid;
	gap: 26px 40px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 760px;
}
@media (min-width: 760px) { .hero__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Крупные числа дисплейным серифом */
.stat { min-width: 0; }
.stat__n {
	display: block;
	font-family: var(--f-display);
	font-size: clamp(32px, 3.6vw, 46px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	color: var(--ink);
	margin-bottom: 6px;
}
.stat__l {
	display: block;
	font-size: 14px;
	line-height: 1.4;
	color: var(--muted-2);
}

/* ==================================================================
   Карточки — без рамки, мягкая тень, радиус 20
   ================================================================== */

.card {
	background: var(--surface);
	border-radius: var(--r-card);
	padding: 26px 26px 28px;
	box-shadow: 0 1px 2px rgba(13, 13, 14, .04), 0 8px 26px -18px rgba(13, 13, 14, .22);
	transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.card:hover {
	box-shadow: 0 1px 2px rgba(13, 13, 14, .05), 0 16px 40px -20px rgba(63, 0, 255, .34);
	transform: translateY(-3px);
}
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); font-size: 16px; }
.card > :last-child { margin-bottom: 0; }

.card__ico {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border-radius: 11px;
	background: var(--accent-wash);
	color: var(--accent);
	margin-bottom: 16px;
	flex: 0 0 auto;
}
.card__ico svg { width: 20px; height: 20px; }

.card--flat { box-shadow: none; background: var(--surface-2); }
.card--flat:hover { transform: none; box-shadow: none; }

/* Номер карточки в том же чипе, что и иконка Lucide: своей геометрии у него
   нет, только моношрифт вместо текстового. */
.card__ico--num {
	font-family: var(--f-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1;
}

/* Здесь стоял горизонтальный аккордеон блока «Что делает Wan 3.0»:
   .acc / .acc__panel с flex-grow 1 → 2.6, раскрытием по клику, скрытым
   .acc__body (grid-template-rows 0fr → 1fr) и подписями в узких панелях.
   Всё это снято 26.08.2026 по требованию владельца: у каждой карточки
   заголовок и описание должны читаться сразу, без нажатий и без состояний.
   Блок печатает whp_points() штатными карточками .card в сетке .grid--2,
   поэтому собственных правил у него больше нет и не должно появиться.
   Не возвращайте сюда .acc*: вместе с ними вернётся и клик, и раскрытие. */

/* ==================================================================
   Галерея — карточки 3:2, как на офсайте
   ================================================================== */

.gal {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax(0, 1fr);
}
/* Две колонки на всех ширинах от 700px. Раньше от 1040px стояло три:
   плиток было шесть, и они складывались в два полных ряда. С 26.08.2026
   плиток четыре (g5 и g6 сняты), и три колонки дают ряд из трёх плюс
   одинокий хвост — дыра в пол-ряда. Две колонки дают 2×2 без хвоста
   и совпадают с сеткой карточек .grid--2 выше на той же странице.
   Вернёте шестую плитку — верните и три колонки. */
@media (min-width: 700px)  { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gal__item {
	position: relative;
	min-width: 0;
	border-radius: var(--r-media);
	overflow: hidden;
	background: var(--surface-2);
	aspect-ratio: 3 / 2;
}

.gal__item img,
.gal__item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--ease-out);
}
.gal__item:hover img,
.gal__item:hover video { transform: scale(1.045); }

/* подпись выезжает из-под нижней кромки, сама плитка стоит */
.gal__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 34px 16px 14px;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	background: linear-gradient(to top, rgba(0, 0, 0, .74), rgba(0, 0, 0, 0));
	transform: translateY(100%);
	opacity: 0;
	transition: transform var(--t-base) var(--ease-out), opacity var(--t-base) var(--ease);
}
.gal__item:hover .gal__cap,
.gal__item:focus-within .gal__cap { transform: translateY(0); opacity: 1; }

/* Широкая медиа-панель: полоса 21:9 во всю ширину контейнера */
.panel {
	border-radius: var(--r-media);
	overflow: hidden;
	background: var(--surface-2);
	aspect-ratio: 21 / 9;
	min-width: 0;
}
.panel img, .panel video { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .panel { aspect-ratio: 16 / 9; } }

.gal__ph {
	width: 100%; height: 100%;
	display: grid; place-items: center;
	color: var(--muted-2);
	font-size: 14px;
	background:
		radial-gradient(120% 90% at 22% 12%, var(--accent-wash), transparent 62%),
		var(--surface-2);
	text-align: center;
	padding: 18px;
}

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

.tw { overflow-x: auto; margin-bottom: 1.4em; }

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	background: var(--surface);
	border-radius: var(--r-card);
	overflow: hidden;
}
th, td {
	padding: 14px 16px;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
th {
	font-family: var(--f-text);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .01em;
	color: var(--muted);
	background: var(--surface-2);
}
tr:last-child td { border-bottom: 0; }
td .btn { margin: 0; }

@media (max-width: 640px) {
	table, thead, tbody, tr, td { display: block; width: 100%; }
	thead { display: none; }
	tr { margin-bottom: 14px; background: var(--surface); border-radius: var(--r-card); overflow: hidden; }
	td { border-bottom: 1px solid var(--line); padding: 12px 16px; }
	td::before {
		content: attr(data-label);
		display: block;
		font-size: 12px;
		letter-spacing: .04em;
		color: var(--muted-2);
		margin-bottom: 4px;
	}
}

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

.plans { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.plan {
	background: var(--surface);
	border-radius: var(--r-card);
	padding: 28px 26px;
	box-shadow: 0 1px 2px rgba(13, 13, 14, .04), 0 8px 26px -18px rgba(13, 13, 14, .22);
	display: flex;
	flex-direction: column;
	min-width: 0;
	position: relative;
}
.plan--best { box-shadow: 0 1px 2px rgba(13, 13, 14, .05), 0 18px 44px -20px rgba(63, 0, 255, .4); }

.plan__flag {
	position: absolute;
	top: -11px; left: 26px;
	background: var(--accent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 4px 12px;
	border-radius: var(--r-pill);
}

.plan__name { font-family: var(--f-display); font-size: 22px; font-weight: 600; margin-bottom: 10px; }

.plan__price {
	font-family: var(--f-display);
	font-size: clamp(38px, 4vw, 50px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
	margin-bottom: 6px;
}
.plan__note { font-size: 14px; color: var(--muted-2); margin-bottom: 18px; min-height: 2.6em; }

.plan__credits {
	font-family: var(--f-mono);
	font-size: 13px;
	color: var(--accent);
	background: var(--accent-wash);
	border-radius: var(--r-pill);
	padding: 5px 13px;
	align-self: flex-start;
	margin-bottom: 18px;
}

.plan ul { list-style: none; padding: 0; margin: 0 0 22px; }
.plan li {
	position: relative;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--muted);
	margin-bottom: .55em;
}
.plan li::before {
	content: "";
	position: absolute;
	left: 4px; top: .55em;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--accent-soft);
}
.plan .btn { margin-top: auto; width: 100%; }

/* ==================================================================
   Отзывы и звёзды
   ================================================================== */

.voices { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 780px)  { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .voices { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.voice {
	background: var(--surface);
	border-radius: var(--r-card);
	padding: 24px;
	box-shadow: 0 1px 2px rgba(13, 13, 14, .04);
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.voice__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.voice__who { font-weight: 600; font-size: 16px; }
.voice__role { font-size: 13px; color: var(--muted-2); }
.voice p { font-size: 15px; color: var(--muted); line-height: 1.6; margin: 0; }

.stars { position: relative; display: inline-block; line-height: 0; white-space: nowrap; }
.stars svg { width: 15px; height: 15px; display: inline-block; }
.stars__bg { color: var(--line-strong); display: block; }
.stars__fill {
	color: #f5a623;
	position: absolute;
	top: 0; left: 0;
	overflow: hidden;
	display: block;
	white-space: nowrap;
}

.score {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	background: var(--surface);
	border-radius: var(--r-card);
	padding: 22px 26px;
	box-shadow: 0 1px 2px rgba(13, 13, 14, .04);
	margin-bottom: 26px;
}
.score__n {
	font-family: var(--f-display);
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.035em;
}

/* ==================================================================
   FAQ
   ================================================================== */

.faq { display: grid; gap: 10px; }

.faq__item {
	background: var(--surface);
	border-radius: var(--r-card);
	box-shadow: 0 1px 2px rgba(13, 13, 14, .04);
	overflow: hidden;
}

.faq__q {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 19px 22px;
	background: none;
	border: 0;
	font-family: var(--f-display);
	font-size: clamp(17px, 1.5vw, 20px);
	font-weight: 600;
	letter-spacing: -.012em;
	line-height: 1.3;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}
.faq__q::after {
	content: "";
	flex: 0 0 12px;
	width: 12px; height: 12px;
	margin-top: .4em;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
	transition: transform var(--t-base) var(--ease);
}
.faq__item.is-open .faq__q::after { transform: rotate(-135deg); }

.faq__a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows var(--t-base) var(--ease);
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p {
	padding: 0 22px 20px;
	color: var(--muted);
	font-size: 16px;
	margin: 0;
}

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

.band {
	background: linear-gradient(122deg, var(--accent-deep), var(--accent) 46%, var(--accent-mid));
	border-radius: 28px;
	padding: clamp(34px, 5vw, 58px);
	color: #fff;
	position: relative;
	overflow: hidden;
}
.band h2 { color: #fff; margin-bottom: .4em; }
.band p { color: rgba(255, 255, 255, .84); max-width: 56ch; margin-bottom: 26px; }
.band::after {
	content: "";
	position: absolute;
	right: -12%; top: -60%;
	width: 62%; aspect-ratio: 1;
	background: radial-gradient(circle, rgba(255, 255, 255, .3), transparent 62%);
	pointer-events: none;
}

/* ==================================================================
   Перелинковка
   ================================================================== */

.related { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); }
.related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 9px; }
.related li { margin: 0; }
.related a {
	display: inline-block;
	padding: 8px 16px;
	border-radius: var(--r-pill);
	background: var(--surface);
	border: 1px solid var(--line);
	color: var(--ink-2);
	font-size: 15px;
	text-decoration: none;
	transition: border-color var(--t-fast), color var(--t-fast);
}
.related a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* ==================================================================
   Подвал — не три колонки: знак, абзац и одна лента ссылок
   ================================================================== */

.ftr {
	background: var(--surface);
	border-top: 1px solid var(--line);
	padding-block: clamp(40px, 5vw, 64px) 30px;
	margin-top: clamp(48px, 6vw, 88px);
}
.ftr__top { display: flex; flex-wrap: wrap; gap: 26px; align-items: flex-start; justify-content: space-between; margin-bottom: 30px; }
.ftr__about { max-width: 48ch; }
.ftr__about p { font-size: 15px; color: var(--muted); margin: 14px 0 0; }

.ftr__links { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.ftr__links li { margin: 0; }
.ftr__links a { color: var(--muted); font-size: 15px; text-decoration: none; }
.ftr__links a:hover { color: var(--accent); }

.ftr__base { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; }
.ftr__base p { font-size: 13px; color: var(--muted-2); margin: 0; max-width: 76ch; line-height: 1.55; }

/* ==================================================================
   Служебное
   ================================================================== */

.crumbs { font-size: 14px; color: var(--muted-2); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.crumbs span { margin-inline: 7px; }

.page-head { padding-block: clamp(36px, 5vw, 62px) 8px; }

.note {
	background: var(--accent-wash);
	border-radius: var(--r-card);
	padding: 20px 24px;
	font-size: 16px;
	color: var(--ink-2);
}
.note p:last-child { margin-bottom: 0; }

.mono { font-family: var(--f-mono); font-size: .92em; }

.e404 { padding-block: clamp(70px, 11vw, 150px); text-align: left; }

/* Появление блоков — только при работающем скрипте */
.js .rev { opacity: 0; transform: translateY(26px); }
.js .rev.is-in {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.js .rev { opacity: 1; transform: none; }
}