/*
Theme Name: Qwen Ru
Theme URI: https://qwenai.help/
Description: Тема сайта qwenai.help. Язык дизайна — «эквалайзер»: асимметричный бенто, командные панели Qwen Code и фоновая анимация звуковых столбиков в цветах офсайта.
Version: 1.0.0
Text Domain: qwh
*/

/* ============================================================
   1. ТОКЕНЫ — сняты кодом с бандла g.alicdn.com/qwenweb/qwen-ai-fe
   ============================================================ */
:root {
	--bg: #ffffff;
	--surface: #F7F8FC;
	--surface-2: #EEF0FA;
	--ink: #1D1D1F;
	--ink-2: #232326;
	--dim: #797B89;
	--dim-2: #8C8D9B;
	--line: #D8DAE3;
	--line-soft: #E7E9F2;

	--accent: #082DFF;
	--accent-dark: #0008C9;
	--accent-tint: #EAEEFF;

	--wrap: 1080px;
	--wrap-wide: 1440px;
	--gutter: 24px;

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

	--f: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

	--ease: cubic-bezier(.16, 1, .3, 1);
	--head-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--f);
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
	overflow-x: hidden;
	-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);
	font-weight: 600;
	line-height: 1.12;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
}
h1 { font-size: clamp(2.4rem, 1.7rem + 3vw, 4.6rem); font-weight: 700; }
h2 { font-size: clamp(1.7rem, 1.4rem + 1.3vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); }

ul, ol { margin: 0 0 1em; padding-left: 1.15em; }
li { margin-bottom: .4em; }
strong { font-weight: 600; }

.skip {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - (var(--gutter) * 2), var(--wrap)); margin-inline: auto; }
.wrap--wide { width: min(100% - (var(--gutter) * 2), var(--wrap-wide)); margin-inline: auto; }

.strip { padding: 72px 0; }
.strip--tight { padding: 40px 0 8px; }
.strip:last-of-type { padding-bottom: 56px; }

.lead { font-size: clamp(1.05rem, 1rem + .3vw, 1.22rem); color: var(--dim); max-width: 62ch; }
.dim { color: var(--dim); }
.mono { font-family: var(--mono); font-size: .92em; }

/* ============================================================
   2. ШАПКА
   ============================================================ */
.hdr {
	position: sticky; top: 0; z-index: 60;
	background: rgba(255, 255, 255, .82);
	backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--line-soft);
}
.hdr__row { display: flex; align-items: center; gap: 20px; min-height: var(--head-h); }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: 0 0 auto; }
.mark__word { font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--ink); }
.mark__word b { font-weight: 400; color: var(--dim); }

.routes { display: flex; gap: 2px; margin-left: 12px; flex: 1 1 auto; flex-wrap: nowrap; }
.routes a {
	padding: 8px 13px; border-radius: var(--r-pill); font-size: 14.5px; color: var(--ink-2);
	text-decoration: none; white-space: nowrap; transition: background-color .16s var(--ease), color .16s var(--ease);
}
.routes a:hover { background: var(--surface); }
.routes a.here { background: var(--accent-tint); color: var(--accent); }

.burger {
	display: none; width: 42px; height: 40px; flex: 0 0 42px;
	align-items: center; justify-content: center;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
	color: var(--ink); cursor: pointer;
}
.burger svg { width: 18px; height: 18px; }

.drawer { display: none; padding: 6px 0 20px; }
.drawer.is-on { display: block; }
.drawer a {
	display: block; padding: 12px 4px; border-radius: var(--r-sm);
	text-decoration: none; color: var(--ink-2); font-size: 16.5px; border-bottom: 1px solid var(--line-soft);
}
.drawer a:last-child { border-bottom: none; }
.drawer a.here { color: var(--accent); }

@media (max-width: 1180px) {
	.routes { display: none; }
	.burger { display: inline-flex; margin-left: auto; }
}

/* ============================================================
   3. КНОПКИ
   ============================================================ */
