/*
Theme Name: Tuman VPN Ru
Theme URI: https://tumanvpn.help/
Description: Тема сайта tumanvpn.help. Палитра, контейнер 1100px, шапка 56px, кнопки-пилюли и карточки радиусом 20px сняты кодом с tumanvpn.ru. Язык дизайна — «слои тумана»: белый туман на почти чёрном полотне, сквозной фон на canvas.
Author: Tuman VPN Ru
Version: 1.0.0
Text Domain: tuman-help
*/

/* ══ Токены. Цвета сняты кодом из инлайнового CSS tumanvpn.ru
      (единственный <style> в <head> главной, 02.09.2026). ══ */
:root {
	--ink:     #070709;  /* body background офсайта */
	--ink-2:   #0c0e12;  /* верх радиального градиента офсайта */
	--fg:      #e4e2de;  /* основной текст */
	/* Вторичные ступени подняты 03.09.2026 вместе с осветлением фона.
	   Прежние значения (#8b8680, белый на 45% и на 25%) держали контраст
	   над почти чёрным полотном, но после перехода на серо-белый туман
	   его светлые пятна подходили под текст и роняли контраст до 1.9:1.
	   Мерить эти четыре токена только по СЕРИИ кадров: пятна дрейфуют,
	   и одиночный замер даёт ложное «прошло». */
	--fg-2:    #a8a39c;  /* вторичный текст */
	--fg-3:    #ffffffc4;
	--fg-4:    #ffffff8f;

	--green:   #358d67;  /* акцент офсайта */
	--green-2: #5cb88a;  /* текст на кнопке */
	--mint:    #a8f5c8;  /* иконки и подписи */
	--blue:    #2d9cdb;  /* второй цвет градиента кнопки */

	--line:    #ffffff14;
	--line-2:  #ffffff2e;
	--line-3:  #ffffff0f;

	--wrap:    1100px;   /* .c max-width офсайта */
	--gut:     1rem;
	--gut-lg:  2rem;
	--r:       20px;     /* радиус карточки офсайта */
	--r-sm:    12px;     /* радиус кнопки-плитки офсайта */
	--pill:    9999px;
	--head:    56px;     /* высота шапки офсайта */

	--ease:    cubic-bezier(.16, 1, .3, 1);
	--fast:    .25s ease;

	--fs-h1:   clamp(32px, 5.4vw, 64px);
	--fs-h2:   clamp(24px, 3.2vw, 40px);
	--fs-h3:   clamp(17px, 1.4vw, 19px);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	background: var(--ink);
	color: var(--fg);
	font: 400 16px/1.65 'Ruda', system-ui, -apple-system, 'Segoe UI', sans-serif;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
main { flex: 1; position: relative; z-index: 1; }
svg { display: block; }

/* ══ Сквозной фон: холст тумана лежит под всем сайтом ══ */
.fog {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	/* Подложка повторяет радиальный градиент офсайта — она видна
	   и без JS, и в момент до первого кадра холста. */
	background: radial-gradient(ellipse 120% 80% at 50% 0%, var(--ink-2), var(--ink) 60%);
}
.fog canvas { display: block; width: 100%; height: 100%; }
/* Потолок яркости тумана. Пятна светло-серые и дрейфуют под текстом;
   без этой вуали самое светлое из них роняло вторичный текст до 2.4:1.
   Ограничитель один на весь сайт — это надёжнее, чем поднимать каждый
   цветовой токен под самое светлое пятно: пятна двигаются, а токенов
   четыре. Анимация сквозь вуаль видна полностью, гасится только пик. */
.fog::after {
	content: ''; position: absolute; inset: 0;
	background: #070709;
	opacity: .28;
	pointer-events: none;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); width: 100%; }
@media (min-width: 768px) { .wrap { padding: 0 var(--gut-lg); } }

/* ══ Шапка ══ */
.head {
	position: fixed; top: 0; left: 0; right: 0; z-index: 100;
	background: #070709d9;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid #ffffff0a;
}
.head .wrap { display: flex; align-items: center; gap: 16px; height: var(--head); }
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; }
.brand img { height: 22px; width: 22px; }
.brand b {
	font: 400 15px/1 'Tenor Sans', Georgia, serif;
	letter-spacing: .22em; text-transform: uppercase; color: #fff;
}
.nav { display: none; gap: 1.6rem; }
.nav a {
	font-size: 11px; font-weight: 500; text-transform: uppercase;
	letter-spacing: .08em; color: var(--fg-2); transition: color var(--fast);
}
.nav a:hover, .nav a[aria-current] { color: var(--fg); }
.burger {
	display: grid; place-items: center; width: 40px; height: 40px; flex: none;
	border: 1px solid var(--line-2); border-radius: var(--r-sm);
	background: #ffffff12; color: var(--fg); cursor: pointer;
}
.burger span { display: block; width: 16px; height: 1.5px; background: currentColor; position: relative; }
.burger span::before, .burger span::after {
	content: ''; position: absolute; left: 0; width: 16px; height: 1.5px; background: currentColor;
	transition: transform var(--fast), top var(--fast);
}
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }
.burger.is-open span { background: transparent; }
.burger.is-open span::before { top: 0; transform: rotate(45deg); }
.burger.is-open span::after { top: 0; transform: rotate(-45deg); }