.act {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 12px 22px 12px 12px; border-radius: var(--r-pill);
	background: var(--accent); color: #fff; font-weight: 600; font-size: 15.5px;
	border: 1px solid transparent; cursor: pointer; white-space: nowrap;
	transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.act:hover { background: var(--accent-dark); transform: translateY(-1px); }
.act__ico { display: inline-flex; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.18); align-items: center; justify-content: center; flex: 0 0 auto; }
.act__ico svg { width: 15px; height: 15px; }

.act--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.act--ghost:hover { border-color: var(--ink); background: var(--surface); transform: none; }
.act--ghost .act__ico { background: var(--surface-2); color: var(--ink); }

.act--on-accent { background: #fff; color: var(--accent); }
.act--on-accent:hover { background: var(--surface); }
.act--on-accent .act__ico { background: var(--accent-tint); color: var(--accent); }

.act--sm { padding: 9px 18px 9px 9px; font-size: 14.5px; }
.act--sm .act__ico { width: 26px; height: 26px; }
.act--sm .act__ico svg { width: 13px; height: 13px; }

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

/* ============================================================
   4. ЧИПЫ
   ============================================================ */
.chiprow { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; }
.chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border-radius: var(--r-pill); background: var(--surface);
	border: 1px solid var(--line-soft); font-size: 13.5px; color: var(--ink-2);
}
.chip svg { width: 14px; height: 14px; color: var(--accent); }

/* ============================================================
   5. ЭКВАЛАЙЗЕР — фирменный акцентный маркер
   ============================================================ */
.eq { display: inline-flex; align-items: flex-end; gap: 2.5px; height: 14px; }
.eq i { display: block; width: 3px; border-radius: 2px; background: var(--accent); animation: eqBounce 1.1s ease-in-out infinite; }
.eq i:nth-child(1) { height: 40%; animation-delay: 0s; }
.eq i:nth-child(2) { height: 100%; animation-delay: .15s; }
.eq i:nth-child(3) { height: 65%; animation-delay: .3s; }
.eq i:nth-child(4) { height: 82%; animation-delay: .45s; }
@keyframes eqBounce { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* ============================================================
   6. HERO — фон-эквалайзер на canvas
   ============================================================ */
.hero { position: relative; padding: 30px 0 0; overflow: hidden; background: var(--surface); }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__fade {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(180deg, rgba(247,248,252,0) 0%, rgba(247,248,252,.55) 78%, var(--surface) 100%);
}
.hero__in { position: relative; z-index: 2; padding: clamp(64px, 10vw, 128px) 0 56px; text-align: center; }
.hero__in .chiprow { justify-content: center; }
.hero__in h1 { max-width: 16ch; margin-inline: auto; color: var(--ink); }
.hero__in .lead { margin-inline: auto; }
.hero__in .actrow { justify-content: center; margin-top: 8px; }

.hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: 34px; }

/* ============================================================
   7. ГАЛЕРЕЯ — целые кадры, листание только переключателями
   ============================================================ */
.gal { padding-top: 8px; }
/* Ленту ограничиваем сверху: без потолка на 2560 шесть кадров растянулись бы
   до 400px каждый. Потолок подобран так, чтобы на широком экране кадр вышел
   ровно в прежние 300px: 6 * 300 + 5 * 16 = 1880. */
.gal__wrap {
	margin-top: 30px;
	max-width: calc(1880px + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
/* overflow: hidden — прокрутки у ленты нет вовсе: ни колесом, ни свайпом, ни
   перетаскиванием. Программный scrollTo из скрипта при этом работает, поэтому
   лента и листается кнопками. Отсюда же ненужность scroll-snap: он доводил
   ленту до границы кадра только после жеста, а во время жеста кадры всё равно
   показывались половинками — да ещё и подменял начальное положение, из-за чего
   первый кадр обрезался сразу при загрузке.
   Горизонтальные отступы сняты с самой ленты и отданы .gal__wrap: у flex-ленты
   с переполнением конечный padding не попадает в scrollWidth, и последний кадр
   не дотягивался бы до края ровно на его величину.
   scroll-behavior здесь НЕ задавать: плавность передаётся опцией scrollTo,
   иначе присваивание scrollLeft (в том числе из скриптов приёмки) тоже начнёт
   анимироваться и замер соврёт. */
.gal__track {
	--gal-gap: 16px; --gal-cols: 1;
	display: flex; gap: var(--gal-gap); list-style: none; margin: 0; padding: 4px 0;
	overflow: hidden;
}
/* Ширина кадра выводится из числа колонок, а число колонок ставит скрипт так,
   чтобы в ряд помещалось ЦЕЛОЕ число кадров и остатка не образовывалось.
   Поэтому ни первый, ни последний кадр не показывается наполовину: то, что не
   влезло, уходит за край целиком и достаётся переключателями. */
.gal__cell {
	flex: 0 0 calc((100% - (var(--gal-cols) - 1) * var(--gal-gap)) / var(--gal-cols));
	min-width: 0;
}
.gal__card {
	margin: 0; border-radius: var(--r); overflow: hidden; background: var(--surface);
	border: 1px solid var(--line-soft); position: relative;
}
.gal__card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .5s var(--ease); }
.gal__card:hover img { transform: scale(1.05); }
.gal__card figcaption {
	position: absolute; inset: auto 0 0 0; padding: 16px 14px 14px;
	background: linear-gradient(180deg, rgba(10,10,15,0) 0%, rgba(10,10,15,.72) 100%);
	display: flex; flex-direction: column; gap: 2px;
}
.gal__t { color: #fff; font-size: 14.5px; font-weight: 600; }
.gal__g { color: rgba(255,255,255,.78); font-size: 12.5px; font-family: var(--mono); }

.gal__nav { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; }
.gal__nav[hidden] { display: none; }
.gal__arr {
	width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line);
	background: #fff; color: var(--ink); display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer; transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.gal__arr svg { width: 18px; height: 18px; }
.gal__arr:hover { border-color: var(--accent); }
.gal__arr:disabled { opacity: .35; cursor: default; }
.gal__arr:disabled:hover { border-color: var(--line); }
.gal__dots { display: inline-flex; gap: 8px; }
.gal__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: none; padding: 0; cursor: pointer; transition: background-color .16s var(--ease), transform .16s var(--ease); }
.gal__dot.is-on { background: var(--accent); transform: scale(1.25); }

/* ============================================================
   8. АСИММЕТРИЧНЫЙ БЕНТО
   ============================================================ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.b-7 { grid-column: span 12; }
.b-5 { grid-column: span 12; }
.b-8 { grid-column: span 12; }
.b-4 { grid-column: span 12; }
.b-6 { grid-column: span 12; }
.b-3 { grid-column: span 12; }
.b-9 { grid-column: span 12; }
@media (min-width: 860px) {
	.b-7 { grid-column: span 7; } .b-5 { grid-column: span 5; }
	.b-8 { grid-column: span 8; } .b-4 { grid-column: span 4; }
	.b-6 { grid-column: span 6; } .b-3 { grid-column: span 3; }
	.b-9 { grid-column: span 9; }
}

.card {
	position: relative; padding: 28px; border-radius: var(--r); background: var(--surface);
	border: 1px solid var(--line-soft); overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card::after {
	content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
	background: var(--accent); transition: width .38s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(8,45,255,.08); }
.card:hover::after { width: 100%; }
.card--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.card--dark .dim { color: rgba(255,255,255,.6); }
.card--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.card--accent::after { background: #fff; }
.card > :last-child { margin-bottom: 0; }
.card__ico {
	display: inline-flex; width: 44px; height: 44px; border-radius: var(--r-sm);
	background: var(--accent-tint); color: var(--accent); align-items: center; justify-content: center; margin-bottom: 16px;
}
.card--dark .card__ico, .card--accent .card__ico { background: rgba(255,255,255,.14); color: #fff; }
.card__ico svg { width: 22px; height: 22px; }
.card h3 { margin-bottom: 8px; }

/* ============================================================
   9. ЦИФРЫ
   ============================================================ */
.stat { display: inline-flex; flex-direction: column; gap: 2px; }
.stat__v { font-family: var(--mono); font-weight: 700; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); color: var(--ink); letter-spacing: -.02em; }
.stat__k { font-size: 13px; color: var(--dim); }
.statrow { display: flex; flex-wrap: wrap; gap: 28px; }