.drawer {
	display: none; position: fixed; inset: var(--head) 0 auto; z-index: 99;
	background: #0b0d10f2; backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--line);
	padding: 14px var(--gut) 20px;
	max-height: calc(100vh - var(--head)); overflow-y: auto;
}
.drawer.is-open { display: block; }
.drawer a {
	display: block; padding: 11px 2px; font-size: 14px; color: var(--fg-2);
	border-bottom: 1px solid var(--line-3);
}
.drawer a:last-child { border-bottom: 0; }
.drawer .btn { margin-top: 16px; width: 100%; justify-content: center; }

/* Реф-кнопка в шапке видна на всех ширинах, включая 320px:
   на узких экранах она ужимается, а не прячется в бургер.
   margin-left здесь НЕ ставится: место уже разбирает .brand своим
   margin-right:auto, а второй auto растаскивал шапку в три точки —
   знак у левого края, кнопка посреди пустоты, бургер справа. */
.nav-cta { padding: .55rem 1.1rem; font-size: 13px; }
@media (min-width: 900px) { .nav-cta { margin-left: 1.6rem; } }
/* Имя бренда на узких экранах не прячется, а ужимается: со знаком без
   подписи шапка читалась как пустой квадрат. Скрывается оно только
   ниже 360px, где места действительно нет. */
@media (max-width: 430px) {
	.brand b { font-size: 12.5px; letter-spacing: .1em; }
	.brand img { width: 24px; height: 24px; }
	.nav-cta { padding: .5rem .85rem; font-size: 12px; }
	.head .wrap { gap: 8px; }
	.burger { width: 36px; height: 36px; }
}
@media (max-width: 359px) { .brand b { display: none; } }

@media (min-width: 900px) {
	.nav { display: flex; }
	.burger { display: none; }
	.drawer { display: none !important; }
}