/* ============================================================
   10. КОМАНДНАЯ ПАНЕЛЬ УСТАНОВКИ
   ============================================================ */
.install { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface); }
.install__tabs { display: flex; gap: 2px; padding: 8px; background: var(--surface-2); }
.install__tab {
	flex: 0 0 auto; padding: 8px 18px; border-radius: var(--r-pill); border: none; background: transparent;
	font-family: var(--f); font-size: 14px; color: var(--dim); cursor: pointer;
}
.install__tab.is-on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.install__panel {
	display: flex; align-items: center; gap: 12px; padding: 16px 18px;
	background: var(--ink-2); color: #E6E7F0;
}
.install__sign { font-family: var(--mono); color: var(--dim-2); flex: 0 0 auto; }
.install__cmd { font-family: var(--mono); font-size: 13.5px; flex: 1 1 auto; overflow-x: auto; white-space: pre; scrollbar-width: none; }
.install__cmd::-webkit-scrollbar { display: none; }
.install__copy {
	flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,.16);
	background: rgba(255,255,255,.06); color: #E6E7F0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.install__copy svg { width: 15px; height: 15px; }
.install__copy.is-done { color: #7CF7B0; border-color: #7CF7B0; }

/* ============================================================
   11. TERMINAL — вывод команд (страница Qwen Code)
   ============================================================ */
.term { border-radius: var(--r-sm); background: var(--ink-2); color: #E6E7F0; padding: 16px 18px; font-family: var(--mono); font-size: 13.5px; overflow-x: auto; }
.term__l { display: block; margin-bottom: 4px; }
.term__l:last-child { margin-bottom: 0; }
.term__sign { color: var(--dim-2); margin-right: 8px; }

/* ============================================================
   12. СЕТКИ
   ============================================================ */
.rows { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
.rows--2 { grid-template-columns: minmax(0, 1fr); }
.rows--3 { grid-template-columns: minmax(0, 1fr); }
.rows--4 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) {
	.rows--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rows--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .rows--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rows--37 { grid-template-columns: minmax(0, 1fr); }
.rows--55 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
	.rows--37 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 34px; }
	.rows--55 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; }
}

/* Перелинковка */
.rcard {
	display: block; padding: 24px; border-radius: var(--r); background: var(--surface);
	border: 1px solid var(--line-soft); position: relative; overflow: hidden;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.rcard::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--accent); transition: width .38s var(--ease); }
.rcard:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(8,45,255,.08); }
.rcard:hover::after { width: 100%; }
.rcard__ico { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-tint); color: var(--accent); align-items: center; justify-content: center; margin-bottom: 14px; }
.rcard__ico svg { width: 17px; height: 17px; }
.rcard__t { display: block; font-weight: 600; font-size: 16.5px; margin-bottom: 6px; color: var(--ink); }
.rcard__d { color: var(--dim); font-size: 14.5px; margin: 0; }

/* ============================================================
   13. ТАБЛИЦЫ
   ============================================================ */
.tablewrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line-soft); }
table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 15px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-soft); }
th { font-weight: 600; color: var(--ink); background: var(--surface); font-size: 13.5px; text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 700px) {
	table { min-width: 0; }
	thead { display: none; }
	tr { display: block; border-bottom: 1px solid var(--line-soft); padding: 12px 0; }
	tr:last-child { border-bottom: none; }
	td { display: flex; justify-content: space-between; gap: 12px; border-bottom: none; padding: 6px 4px; }
	td::before { content: attr(data-label); color: var(--dim); font-size: 13px; }
}

/* ============================================================
   14. FAQ-АККОРДЕОН
   ============================================================ */
.qa { border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.qa__item { border-bottom: 1px solid var(--line-soft); }
.qa__item:last-child { border-bottom: none; }
.qa__q {
	width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 18px 22px; background: transparent; border: none; text-align: left;
	font-family: var(--f); font-size: 16px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.qa__q svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--dim); transition: transform .25s var(--ease); }
.qa__item.is-on .qa__q svg { transform: rotate(45deg); color: var(--accent); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.qa__a > div { overflow: hidden; }
.qa__a p { padding: 0 22px 20px; color: var(--dim); margin: 0; }
.qa__item.is-on .qa__a { grid-template-rows: 1fr; }

/* ============================================================
   15. ОТЗЫВЫ
   ============================================================ */
.grade { position: relative; display: inline-flex; }
.grade__row { display: inline-flex; gap: 2px; }
.grade__row svg { width: 16px; height: 16px; fill: var(--line); }
.grade__bg { }
.grade__fill { position: absolute; inset: 0; overflow: hidden; white-space: nowrap; }
.grade__fill svg { fill: var(--accent); }

.voice { padding: 24px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line-soft); }
.voice__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.voice__who { font-weight: 600; font-size: 15px; }
.voice__role { color: var(--dim); font-size: 13px; }
.voice p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* ============================================================
   16. АНИМАЦИЯ — «всплывающий текст»
   ============================================================ */
/* Скрытое состояние вешается ТОЛЬКО при классе .js на документе. Без него
   текст виден сразу: если скрипт не выполнился или наблюдатель не отработал,
   страница остаётся читаемой, а не пустой. Анимация — надстройка. */
.lift__ln { display: block; overflow: hidden; }
.lift__ln > span { display: inline-block; }
.js .lift__ln > span { transform: translateY(110%); transition: transform .7s var(--ease); }
.js .lift.is-in .lift__ln > span { transform: translateY(0); }

.js .riser { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js .riser.is-in { opacity: 1; transform: translateY(0); }
.riser.d1 { transition-delay: .08s; }
.riser.d2 { transition-delay: .16s; }
.riser.d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
	.js .lift__ln > span, .js .riser { transition: none !important; transform: none !important; opacity: 1 !important; }
	.eq i { animation: none !important; }
}

/* ============================================================
   17. РАЗДЕЛИТЕЛЬ, КРОШКИ
   ============================================================ */
.trail { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--dim); margin-bottom: 18px; }
.trail a { color: var(--dim); }
.trail a:hover { color: var(--accent); }
.pagehead { margin-bottom: 8px; }
.pagehead h1 { color: var(--ink); max-width: 22ch; }

.paramline { display: flex; align-items: center; padding: 20px 0; }
.paramline::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--line-soft); }

.plain { list-style: none; padding: 0; margin: 0; }
.plain li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.plain li:last-child { margin-bottom: 0; }
.plain li svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 3px; color: var(--accent); }

/* ============================================================
   18. ПОДВАЛ
   ============================================================ */
.foot { background: var(--ink); color: #fff; padding: 56px 0 32px; margin-top: 60px; }
.foot__top { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; align-items: flex-start; margin-bottom: 34px; }
.foot__mark { display: inline-flex; align-items: center; gap: 10px; }
.foot__word { font-weight: 700; font-size: 18px; }
.foot__about { max-width: 46ch; color: rgba(255,255,255,.62); font-size: 14.5px; }
.foot__band { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 24px 0; border-top: 1px solid rgba(255,255,255,.12); }
.foot__band a { color: rgba(255,255,255,.72); font-size: 14.5px; }
.foot__band a:hover { color: #fff; }
.foot__fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.45); font-size: 13px; }

/* ============================================================
   19. АДАПТИВ
   ============================================================ */
@media (max-width: 700px) {
	.strip { padding: 52px 0; }
	.hero__in { padding-top: 48px; }
	.hero__in h1 { max-width: none; }
	.bento { gap: 14px; }
}
@media (max-width: 400px) {
	.mark__word b { display: none; }
	.hdr__row { gap: 10px; }
	.act { padding: 10px 16px 10px 8px; font-size: 13.5px; gap: 6px; }
	.act__ico { width: 24px; height: 24px; }
	.act__ico svg { width: 12px; height: 12px; }
	.card { padding: 22px; }
}
/* Ниже 340px место в шапке считанное: у знака остаётся только иконка,
   реф-кнопка остаётся видна целиком — правило 3 требует не прятать её
   в бургер, поэтому ужимается логотип, а не кнопка. */
@media (max-width: 340px) {
	.mark__word { display: none; }
}