/* ══ Кнопки. Геометрия и градиент — с офсайта. ══ */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
	padding: .875rem 2.5rem; border-radius: var(--pill);
	font: 500 15px/1 'Ruda', system-ui, sans-serif; cursor: pointer;
	border: 1px solid transparent; transition: all .35s;
	white-space: nowrap;
}
.btn--brand {
	background: linear-gradient(135deg, #358d672e, #2d9cdb14);
	border-color: #358d6759; color: var(--green-2);
}
.btn--brand:hover { background: #358d6733; border-color: #358d6780; }
.btn--ghost {
	background: #ffffff09; border-color: var(--line); color: var(--fg-2);
	padding: .75rem 1.6rem; font-size: 14px;
}
.btn--ghost:hover { background: #ffffff12; border-color: var(--line-2); color: var(--fg); }
.btn--sm { padding: .6rem 1.4rem; font-size: 13px; }

/* Плитка платформы — .db офсайта */
/* Плитка читается как ссылка, поэтому текст в ней — основного цвета,
   а не приглушённого: на #ffffff09 приглушённый #8b8680 давал около
   3:1 и на сером пятне фона проваливался ещё сильнее. */
.tile {
	display: inline-flex; align-items: center; gap: .5rem; height: 44px;
	padding: 0 1.5rem; background: #ffffff14; border: 1px solid var(--line-2);
	border-radius: var(--r-sm); font-size: .875rem; color: var(--fg);
	transition: all var(--fast);
}
.tile:hover { background: #ffffff1f; border-color: #ffffff45; color: #fff; }
.tiles { display: flex; flex-wrap: wrap; gap: 10px; }

/* ══ Типографика ══ */
h1, h2, h3 { font-weight: 400; color: #fff; }
h1 {
	font-family: 'Tenor Sans', Georgia, serif;
	font-size: var(--fs-h1); line-height: 1.1;
	letter-spacing: .04em; text-transform: uppercase;
}
h2 {
	font-family: 'Tenor Sans', Georgia, serif;
	font-size: var(--fs-h2); line-height: 1.2; letter-spacing: .08em;
	text-transform: uppercase;
}
h3 { font-size: var(--fs-h3); font-weight: 600; font-family: 'Ruda', sans-serif; letter-spacing: 0; }
p { color: var(--fg-2); }
p + p { margin-top: .9em; }
b, strong { color: var(--fg); font-weight: 500; }
.lead { font-size: 17px; color: var(--fg-3); max-width: 62ch; }
/* ══ Секции ══ */
.sec { padding: 72px 0; position: relative; }
.sec--tight { padding: 48px 0; }
.sec__h { margin-bottom: 2.2rem; }
.sec__h p { margin-top: .6rem; }

.open {
	min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
	padding: calc(var(--head) + 72px) 0 80px; text-align: center;
}
.open h1 { margin-bottom: 1.4rem; }
.open .lead { margin: 0 auto 2.2rem; }
.open__act { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.open__note { margin-top: 1.6rem; font-size: 13px; color: var(--fg-4); }

/* Внутренние страницы: тот же первый экран, но ниже */
.open--page { min-height: 0; padding: calc(var(--head) + 56px) 0 40px; text-align: left; }
.open--page .lead { margin-left: 0; margin-right: 0; }
.open--page .open__act { justify-content: flex-start; }

/* ══ Карточка. Градиент, рамка, радиус и волосяная линия — с офсайта. ══ */
.card {
	background: linear-gradient(170deg, #ffffff0b, #ffffff03);
	border: 1px solid var(--line-3);
	border-radius: var(--r);
	padding: 2rem 2rem 2.4rem;
	position: relative; overflow: hidden;
	transition: transform var(--fast), border-color var(--fast);
}
.card::before {
	content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 1px;
	background: linear-gradient(90deg, transparent, var(--ac, #358d6780), transparent);
}
.card:hover { transform: translateY(-4px); border-color: #ffffff1f; }
.card h3 { margin-bottom: .5rem; }
.card p { font-size: 14px; }
/* Сброс в начале файла снимает у списков и отступ, и маркеры, поэтому
   внутри карточки список прижимался к её краю и к заголовку над ним.
   Здесь возвращаются оба отступа — и внешний, и под маркер. */
.card ul, .card ol { margin: .9rem 0 0; padding-left: 1.25rem; }
.card ul li, .card ol li { font-size: 14px; color: var(--fg-2); padding-left: .15rem; margin-bottom: .5rem; }
.card ul li::marker { color: var(--green-2); }
.card li:last-child { margin-bottom: 0; }
/* У списка с собственными маркерами-точками (.list) отступ свой. */
.card .list { padding-left: 0; }
.card .list li { padding-left: 1.6rem; margin-bottom: 0; }
.card__i {
	width: 52px; height: 52px; display: grid; place-items: center;
	border-radius: var(--r-sm); margin-bottom: 1.4rem;
	border: 1px solid var(--line); background: #ffffff0d; color: var(--mint);
}
.card__i svg { width: 24px; height: 24px; }

.grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ══ Тарифы ══ */
.plan { text-align: left; }
.plan__price { font: 400 40px/1 'Tenor Sans', Georgia, serif; color: #fff; margin: .4rem 0; }
.plan__price span { font-size: 15px; color: var(--fg-2); letter-spacing: 0; }
.plan ul { list-style: none; margin: 1.2rem 0 1.6rem; }
.plan li { font-size: 14px; color: var(--fg-2); padding: .42rem 0 .42rem 1.5rem; position: relative; }
.plan li::before {
	content: ''; position: absolute; left: 0; top: .95em; width: 7px; height: 7px;
	border-radius: 50%; background: var(--green); opacity: .8;
}
.plan .btn { width: 100%; }

/* Калькулятор */
.calc { display: grid; gap: 1.4rem; }
.calc__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.calc__btn {
	width: 44px; height: 44px; border-radius: var(--r-sm); border: 1px solid var(--line);
	background: #ffffff09; color: var(--fg); font-size: 20px; cursor: pointer;
	transition: all var(--fast);
}
.calc__btn:hover:not(:disabled) { background: #ffffff14; border-color: var(--line-2); }
.calc__btn:disabled { opacity: .35; cursor: default; }
.calc__n { font: 400 34px/1 'Tenor Sans', Georgia, serif; color: #fff; min-width: 2ch; text-align: center; }
.calc__out { font: 400 44px/1 'Tenor Sans', Georgia, serif; color: #fff; }
.calc__out span { font-size: 15px; color: var(--fg-2); font-family: 'Ruda', sans-serif; }
.calc__formula { font-size: 13px; color: var(--fg-4); }

/* ══ Таблица ══ */
.tw { overflow-x: auto; border: 1px solid var(--line-3); border-radius: var(--r); }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 520px; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line-3); }
th { color: var(--fg); font-weight: 500; background: #ffffff08; }
tr:last-child td { border-bottom: 0; }
td { color: var(--fg-2); }

/* ══ Аккордеон ══ */
.acc { border: 1px solid var(--line-3); border-radius: var(--r); overflow: hidden; }
.acc__i + .acc__i { border-top: 1px solid var(--line-3); }
.acc__q {
	width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
	padding: 18px 20px; background: none; border: 0; cursor: pointer;
	font: 500 15px/1.45 'Ruda', sans-serif; color: var(--fg); text-align: left;
}
.acc__q::after {
	content: '+'; font-size: 20px; line-height: 1; color: var(--green-2); flex: none;
	transition: transform var(--fast);
}
.acc__i.is-open .acc__q::after { transform: rotate(45deg); }
.acc__a { display: none; padding: 0 20px 20px; font-size: 14px; }
.acc__i.is-open .acc__a { display: block; }

/* ══ Отзывы ══ */
.rev__top { display: flex; align-items: center; gap: 12px; margin-bottom: .9rem; }
.rev__ava {
	width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center;
	background: #ffffff0d; border: 1px solid var(--line); color: var(--mint);
	font: 500 14px/1 'Ruda', sans-serif;
}
.rev__n { font-size: 14px; color: var(--fg); font-weight: 500; }
.rev__s { font-size: 12px; color: var(--fg-4); }
.stars { display: inline-flex; gap: 2px; color: var(--green-2); }
.stars svg { width: 14px; height: 14px; }

/* ══ Подвал ══ */
.foot { border-top: 1px solid #ffffff12; padding: 40px 0 28px; margin-top: auto; position: relative; z-index: 1; }
.foot__g { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .foot__g { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-4); font-weight: 500; margin-bottom: .9rem; }
/* Ссылки-пункты подвала — блочные, но КНОПКА под это правило попадать
   не должна: display:block растягивал её на всю колонку, а padding .28rem
   сплющивал в полоску с текстом у левого края. Кнопка в подвале —
   такая же кнопка, как везде. */
.foot a:not(.btn) { display: block; font-size: 13px; color: var(--fg-2); padding: .28rem 0; transition: color var(--fast); }
.foot a:not(.btn):hover { color: var(--fg); }
.foot .btn { display: inline-flex; width: auto; }
.foot__b { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line-3); }
.foot__b p { font-size: 11px; color: #ffffff33; line-height: 1.7; }

/* ══ Всплытие блоков и текста ══ */
.js .up { opacity: 0; transform: translateY(24px); }
.js .up.is-in {
	opacity: 1; transform: none;
	transition: opacity .6s var(--ease), transform .6s var(--ease);
	transition-delay: var(--d, 0ms);
}
@media (prefers-reduced-motion: reduce) {
	.js .up { opacity: 1; transform: none; }
}

/* ══ Мелочи ══ */
.note {
	border-left: 2px solid #358d6759; padding: 2px 0 2px 16px; margin: 1.4rem 0;
	font-size: 14px; color: var(--fg-2);
}
.list { list-style: none; }
.list li { font-size: 15px; color: var(--fg-2); padding: .45rem 0 .45rem 1.6rem; position: relative; }
.list li::before {
	content: ''; position: absolute; left: 0; top: 1em; width: 7px; height: 7px;
	border-radius: 50%; background: var(--green); opacity: .8;
}
.prose h2 { margin: 2.4rem 0 1rem; }
.prose h3 { margin: 1.8rem 0 .6rem; }
.prose p + h2, .prose ul + h2 { margin-top: 2.8rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 520px) {
	.card { padding: 1.5rem 1.4rem 1.8rem; }
	.btn { padding: .8rem 1.7rem; font-size: 14px; }
	.open { min-height: 0; padding: calc(var(--head) + 48px) 0 56px; }
	.sec { padding: 56px 0; }
}

/* ══ Иллюстрации ══
   Пропорция задана контейнером, кадр режется по центру — значит,
   сюжет в промтах должен жить в средней трети, а не по краям. */
.art {
	margin: 2rem 0 0;
	border: 1px solid var(--line-3);
	border-radius: var(--r);
	overflow: hidden;
	background: linear-gradient(170deg, #ffffff0b, #ffffff03);
}
.art img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 9; }
.art--sq img { aspect-ratio: 4 / 3; }
.art--wide img { aspect-ratio: 21 / 9; }
@media (max-width: 520px) { .art img { aspect-ratio: 4 / 3; } }