/*
 * sosproxyvpn.com — единственное место стилей. Инлайн-style запрещён CSP (style-src 'self').
 * Светлая чистая палитра в голубо-синих тонах (близко к Telegram по ощущению), бренд — Proxy MTProto · VPN.
 * Mobile-first: 640 px — планшет, 900 px — десктоп. Анимация — только transform/opacity и только без reduced-motion.
 */

:root {
  --font-sans: 'Onest', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: -apple-system, 'SF Pro Text', Roboto, 'Segoe UI', sans-serif;
  --bg: #FFFFFF;
  --bg-soft: #F2F7FC;
  --tint: #E8F3FD;
  --tint-2: #D6EAFB;
  --surface: #FFFFFF;
  --text: #0F1C2E;
  --text-2: #2E3D50;
  --muted: #56667A;
  --accent: #1A74CB;
  --accent-hover: #155FA8;
  --brand: #2A8FE6;
  --brand-2: #4DB3F6;
  --line: #E1EAF3;
  --line-2: #EDF2F8;
  --border: #CBDBEB;
  --ok: #138A47;
  --band: linear-gradient(135deg, #2F98EC 0%, #1A6FC4 100%);
  --r-btn: 12px;
  --r-card: 20px;
  --r-big: 28px;
  --tap: 44px;
  --container: 1200px;
  --dur-fast: .15s;
  --dur-base: .25s;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --shadow: 0 1px 2px rgba(15, 40, 80, .06), 0 8px 24px -12px rgba(15, 40, 80, .18);
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

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

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

button { font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.band :focus-visible,
.cta-panel :focus-visible { outline-color: #FFFFFF; }

[hidden] { display: none !important; }

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 60;
  padding: 12px 16px;
  border-radius: var(--r-btn);
  background: #FFFFFF;
  color: var(--text);
  box-shadow: var(--shadow);
}
.skip:focus { top: 8px; }

.wrap {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 16px;
}

/* ---------- кнопки, ссылки, метки ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn svg { flex: none; }
.btn--block { display: flex; width: 100%; }
.btn--main { background: var(--accent); color: #FFFFFF; }
.btn--main:hover { background: var(--accent-hover); color: #FFFFFF; }
.btn--soft { background: var(--tint); color: var(--accent); }
.btn--soft:hover { background: var(--tint-2); color: var(--accent-hover); }
.btn--white { background: #FFFFFF; color: var(--accent); }
.btn--white:hover { background: var(--tint); color: var(--accent-hover); }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: #FFFFFF;
  color: var(--text);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.chip svg { flex: none; color: var(--accent); }
.chip--soft { border-color: transparent; background: var(--tint); color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.ticks { display: flex; flex-direction: column; gap: 8px; }
.ticks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.ticks svg { flex: none; margin-top: 2px; color: var(--brand); }

.num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 700;
}

/* ---------- шапка ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .94);
}
.hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.brand:hover { color: var(--text); text-decoration: none; }
.brand__mark { flex: none; width: 34px; height: 34px; }
.brand__name { font-size: 20px; font-weight: 700; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.brand__name i { margin: 0 .2em; font-style: normal; color: var(--accent); }
.brand__name b { font-weight: 700; color: var(--accent); }
.hdr__nav,
.hdr__cta { display: none; }
.hdr__nav a { padding: 8px 0; color: var(--text-2); font-size: 15px; font-weight: 500; }
.hdr__nav a:hover,
.hdr__nav a[aria-current="page"] { color: var(--accent); text-decoration: none; }

.menu { position: relative; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: min(300px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFFFFF;
  box-shadow: var(--shadow);
}
.menu__panel a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: var(--r-btn);
  color: var(--text);
}
.menu__panel a:not(.btn):hover { background: var(--bg-soft); text-decoration: none; }
.menu__panel .btn { margin-top: 6px; }
.menu__group { padding: 6px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.menu__h { display: block; padding: 4px 14px; color: var(--text-2); font-size: 13px; font-weight: 600; }
.menu__sub { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* Выпадающий список в меню шапки («Инструкции»). */
.ddn { position: relative; }
.ddn summary { list-style: none; }
.ddn summary::-webkit-details-marker { display: none; }
.ddn__btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 0; color: var(--text-2); font-size: 15px; font-weight: 500; cursor: pointer; }
.ddn__btn svg { transform: rotate(90deg); transition: transform var(--dur-base, .2s); }
.ddn[open] .ddn__btn svg { transform: rotate(-90deg); }
.ddn__btn:hover,
.ddn__btn[data-current] { color: var(--accent); }
.ddn__panel {
  position: absolute;
  left: -14px;
  top: calc(100% + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFFFFF;
  box-shadow: var(--shadow);
}
.hdr__nav .ddn__panel a { display: flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-btn); color: var(--text); }
.hdr__nav .ddn__panel a:hover { background: var(--bg-soft); }
.hdr__nav .ddn__panel a[aria-current="page"] { color: var(--accent); }

/* Переключатель языков: в шапке — от 900 px, на телефоне — ссылками в меню. */
.langs { position: relative; display: none; }
.langs summary { list-style: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: #FFFFFF;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.langs__btn svg { width: 18px; height: 18px; }
.langs__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFFFFF;
  box-shadow: var(--shadow);
}
.langs__panel a,
.menu__langs a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: var(--r-btn);
  color: var(--text);
}
.langs__panel a:hover,
.menu__langs a:hover { background: var(--bg-soft); text-decoration: none; }
.langs__panel a[aria-current],
.menu__langs a[aria-current] { color: var(--accent); font-weight: 600; }
.flag { flex: none; width: 16px; height: 12px; margin-right: 8px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(15, 28, 46, .12); }
[dir="rtl"] .flag { margin-right: 0; margin-left: 8px; }
.menu__langs { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.menu__langs a { min-height: 40px; padding: 0 12px; }

/* «бот на русском и английском» — рядом с кнопкой в бота, на языках, которых нет у бота. */
.botlang { display: block; flex-basis: 100%; margin-top: 6px; color: var(--text-2); font-size: 13px; line-height: 1.4; }
/* В ряду кнопок подпись уходит под весь ряд, а не разрывает его. */
.hero__cta .botlang { order: 1; margin-top: 0; }
.band .botlang { color: rgba(255, 255, 255, .85); }
.hdr .botlang { margin: 2px 0 0; text-align: center; }

/* ---------- подвал ---------- */

.foot {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 14px;
  color: var(--muted);
}
.foot__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding: 36px 0 28px; }
.foot__about { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot__about p { max-width: 420px; line-height: 1.5; }
.foot__col { display: flex; flex-direction: column; gap: 8px; }
.foot__col b { margin-bottom: 2px; color: var(--text); font-size: 14px; font-weight: 600; }
.foot__col a { color: var(--text-2); }
.foot__col a:hover { color: var(--accent); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px 0 28px; border-top: 1px solid var(--line); }

/* ---------- первый экран главной ---------- */

.hero {
  overflow: hidden;
  background: linear-gradient(180deg, #E6F2FD 0%, #F4F9FE 62%, #FFFFFF 100%);
}
.hero__in { display: grid; gap: 28px; padding-top: 28px; }
.hero__txt { display: flex; flex-direction: column; gap: 18px; }
.h1 {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.hero__lead { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__cta .btn { flex: 1 1 200px; }
.hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 4px; }
.hero__facts li { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; color: var(--muted); }
.hero__facts b { color: var(--text); font-size: 15px; font-weight: 700; }
.hero__art { position: relative; width: 100%; max-width: 460px; height: 400px; margin: 0 auto; overflow: hidden; }
.hero__art .shot { max-width: 250px; margin: 0 0 0 auto; }
.hero__owl { position: absolute; left: 0; bottom: 0; width: 112px; z-index: 2; }

/* ---------- секции ---------- */

.sec { padding: 48px 0 0; }
.sec--tint { margin-top: 48px; padding-bottom: 48px; background: var(--bg-soft); }
.sec--first { padding-top: 24px; }
.sec__head { max-width: 760px; margin-bottom: 24px; }
.h2 {
  font-size: 27px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.sec__lead { margin-top: 10px; font-size: 16px; line-height: 1.55; color: var(--muted); }
.h2--sm { font-size: 21px; letter-spacing: -.01em; margin-bottom: 12px; }
.h2--md { font-size: 24px; margin-bottom: 16px; }
.head-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; }

/* ---------- блок подключения прокси (контракт — public/js/connect.js) ---------- */

.proxy {
  scroll-margin-top: 84px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-big);
  background: #FFFFFF;
  box-shadow: var(--shadow);
}
.proxy [data-state] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.proxy__types { display: grid; gap: 12px; min-width: 0; }
.ptype {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--tint);
}
.ptype--web { background: var(--bg-soft); box-shadow: inset 0 0 0 1px var(--line); }
.ptype__head { display: flex; align-items: flex-start; gap: 12px; }
.ptype__head > div { flex: 1; min-width: 0; }
.ptype__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--accent);
  color: #FFFFFF;
}
.ptype--web .ptype__ico { background: #FFFFFF; color: var(--accent); box-shadow: inset 0 0 0 1px var(--border); }
.ptype h3 { font-size: 18px; line-height: 1.25; font-weight: 700; }
.ptype__sub { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--muted); }
.ptype__tag {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: #FFFFFF;
  color: var(--ok);
  font-size: 13px;
  font-weight: 600;
}
.ptype__txt { font-size: 15px; line-height: 1.5; color: var(--text-2); }

.proxy__btns { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.pbtn {
  flex: 1 1 140px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: #FFFFFF;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.pbtn:hover { border-color: var(--accent); color: var(--accent-hover); text-decoration: none; }
.pbtn svg { flex: none; }
.pbtn--main { flex-basis: 100%; border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.pbtn--main:hover { border-color: var(--accent-hover); background: var(--accent-hover); color: #FFFFFF; }
.pbtn--line { flex: none; align-self: flex-start; max-width: 100%; }
.pbtn--qr { flex: 0 1 auto; }
.pbtn[data-action="copy"],
.pbtn[data-action="copy-web"] { flex-basis: 210px; }
.proxy__qrpanel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  background: #FFFFFF;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.proxy__qr {
  flex: none;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line);
}
.proxy__qr svg { display: block; width: 112px; height: 112px; }
.proxy__qrbox { display: none; }
.proxy__soon { display: none; font-size: 14px; color: var(--muted); }
.proxy[data-unconfigured] .proxy__soon { display: block; }

/* компактный вариант: платформы, сценарии, статьи */
.proxy--compact { padding: 16px; border-radius: var(--r-card); background: var(--tint); border-color: var(--tint-2); box-shadow: none; }
.proxy--compact [data-state] { gap: 12px; }
.pc__head { display: flex; align-items: center; gap: 12px; }
.pc__head p { display: flex; flex-direction: column; min-width: 0; }
.pc__head b { font-size: 16px; line-height: 1.3; font-weight: 700; }
.pc__head small { font-size: 13px; color: var(--muted); }
.pc__web { display: flex; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.pc__web svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
.pc__web a { font-weight: 600; }
.proxy--compact .pbtn--qr { flex: 0 1 auto; }

/* телефон: QR — квадратная кнопка со значком, подпись остаётся для чтения с экрана */
@media (max-width: 639.98px) {
  .pbtn--qr,
  .proxy--compact .pbtn--qr { flex: 0 0 48px; padding: 0; }
  .pbtn--qr span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ptype__tag { display: none; }
  .pbtn--line { align-self: stretch; }
}

.next__title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.next__title svg { color: var(--ok); }
.next__card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #FFFFFF;
  color: var(--text);
}
.next__card:hover { border-color: var(--accent); color: var(--text); text-decoration: none; }
.next__card span { display: flex; flex-direction: column; gap: 2px; }
.next__card b { font-size: 15px; font-weight: 600; }
.next__card small { font-size: 14px; color: var(--accent); }
.next__card svg { flex: none; color: var(--accent); }
.next__back {
  align-self: flex-start;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- три способа ---------- */

.ways { display: flex; flex-direction: column; gap: 40px; }
.way { display: grid; gap: 20px; align-items: center; }
.way__txt { display: flex; flex-direction: column; gap: 14px; }
.way h3 { font-size: 23px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.way__txt > p { color: var(--text-2); }
.way__shot {
  display: flex;
  justify-content: center;
  height: 400px;
  padding: 28px 20px 0;
  overflow: hidden;
  border-radius: var(--r-big);
  background: linear-gradient(160deg, #E3F1FD, #CFE5FA);
}
.way__shot .shot--phone { max-width: 270px; }
.way--webproxy .way__shot { height: auto; align-items: center; padding: 28px 16px; }
/* главное на экране внизу (окно «Прокси-сервер») — показываем низ телефона */
.way__shot:has(.sheet),
.pagehead__shot:has(.sheet) { align-items: flex-end; padding-top: 0; padding-bottom: 0; }
.ostep .shot:has(.sheet) { display: flex; align-items: flex-end; }

/* ---------- инструкции по ОС (радиокнопки + CSS) ---------- */

.os { position: relative; }
.os__radio { position: absolute; opacity: 0; pointer-events: none; }
.os__tabs {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line);
}
.os__tab {
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
}
.os__tab:hover { color: var(--accent); }
#os-ios:checked ~ .os__tabs .os__tab--ios,
#os-and:checked ~ .os__tabs .os__tab--and,
#os-pc:checked ~ .os__tabs .os__tab--pc { background: var(--accent); color: #FFFFFF; }
#os-ios:focus-visible ~ .os__tabs .os__tab--ios,
#os-and:focus-visible ~ .os__tabs .os__tab--and,
#os-pc:focus-visible ~ .os__tabs .os__tab--pc { outline: 2px solid var(--accent); outline-offset: 2px; }
.os__panel { display: none; }
#os-ios:checked ~ .os__panel--ios,
#os-and:checked ~ .os__panel--and,
#os-pc:checked ~ .os__panel--pc { display: block; }

.osteps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 78%);
  gap: 12px;
  margin: 0 -16px;
  padding: 0 16px 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
}
.ostep {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 16px 18px;
  border-radius: var(--r-card);
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--line);
  scroll-snap-align: start;
}
.ostep .shot { height: 300px; overflow: hidden; }
.ostep .shot--phone { max-width: 210px; margin: 0 auto; }
.ostep .shot--wide { display: flex; align-items: center; }
.ostep__txt { display: flex; gap: 12px; }
.ostep h3 { font-size: 16px; line-height: 1.3; font-weight: 700; }
.ostep p { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.os__panel .more { margin-top: 16px; }

.devices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* ---------- сравнение, таблицы ---------- */

.tablewrap {
  overflow-x: auto;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #FFFFFF;
}
.tablewrap table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.tablewrap th,
.tablewrap td { padding: 12px 14px; text-align: left; vertical-align: top; }
.tablewrap thead th { background: var(--bg-soft); font-weight: 700; }
.tablewrap td,
.tablewrap tbody th { border-top: 1px solid var(--line-2); }
.cmp table { min-width: 640px; }
.cmp tbody th { width: 22%; font-weight: 600; color: var(--muted); }
.cmp thead th:last-child,
.cmp td:last-child { background: var(--tint); }
.cmp thead th:last-child { color: var(--accent); }

/* ---------- вопросы и ответы ---------- */

.faq { display: grid; gap: 16px; }
.faq__head { position: relative; }
.faq__lead { margin-top: 8px; color: var(--muted); }
.faq .mascot--help { display: none; }
.faq__item { border-top: 1px solid var(--line); }
.faq__item:last-child { border-bottom: 1px solid var(--line); }
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--tap);
  padding: 16px 0;
  list-style: none;
  cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__q { font-size: 16px; line-height: 1.4; font-weight: 600; }
.faq__item svg { flex: none; margin-top: 4px; color: var(--accent); }
.faq__item[open] .faq__v { display: none; }
.faq__a { max-width: 680px; padding: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.faq--inner {
  display: block;
  margin-top: 32px;
  padding: 20px 16px 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}
.faq--inner .h2,
.faq--inner > h2 { margin-bottom: 8px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.faq--inner .faq__item:last-child { border-bottom: 0; }

/* ---------- карточки статей и обложки ---------- */

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFFFFF;
  color: var(--text);
}
.card:hover { border-color: var(--border); color: var(--text); text-decoration: none; }
.card:hover .card__title { color: var(--accent); }
.cover,
.article-cover,
.row-card__thumb { position: relative; overflow: hidden; background: var(--tint); }
.cover { aspect-ratio: 16 / 9; }
.cover__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 16px 18px 20px; }
.card__meta { font-size: 13px; font-weight: 600; color: var(--accent); }
.card__title { margin-top: 6px; font-size: 18px; line-height: 1.3; font-weight: 700; }

.row-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFFFFF;
  color: var(--text);
}
.row-card:hover { border-color: var(--border); color: var(--text); text-decoration: none; }
.row-card:hover .row-card__title { color: var(--accent); }
.row-card__thumb { flex: none; width: 112px; aspect-ratio: 16 / 9; border-radius: 12px; }
.row-card__body { min-width: 0; }
.row-card__meta { font-size: 12px; font-weight: 600; color: var(--accent); }
.row-card__title { margin-top: 2px; font-size: 16px; line-height: 1.3; font-weight: 700; }
.row-card--sm .row-card__title { font-size: 15px; }
.list-stack { display: flex; flex-direction: column; gap: 10px; }

/* ---------- призыв в бота ---------- */

.band {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 20px;
  border-radius: var(--r-big);
  background: var(--band);
  color: #FFFFFF;
}
.band .band__owl { display: none; }
.band__txt h2 { font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.band__txt p { margin-top: 8px; color: rgba(255, 255, 255, .92); }

.cta-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: 28px;
  padding: 22px 20px;
  border-radius: var(--r-card);
  background: var(--band);
  color: #FFFFFF;
}
.cta-panel h2 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.cta-panel p { margin-top: 4px; font-size: 15px; color: rgba(255, 255, 255, .92); }

/* ---------- внутренние страницы ---------- */

.crumbs { padding: 16px 0 0; font-size: 13px; color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 2px 6px; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--border); }

.pagehead { padding: 14px 0 0; }
.pagehead--split { display: grid; gap: 24px; }
.pagehead__txt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pagehead__lead { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.pagehead__shot {
  display: flex;
  justify-content: center;
  height: 380px;
  padding: 24px 16px 0;
  overflow: hidden;
  border-radius: var(--r-big);
  background: linear-gradient(160deg, #E3F1FD, #CFE5FA);
}
.pagehead__shot .shot--phone { max-width: 260px; }
.pagehead__shot:has(.shot--wide),
.pagehead__shot:has(.shot--tv) { height: auto; align-items: center; padding: 24px 16px; }
.h1--page {
  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.meta { font-size: 13px; color: var(--muted); }

.panel {
  margin-top: 24px;
  padding: 20px 16px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: #FFFFFF;
}
.rows > div { padding: 12px 0; border-top: 1px solid var(--line-2); }
.dash li { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 15px; }
.dash li span { color: var(--accent); }

.cols { display: grid; grid-template-columns: minmax(0, 1fr); }
.cols__steps { padding: 32px 0 0; }
.isteps { display: grid; gap: 12px; align-items: start; }
.istep { display: flex; flex-direction: column; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-card); }
.istep__head { display: flex; gap: 12px; align-items: flex-start; }
.istep h3 { margin-bottom: 2px; font-size: 17px; line-height: 1.35; font-weight: 700; }
.istep p { font-size: 15px; line-height: 1.5; color: var(--muted); }
/* экран шага — верх телефона на голубой подложке, внизу обрезан */
.istep .shot { margin-top: auto; }
.istep .shot--phone { max-width: none; height: 300px; overflow: hidden; padding: 20px 20px 0; border-radius: 16px; background: linear-gradient(160deg, #E3F1FD, #CFE5FA); }
.istep .shot--phone .dev { --dev-max: 7.4px; }
.istep .shot--phone:has(.alert),
.istep .shot--phone:has(.adlg) { display: flex; align-items: center; }
.istep .shot--wide,
.istep .shot--tv { max-width: none; padding: 20px 16px; border-radius: 16px; background: linear-gradient(160deg, #E3F1FD, #CFE5FA); }
.err h3 { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.err p { font-size: 14px; line-height: 1.5; color: var(--muted); }

.after { padding: 28px 0 0; }
.after .h3 { margin: 28px 0 12px; font-size: 18px; font-weight: 700; }
.after .chips + .btn { margin-top: 24px; }

.lead { font-size: 17px; line-height: 1.5; color: var(--text-2); }
.prose p { margin-bottom: 12px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.prose p:last-child { margin-bottom: 0; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }
.how > li { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line-2); font-size: 15px; line-height: 1.5; }
.how + .chips { margin-top: 8px; }
.troubles { display: grid; gap: 10px; }
.trouble { padding: 16px; border-radius: 16px; background: var(--bg-soft); }
.trouble h3 { margin-bottom: 4px; font-size: 15px; font-weight: 700; }
.trouble p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.stack-top { padding: 32px 0 0; }

.rowlink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin-top: 20px;
  padding: 10px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  color: var(--text);
  font-weight: 500;
}
.rowlink:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.rowlink svg { flex: none; color: var(--accent); }

.longtext { margin-top: 32px; }
.longtext h2 { margin: 28px 0 10px; font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
.longtext h2:first-child { margin-top: 0; }
.longtext h3 { margin: 18px 0 6px; font-size: 17px; font-weight: 700; }
.longtext p,
.longtext li { margin-bottom: 10px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.longtext ul,
.longtext ol,
.article ul,
.article ol { margin: 0 0 14px; padding-left: 22px; }
.longtext ul,
.article ul { list-style: disc; }
.longtext ol,
.article ol { list-style: decimal; }
.longtext a,
.article a { text-decoration: underline; text-underline-offset: 3px; }
.longtext strong,
.article strong { font-weight: 600; color: var(--text); }

.latest { margin-top: 36px; }
.latest h2 { margin: 0 0 12px; font-size: 21px; font-weight: 700; }
.latest .list-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* документы */
.doclist { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: #FFFFFF; }
.doclist a { display: flex; align-items: center; gap: 12px; padding: 16px; border-bottom: 1px solid var(--line-2); color: var(--text); }
.doclist a:last-child { border-bottom: 0; }
.doclist a:hover { background: var(--bg-soft); text-decoration: none; }
.doclist a[aria-current="page"] { background: var(--tint); }
.doclist span { flex: 1; }
.doclist b { display: block; font-size: 15px; font-weight: 600; }
.doclist small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.doclist svg { color: var(--accent); }
.doc { margin-top: 20px; padding: 22px 16px; border: 1px solid var(--line); border-radius: var(--r-card); }
.kicker { margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--accent); }
.doc__title { margin-bottom: 6px; font-size: 22px; line-height: 1.25; font-weight: 700; }
.doc__meta { margin-bottom: 18px; font-size: 13px; color: var(--muted); }
.toc { padding: 14px 16px; border-radius: var(--r-btn); background: var(--bg-soft); font-size: 14px; line-height: 1.9; }
.toc b { display: block; margin-bottom: 4px; }
.toc a { display: block; }
.doc h3 { margin: 24px 0 8px; font-size: 17px; font-weight: 700; }
.doc p { margin-bottom: 10px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.doc__foot { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-2); font-size: 14px; }

/* блог */
.filters { display: flex; gap: 8px; margin: 16px -16px 0; padding: 0 16px 4px; overflow-x: auto; }
.pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}
.pill:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pill[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: #FFFFFF; }
.feed { display: flex; flex-direction: column; gap: 12px; padding-top: 18px; }
.feed__main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  color: var(--text);
}
.feed__main:hover { border-color: var(--border); color: var(--text); text-decoration: none; }
.feed__main:hover .feed__title { color: var(--accent); }
.feed__body { padding: 18px; }
.feed__meta { font-size: 13px; font-weight: 600; color: var(--accent); }
.feed__title { margin: 6px 0; font-size: 21px; line-height: 1.25; font-weight: 700; }
.feed__text { font-size: 15px; line-height: 1.55; color: var(--muted); }

/* статья */
.byline { display: flex; align-items: center; gap: 10px; margin: 6px 0 16px; }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; }
.byline__txt { font-size: 13px; line-height: 1.4; }
.byline__txt a { font-weight: 600; color: var(--text); }
.byline__txt div { color: var(--muted); }
.article-cover { aspect-ratio: 16 / 9; margin-top: 20px; border-radius: var(--r-card); }
.tocbox { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-card); }
.tocbox summary { display: flex; align-items: center; justify-content: space-between; min-height: 28px; font-weight: 700; list-style: none; cursor: pointer; }
.tocbox summary::-webkit-details-marker { display: none; }
.tocbox summary svg { color: var(--accent); }
.tocbox[open] .faq__v { display: none; }
.tocbox ol { margin-top: 10px; padding-left: 20px; list-style: decimal; font-size: 15px; line-height: 1.8; }
.article { padding-top: 8px; font-size: 17px; line-height: 1.7; color: var(--text-2); }
.article h2 { margin: 32px 0 10px; font-size: 23px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; color: var(--text); }
.article h3 { margin: 22px 0 6px; font-size: 18px; font-weight: 700; color: var(--text); }
.article p { margin-bottom: 14px; }
.article li { margin-bottom: 6px; }
.article code { padding: 1px 6px; border-radius: 6px; background: var(--tint); font-family: ui-monospace, Menlo, monospace; font-size: .9em; color: var(--accent); }
.article .faq--inner { margin-top: 32px; }
.article .faq--inner .faq__a { font-size: 15px; }
.callout { margin: 18px 0; padding: 16px; border-radius: 16px; background: var(--tint); box-shadow: inset 3px 0 0 var(--brand); }
.callout--tip { background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--ok); }
.callout b { display: block; margin-bottom: 4px; font-size: 14px; font-weight: 700; color: var(--accent); }
.callout--tip b { color: var(--ok); }
.callout p { margin: 0; font-size: 15px; line-height: 1.6; }
.art-col > .proxy--compact { margin-top: 24px; }
.related { padding: 32px 0 0; }
.related h2 { margin: 0 0 12px; font-size: 21px; font-weight: 700; }

/* редакция */
.author { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 16px; padding: 22px 16px; border: 1px solid var(--line); border-radius: var(--r-card); }
.author .avatar { width: 88px; height: 88px; border-radius: 24px; }
.author h1 { margin-bottom: 4px; font-size: 27px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.author__role { font-size: 14px; color: var(--accent); }
.author__bio { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.list-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; }
.list-head h2 { font-size: 21px; font-weight: 700; }
.list-head span { font-size: 13px; color: var(--muted); }
.editorial { margin-top: 20px; }
.editorial h2 { margin: 24px 0 8px; font-size: 21px; font-weight: 700; }
.editorial h2:first-child { margin-top: 0; }
.editorial p,
.editorial li { margin-bottom: 10px; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.editorial ul { padding-left: 22px; list-style: disc; }

.notfound { padding-top: 40px; padding-bottom: 24px; }
.notfound p { margin: 12px 0 24px; font-size: 17px; color: var(--text-2); }

/* ---------- маскот ---------- */

.mascot { display: block; height: auto; max-width: none; }
.mascot--empty { width: 200px; margin-bottom: 16px; }

/* ---------- экраны продукта (src/pages/art.ts) ---------- */

.shot { container-type: inline-size; width: 100%; max-width: 300px; }
.shot--wide,
.shot--tv { max-width: 640px; }
.shot--scheme { max-width: 520px; }
.shot--scheme svg { display: block; width: 100%; height: auto; }

.dev {
  --dev-max: 10px;
  margin: 0 auto;
  color: #000000;
  font-family: var(--font-ui);
  line-height: 1.3;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.dev--ios,
.dev--and {
  position: relative;
  width: 30em;
  height: 62em;
  padding: .85em;
  font-size: min(var(--dev-max), 100cqw / 30);
  border-radius: 4.8em;
  background: #1C2028;
  box-shadow: inset 0 0 0 .22em #4A5262, 0 2.4em 4em -2em rgba(15, 45, 90, .45);
}
.dev--and { border-radius: 3.4em; }
.dev__scr {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 3.95em;
  background: #FFFFFF;
}
.dev--and .dev__scr { border-radius: 2.6em; }
.dev__scr:has(.tg) { background: #F6F6F6; }
.dev__scr:has(.set) { background: #F2F2F7; }
.dev__scr:has(.cl) { background: #F5F8FC; }
.dev__island { position: absolute; top: 1.05em; left: 50%; z-index: 6; width: 8.6em; height: 2.6em; margin-left: -4.3em; border-radius: 2em; background: #000000; }
.dev__cam { position: absolute; top: 1.2em; left: 50%; z-index: 6; width: 1.7em; height: 1.7em; margin-left: -.85em; border-radius: 50%; background: #000000; }
.dev__home { position: absolute; bottom: .75em; left: 50%; z-index: 6; width: 11em; height: .45em; margin-left: -5.5em; border-radius: 1em; background: #000000; }

.sb { flex: none; display: flex; align-items: center; justify-content: space-between; height: 4.7em; padding: .6em 2.4em 0 3.4em; }
.sb b { font-size: 1.5em; font-weight: 600; }
.sb__r { display: flex; align-items: center; gap: .5em; }
.sb__r svg { width: 1.8em; height: 1.2em; }
.sb__r svg + svg { width: 2.6em; }
.sb__vpn { padding: 0 .25em; border-radius: .3em; background: #1C1C1E; color: #FFFFFF; font-size: .9em; font-style: normal; font-weight: 700; }
.sb__r { gap: .35em; }
.dev--ios .sb { padding-right: 2em; }
.sb--and { height: 3.8em; padding: .4em 2.2em 0 2.6em; }
.sb--and b { font-size: 1.3em; font-weight: 500; }
.sb--and .sb__r svg { width: 1.5em; height: 1.5em; }

/* Telegram: чат */
.tg { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tg__head {
  flex: none;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: .3em 1.2em .9em;
  border-bottom: .1em solid #D9D9DE;
}
.tg__back { display: flex; align-items: center; gap: .1em; color: #007AFF; font-size: 1.55em; }
.tg__back svg { width: 1.1em; height: 1.1em; }
.tg__who { text-align: center; }
.tg__who b { display: block; font-size: 1.55em; font-weight: 600; }
.tg__who small { font-size: 1.2em; color: #8E8E93; }
.tg__ava { justify-self: end; width: 3.7em; height: 3.7em; border-radius: 50%; object-fit: cover; }
.tg__chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .55em;
  min-height: 0;
  overflow: hidden;
  padding: 1em 1em 1.1em;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .45) 0 12%, transparent 40%),
    radial-gradient(circle at 85% 65%, rgba(140, 190, 235, .55) 0 10%, transparent 45%),
    linear-gradient(160deg, #D7EAF8 0%, #B9D7EF 55%, #A2C6E6 100%);
}
.tg__date { align-self: center; margin-bottom: auto; padding: .15em .75em; border-radius: 1em; background: rgba(43, 86, 128, .3); color: #FFFFFF; font-size: 1.2em; font-weight: 500; }
.bub { position: relative; max-width: 84%; padding: .5em .8em .45em; border-radius: 1.2em; font-size: 1.38em; line-height: 1.32; }
.bub--out { align-self: flex-end; border-bottom-right-radius: .35em; background: #E2FFC8; }
.bub--in { align-self: flex-start; border-bottom-left-radius: .35em; background: #FFFFFF; }
.bub p + p { margin-top: .4em; }
.bub b { font-weight: 600; }
.bub code { display: block; margin: .35em 0; padding: .3em .45em; border-radius: .45em; background: #EAF2FB; color: #1A73C9; font: .9em/1.3 ui-monospace, Menlo, monospace; word-break: break-all; }
.bub__meta { float: right; display: inline-flex; align-items: center; gap: .15em; margin: .45em 0 -.2em .6em; color: #8E8E93; font-size: .75em; }
.bub--out .bub__meta { color: #4FAE4E; }
.bub__meta svg { width: 1.3em; height: 1.3em; }
.ikb { align-self: flex-start; display: flex; flex-direction: column; gap: .35em; width: 84%; }
.ikb__row { display: flex; gap: .35em; }
.ikb__row span { flex: 1; padding: .6em .3em; border-radius: .8em; background: rgba(48, 92, 138, .4); color: #FFFFFF; font-size: 1.28em; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg__bar { flex: none; display: flex; align-items: center; gap: .6em; padding: .7em 1em 2.5em; border-top: .1em solid #D9D9DE; }
.tg__menu { padding: .35em .8em; border-radius: 1.2em; background: #3A95F0; color: #FFFFFF; font-size: 1.25em; font-weight: 600; }
.tg__field { flex: 1; min-width: 0; padding: .45em .8em; border: .08em solid #D9D9DE; border-radius: 1.6em; background: #FFFFFF; color: #A1A1A6; font-size: 1.35em; }
.tg__ic { flex: none; width: 2.2em; height: 2.2em; color: #8E8E93; }
.tg__ic svg { width: 100%; height: 100%; }

/* Telegram: окно «Прокси-сервер» */
.sheet { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; gap: .7em; padding: 0 .8em 2.3em; background: rgba(0, 0, 0, .38); }
.sheet__card { padding: 1.4em 1.4em 1.2em; border-radius: 1.4em; background: #FFFFFF; }
.sheet__t { display: block; margin-bottom: .6em; font-size: 1.6em; font-weight: 600; text-align: center; }
.sheet__dl div { display: flex; justify-content: space-between; gap: 1em; padding: .65em 0; border-top: .07em solid #E5E5EA; font-size: 1.35em; }
.sheet__dl dt { color: #8E8E93; }
.sheet__dl dd { font-weight: 500; }
.sheet__dl .ok { color: #1E9E4A; }
.sheet__btn { display: block; margin-top: .8em; padding: .8em; border-radius: .9em; background: #3390EC; color: #FFFFFF; font-size: 1.45em; font-weight: 600; text-align: center; }
.sheet__cancel { padding: .8em; border-radius: 1em; background: #FFFFFF; color: #007AFF; font-size: 1.55em; font-weight: 600; text-align: center; }

/* Telegram: настройки «Прокси» */
.set { flex: 1; padding: 0 1.2em; }
.set__nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: .2em 0 1.4em; }
.set__nav b { font-size: 1.55em; font-weight: 600; }
.set__edit { justify-self: end; color: #007AFF; font-size: 1.5em; }
.set__group { margin-bottom: 1.8em; overflow: hidden; border-radius: 1.1em; background: #FFFFFF; }
.set__row { display: flex; align-items: center; gap: .8em; min-height: 3.3em; padding: .5em .9em; font-size: 1.38em; }
.set__row + .set__row { border-top: .07em solid #E5E5EA; }
.tgl { position: relative; flex: none; width: 2.9em; height: 1.75em; margin-left: auto; border-radius: 1em; background: #E9E9EA; }
.tgl::after { content: ""; position: absolute; top: .12em; left: .12em; width: 1.5em; height: 1.5em; border-radius: 50%; background: #FFFFFF; box-shadow: 0 .1em .3em rgba(0, 0, 0, .2); }
.tgl--on { background: #34C759; }
.tgl--on::after { left: auto; right: .12em; }
.set__tick { flex: none; width: 1.2em; height: 1.2em; color: #007AFF; }
.set__tick svg { width: 100%; height: 100%; }
.set__px { display: flex; flex-direction: column; min-width: 0; }
.set__px b { overflow: hidden; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.set__px small { font-size: .8em; color: #8E8E93; }
.set__px .ok { color: #007AFF; }
.set__i { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; margin-left: auto; border: .08em solid #007AFF; border-radius: 50%; color: #007AFF; font-size: .85em; font-weight: 700; }
.set__add { color: #007AFF; }
.set__add svg { flex: none; width: 1.2em; height: 1.2em; margin-left: 1.3em; }
.set__cap { padding: 0 1em .5em; color: #6D6D72; font-size: 1.12em; text-transform: uppercase; }
.set__cap--foot { margin-top: -1.2em; text-transform: none; line-height: 1.35; }

/* окна на компьютере */
.dev--win {
  overflow: hidden;
  width: 64em;
  font-size: min(var(--dev-max), 100cqw / 64);
  border-radius: .9em;
  background: #FFFFFF;
  box-shadow: 0 0 0 .1em rgba(15, 30, 50, .14), 0 2.4em 4em -2em rgba(15, 45, 90, .4);
}
.dev--mac { border-radius: 1.2em; }
.win__bar { display: flex; align-items: center; justify-content: space-between; height: 3.4em; padding: 0 0 0 1.4em; border-bottom: .1em solid #E3E7ED; background: #F3F5F8; }
.dev--mac .win__bar { padding-right: 1.4em; }
.win__title { font-size: 1.3em; color: #3C4652; }
.dev--mac .win__title { font-weight: 600; }
.win__ctl { display: flex; height: 100%; }
.win__ctl i { display: grid; place-items: center; width: 3.4em; color: #4A5562; font-size: 1.25em; font-style: normal; }
.win__dots { display: flex; gap: .7em; }
.win__dots i { width: 1.25em; height: 1.25em; border-radius: 50%; background: #FF5F57; }
.win__dots i:nth-child(2) { background: #FEBC2E; }
.win__dots i:nth-child(3) { background: #28C840; }
.win__body { position: relative; display: flex; height: 34em; }

.tdp {
  flex: 1;
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(10, 20, 35, .45), rgba(10, 20, 35, .45)),
    linear-gradient(90deg, #FFFFFF 0 30%, #E4EEF7 30% 30.2%, #C6DDF1 30.2%);
}
.tdp__box { width: 36em; padding: 1.8em 2em 1.4em; border-radius: .9em; background: #FFFFFF; box-shadow: 0 1em 3em rgba(0, 0, 0, .3); }
.tdp__t { display: block; margin-bottom: .7em; font-size: 1.7em; font-weight: 600; }
.tdp__radio { display: flex; align-items: center; gap: .7em; padding: .35em 0; font-size: 1.35em; }
.tdp__radio i { width: 1.25em; height: 1.25em; border: .14em solid #9AA4AF; border-radius: 50%; }
.tdp__radio--on i { border: .38em solid #3390EC; }
.tdp__list { margin: .5em 0 1.2em 2.3em; border-top: .1em solid #EDF0F3; }
.tdp__px { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: .75em 0; border-bottom: .1em solid #EDF0F3; }
.tdp__px b { display: block; font-size: 1.3em; font-weight: 500; }
.tdp__px small { font-size: 1.15em; color: #8A96A3; }
.tdp__px--on small { color: #3390EC; }
.tdp__px em { flex: none; width: 1.8em; height: 1.8em; color: #3390EC; }
.tdp__px em svg { width: 100%; height: 100%; }
.tdp__foot { display: flex; justify-content: space-between; color: #3390EC; font-size: 1.25em; font-weight: 600; text-transform: uppercase; }

/* клиент VPN */
.cl { position: relative; flex: 1; display: flex; flex-direction: column; gap: 1.1em; min-height: 0; padding: .3em 1.6em 3em; background: linear-gradient(180deg, #F5F8FC, #E6EFF8); }
.cl__top { display: flex; align-items: center; justify-content: space-between; }
.cl__top b { font-size: 2.6em; font-weight: 700; letter-spacing: -.02em; }
.cl__plus { display: grid; place-items: center; width: 3.2em; height: 3.2em; border-radius: 50%; background: #FFFFFF; color: #1A73C9; box-shadow: 0 .2em .6em rgba(20, 50, 90, .12); }
.cl__plus svg { width: 1.6em; height: 1.6em; }
.cl__sub { display: flex; align-items: center; gap: 1em; padding: .9em 1.1em; border-radius: 1.4em; background: #FFFFFF; }
.cl__sub img { flex: none; width: 3.6em; height: 3.6em; border-radius: 1em; }
.cl__sub span { flex: 1; min-width: 0; }
.cl__sub b { display: block; font-size: 1.45em; font-weight: 600; }
.cl__sub small { font-size: 1.15em; color: #7A8794; }
.cl__sub > svg,
.cl__srv > svg { flex: none; width: 1.4em; height: 1.4em; color: #A0AAB5; }
.cl__pwr {
  align-self: center;
  display: grid;
  place-items: center;
  width: 14em;
  height: 14em;
  margin-top: 2em;
  border-radius: 50%;
  background: #FFFFFF;
  color: #9AA6B2;
  box-shadow: 0 0 0 1.3em rgba(26, 116, 203, .06), 0 1em 2.4em -1em rgba(20, 60, 110, .35);
}
.cl__pwr span { width: 6.2em; height: 6.2em; }
.cl__pwr svg { width: 100%; height: 100%; }
.cl__pwr--on { background: linear-gradient(160deg, #4DB3F6, #1F7AD4); color: #FFFFFF; box-shadow: 0 0 0 1.3em rgba(42, 143, 230, .16), 0 0 0 2.8em rgba(42, 143, 230, .07), 0 1.4em 2.6em -1em rgba(31, 122, 212, .6); }
.cl__state { display: block; margin-top: 1.5em; font-size: 2em; font-weight: 700; text-align: center; }
.cl__time { display: block; color: #6B7A8A; font-size: 1.3em; font-variant-numeric: tabular-nums; text-align: center; }
.cl__srv { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: .9em 1.2em; border-radius: 1.4em; background: #FFFFFF; }
.cl__srv small { display: block; font-size: 1.1em; color: #7A8794; }
.cl__srv b { font-size: 1.4em; font-weight: 600; }
.cl__menu { position: absolute; top: 4.6em; right: 1.6em; z-index: 2; width: 21em; overflow: hidden; border-radius: 1.4em; background: #FFFFFF; box-shadow: 0 1em 3em rgba(20, 40, 70, .25); }
.cl__mi { display: flex; align-items: center; gap: .8em; padding: .95em 1.1em; font-size: 1.35em; }
.cl__mi + .cl__mi { border-top: .07em solid #EEF1F5; }
.cl__mi svg { flex: none; width: 1.3em; height: 1.3em; color: #1A73C9; }
.cl__mi--hl { background: #EAF4FE; font-weight: 600; }
.cl__toast { align-self: center; margin-top: auto; padding: .7em 1.3em; border-radius: 2em; background: #1F2A37; color: #FFFFFF; font-size: 1.25em; }

/* магазин приложений */
/* App Store: поиск, карточки с рейтингом и «Загрузить» */
.st { flex: 1; display: flex; flex-direction: column; gap: 1.2em; padding: .4em 1.6em; background: #FFFFFF; }
.st__bar { display: flex; align-items: center; gap: .9em; }
.st__q { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5em; padding: .65em .8em; border-radius: 1em; background: #EEEEF0; color: #8E8E93; }
.st__q svg { flex: none; width: 1.6em; height: 1.6em; }
.st__q > span { flex: 1; color: #000000; font-size: 1.45em; }
.st__x { flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: #B4B4BA; color: #FFFFFF; font-size: 1.1em; font-style: normal; line-height: 1; }
.st__cancel { flex: none; color: #007AFF; font-size: 1.45em; }
.st__app { display: flex; align-items: center; gap: 1em; padding-top: 1em; border-top: .08em solid #E5E5EA; }
.st__app:first-of-type { padding-top: .2em; border-top: 0; }
.st__ico { flex: none; width: 5.6em; height: 5.6em; border-radius: 1.35em; box-shadow: 0 0 0 .08em rgba(0, 0, 0, .1); }
.st__meta { flex: 1; min-width: 0; }
.st__meta b { display: block; overflow: hidden; font-size: 1.45em; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.st__meta > small { display: block; overflow: hidden; color: #8E8E93; font-size: 1.2em; white-space: nowrap; text-overflow: ellipsis; }
.st__rate { display: flex; align-items: center; gap: .4em; margin-top: .25em; color: #8E8E93; }
.st__rate small { font-size: 1.1em; white-space: nowrap; }
.st__stars { flex: none; width: 6.2em; height: 1.15em; }
.st__app em { flex: none; padding: .35em .85em; border-radius: 2em; background: #EEEEF0; color: #007AFF; font-size: 1.2em; font-style: normal; font-weight: 700; }
.st__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.st__shots img { width: 100%; height: auto; border-radius: 1em; box-shadow: 0 0 0 .08em rgba(0, 0, 0, .1); }

/* Google Play: поиск, карточки с рейтингом и «Установить» */
.dev__scr:has(.gp) { background: #FFFFFF; }
.gp { flex: 1; display: flex; flex-direction: column; gap: 1.5em; padding: .6em 1.6em; background: #FFFFFF; }
.gp__q { display: flex; align-items: center; gap: 1em; padding: .9em 1.2em; border-radius: 3em; background: #ECEFF4; color: #444746; }
.gp__q svg { flex: none; width: 1.8em; height: 1.8em; }
.gp__q span { flex: 1; color: #1F1F1F; font-size: 1.45em; }
.gp__app { display: flex; align-items: center; gap: 1.1em; }
.gp__ico { flex: none; width: 5.6em; height: 5.6em; border-radius: 1.2em; box-shadow: 0 0 0 .08em rgba(0, 0, 0, .08); }
.gp__meta { flex: 1; min-width: 0; }
.gp__meta b { display: block; overflow: hidden; color: #1F1F1F; font-size: 1.4em; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.gp__meta small { display: block; overflow: hidden; color: #444746; font-size: 1.15em; white-space: nowrap; text-overflow: ellipsis; }
.gp__app em { flex: none; padding: .45em 1em; border-radius: 2em; background: #01875F; color: #FFFFFF; font-size: 1.2em; font-style: normal; font-weight: 500; }

/* системные запросы */
.dim { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
.dim::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .4); }
.alert { position: absolute; top: 46%; left: 50%; z-index: 2; width: 24em; overflow: hidden; border-radius: 1.4em; background: rgba(242, 242, 247, .98); text-align: center; transform: translate(-50%, -50%); }
.alert > b { display: block; padding: 1.5em 1.5em .4em; font-size: 1.38em; font-weight: 600; line-height: 1.25; }
.alert > p { padding: 0 1.6em 1.3em; font-size: 1.15em; line-height: 1.3; }
.alert__btns { display: flex; border-top: .1em solid #C8C8CC; }
.alert__b { flex: 1; padding: .8em 0; color: #007AFF; font-size: 1.45em; }
.alert__b + .alert__b { border-left: .07em solid #C8C8CC; }
.alert__b--main { font-weight: 600; }
.adlg { position: absolute; top: 50%; left: 1.6em; right: 1.6em; z-index: 2; padding: 2.2em 2.2em 1.6em; border-radius: 2.6em; background: #F2F5FA; transform: translateY(-50%); }
.adlg > b { display: block; margin-bottom: .6em; font-size: 1.8em; font-weight: 500; }
.adlg > p { color: #474C55; font-size: 1.3em; line-height: 1.4; }
.adlg__btns { display: flex; justify-content: flex-end; gap: 2.2em; margin-top: 1.6em; color: #1A73C9; font-size: 1.4em; font-weight: 600; }

.dc { flex: 1; display: flex; }
.dc__side { display: flex; flex-direction: column; gap: .4em; width: 18em; padding: 1.6em 1.2em; border-right: .1em solid #E5EAF0; background: #F4F7FB; }
.dc__side > b { margin-bottom: .6em; color: #7A8794; font-size: 1.1em; font-weight: 600; text-transform: uppercase; }
.dc__item { display: flex; align-items: center; gap: .6em; padding: .55em .7em; border-radius: .6em; font-size: 1.35em; }
.dc__item img { width: 1.8em; height: 1.8em; border-radius: .45em; }
.dc__item--on { background: #E3F0FD; color: #1A73C9; font-weight: 600; }
.dc__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #F8FBFE, #EAF2FA); }
.dc__main .cl__pwr { width: 12em; height: 12em; margin-top: 0; }
.dc__main .cl__pwr span { width: 5.4em; height: 5.4em; }

.uac { flex: 1; display: grid; place-items: center; background: linear-gradient(rgba(0, 0, 0, .45), rgba(0, 0, 0, .45)), linear-gradient(135deg, #9EC4E8, #5E8FC4); }
.uac__box { width: 40em; overflow: hidden; border-radius: .5em; background: #FFFFFF; box-shadow: 0 1em 3em rgba(0, 0, 0, .35); }
.uac__h { display: block; padding: .7em 1.2em; background: #1F5FA8; color: #FFFFFF; font-size: 1.2em; }
.uac__box > b { display: block; padding: 1em 1.2em .5em; font-size: 1.55em; font-weight: 600; line-height: 1.25; }
.uac__app { display: flex; align-items: center; gap: 1em; padding: .4em 1.5em 1.2em; }
.uac__app img { width: 3.6em; height: 3.6em; border-radius: .8em; }
.uac__app b { display: block; font-size: 1.35em; font-weight: 600; }
.uac__app small { font-size: 1.15em; color: #666666; }
.uac__btns { display: flex; gap: .8em; padding: 1em 1.5em; background: #F2F2F2; }
.uac__btns span { flex: 1; padding: .5em; border: .1em solid #CCCCCC; border-radius: .3em; background: #FFFFFF; font-size: 1.3em; text-align: center; }
.uac__btns .uac__yes { border-color: #1A73C9; background: #1A73C9; color: #FFFFFF; }

.macd { flex: 1; display: grid; place-items: center; background: linear-gradient(135deg, #BFD9F2, #7FA9D6); }
.macd__box { width: 27em; padding: 1.8em 1.6em 1.4em; border-radius: 1.2em; background: rgba(246, 246, 246, .98); box-shadow: 0 1.6em 3em rgba(0, 0, 0, .3); text-align: center; }
.macd__box img { width: 5em; height: 5em; border-radius: 1.2em; }
.macd__box > b { display: block; margin: .8em 0 .4em; font-size: 1.35em; font-weight: 700; }
.macd__box > p { color: #444444; font-size: 1.15em; }
.macd__btns { display: flex; gap: .6em; margin-top: 1.2em; }
.macd__btns span { flex: 1; padding: .5em; border-radius: .55em; background: #E3E3E6; font-size: 1.25em; }
.macd__btns .macd__ok { background: #1A7CF0; color: #FFFFFF; }

/* телевизор */
.dev--tv { width: 64em; font-size: min(var(--dev-max), 100cqw / 64); }
.tv__scr { display: flex; height: 36em; overflow: hidden; border: 1em solid #14181F; border-radius: 1em; background: linear-gradient(180deg, #102540, #1B4470); color: #FFFFFF; }
.tv__leg { display: block; width: 18em; height: 1.4em; margin: 0 auto; border-radius: 0 0 .6em .6em; background: #2A303A; }
.tvc { flex: 1; display: flex; flex-direction: column; gap: 1.6em; padding: 3em 4em; }
.tvc__t { font-size: 2.4em; font-weight: 600; }
.tvc__field { padding: .8em 1em; border: .12em solid #4DB3F6; border-radius: .6em; background: rgba(255, 255, 255, .1); font: 1.6em/1.3 ui-monospace, Menlo, monospace; }
.tvc__field i { display: inline-block; width: .08em; height: 1.1em; margin-left: .15em; background: #FFFFFF; vertical-align: middle; }
.tvc__keys { display: grid; grid-template-columns: repeat(11, 1fr); gap: .5em; }
.tvc__keys span { padding: .5em 0; border-radius: .4em; background: rgba(255, 255, 255, .09); font-size: 1.4em; text-align: center; }
.tvc__btns { display: flex; gap: 1em; }
.tvc__btns span { padding: .7em 1.5em; border-radius: .7em; background: rgba(255, 255, 255, .1); font-size: 1.45em; }
.tvc__btns .tvc__ok { background: #2A8FE6; box-shadow: 0 0 0 .15em #FFFFFF; font-weight: 600; }
.tvc--on { flex-direction: row; align-items: center; gap: 4em; padding: 3em 6em; }
.tvc--on .cl__pwr { flex: none; width: 15em; height: 15em; margin: 0; }
.tvc--on .cl__pwr span { width: 6.6em; height: 6.6em; }
.tvc--on .cl__state { margin: 0; color: #FFFFFF; font-size: 3em; text-align: left; }
.tvc--on .cl__time { margin-top: .4em; color: #B8CCE0; font-size: 1.6em; text-align: left; }
.tvc__apps { display: flex; gap: 1em; margin-top: 2em; }
.tvc__apps span { padding: 2.4em 2em .8em; border-radius: 1em; background: rgba(255, 255, 255, .1); font-size: 1.4em; }

/* рисунки в статьях */
.fig { margin: 24px 0; padding: 20px 12px 14px; border-radius: var(--r-card); background: linear-gradient(160deg, #E8F3FD, #D6EAFB); }
.fig__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.fig .shot--phone { flex: 0 1 230px; }
.fig .shot--wide,
.fig .shot--tv { flex: 1 1 100%; max-width: 520px; }
.fig .shot--scheme { flex: 1 1 100%; }
.fig figcaption { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.45; text-align: center; }

/* ---------- планшет ---------- */

@media (min-width: 640px) {
  .wrap { padding: 0 24px; }
  .osteps { margin: 0 -24px; padding: 0 24px 8px; grid-auto-columns: minmax(250px, 46%); }
  .filters { margin: 16px -24px 0; padding: 0 24px 4px; }
  .troubles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .isteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .row-card__thumb { width: 144px; }
  .proxy { padding: 20px; }
  .pbtn--main { flex: 1 1 220px; }
  .band { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 28px; }
  .band__txt { flex: 1 1 320px; }
  .cta-panel { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .cta-panel > div { flex: 1 1 300px; }
}

/* ---------- десктоп ---------- */

@media (min-width: 900px) {
  .wrap { padding: 0 32px; }
  html { scroll-padding-top: 96px; }

  .hdr { min-height: 76px; }
  .hdr__cta { display: inline-flex; margin-left: auto; }
  .hdr__cta + .menu { margin-left: 12px; }
  .langs { display: block; }
  .langs + .hdr__cta { margin-left: 12px; }
  .hdr__nav + .langs { margin-left: auto; }

  .hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 32px; padding-top: 56px; }
  .hero__txt { gap: 22px; padding-bottom: 48px; }
  .h1 { font-size: clamp(40px, 4.6vw, 60px); line-height: 1.05; }
  .hero__lead { max-width: 560px; font-size: 19px; }
  .hero__cta .btn { flex: 0 1 auto; min-height: 56px; padding: 0 26px; font-size: 17px; }
  .hero__facts { max-width: 560px; gap: 20px; }
  .hero__facts li { font-size: 14px; }
  .hero__facts b { font-size: 17px; }
  .hero__art { align-self: end; height: 600px; }
  .hero__art .shot { max-width: 320px; margin-right: 24px; }
  .hero__art .dev { --dev-max: 11px; }
  .hero__owl { left: 0; bottom: 0; width: clamp(140px, 14vw, 190px); }

  .sec { padding-top: 88px; }
  .sec--tint { margin-top: 88px; padding-bottom: 88px; }
  .sec--first { padding-top: 32px; }
  .sec__head { margin-bottom: 36px; }
  .h2 { font-size: clamp(30px, 3.2vw, 42px); }
  .sec__lead { font-size: 18px; }
  .h2--sm { font-size: 22px; }
  .h2--md { font-size: 28px; }

  .proxy { padding: 24px; }
  .proxy:not(.proxy--compact) [data-state="idle"] { display: grid; grid-template-columns: minmax(0, 1fr) 248px; gap: 20px; align-items: stretch; }
  .proxy:not(.proxy--compact) .proxy__soon { grid-column: 1 / -1; }
  .ptype { padding: 22px; }
  .proxy:not(.proxy--compact) .pbtn--qr,
  .proxy:not(.proxy--compact) .proxy__qrpanel { display: none !important; }
  .proxy__qrbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px;
    border-radius: var(--r-card);
    background: var(--bg-soft);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.45;
    text-align: center;
  }
  .proxy__qrbox .proxy__qr { width: 184px; height: 184px; }
  .proxy__qrbox .proxy__qr svg { width: 164px; height: 164px; }
  .proxy [data-state="next"] { max-width: 560px; }

  .ways { gap: 72px; }
  .way { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .way:nth-child(even) .way__txt { order: 2; }
  .way h3 { font-size: 30px; }
  .way__shot { height: 480px; padding: 40px 32px 0; }
  .way__shot .shot--phone { max-width: 300px; }
  .way--webproxy .way__shot { height: auto; min-height: 400px; padding: 40px 28px; }

  .osteps { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; overflow: visible; }
  .os__panel--pc .osteps { grid-template-columns: minmax(0, .75fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
  .ostep .shot { height: 330px; }
  .os__panel--pc .ostep .shot--wide { height: 330px; }

  .faq { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 64px; }
  .faq__head { min-height: 360px; }
  .faq .mascot--help { display: block; position: absolute; left: 0; bottom: 0; width: 170px; }
  .faq__q { font-size: 18px; }
  .faq__item summary { padding: 20px 0; }
  .faq--inner { display: block; margin-top: 48px; padding: 28px 32px 8px; }
  .faq--inner .faq__q { font-size: 16px; }
  .faq--inner .faq__item summary { padding: 16px 0; }

  .cards { gap: 20px; }

  .band { padding: 40px 48px 40px 220px; min-height: 220px; }
  .band .band__owl { display: block; position: absolute; left: 40px; bottom: -12px; width: 150px; }
  .band__txt h2 { font-size: 32px; }

  .foot { margin-top: 88px; }
  .foot__top { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding: 48px 0 36px; }
  .foot__about { grid-column: auto; }

  /* внутренние */
  .crumbs { padding-top: 24px; font-size: 14px; }
  .pagehead--split { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 40px; align-items: start; padding-top: 18px; }
  .pagehead__txt { gap: 18px; }
  .h1--page { font-size: clamp(34px, 3.6vw, 48px); line-height: 1.08; }
  .pagehead__lead { font-size: 19px; }
  .pagehead__shot { height: 470px; padding: 36px 24px 0; }
  .pagehead__shot .shot--phone { max-width: 290px; }
  .pagehead__txt .hero__cta .btn { flex: 0 1 auto; }

  .panel { padding: 24px 28px 12px; }
  .cols { grid-template-columns: minmax(0, 1fr) 360px; grid-template-areas: "steps needs" "steps errors" "steps ."; gap: 0 40px; align-items: start; }
  .cols__steps { grid-area: steps; padding-top: 48px; }
  .cols__needs { grid-area: needs; margin-top: 48px; }
  .cols__errors { grid-area: errors; }
  .istep .shot--phone { max-width: 260px; }
  .after { padding-top: 40px; }
  .after .btn { display: inline-flex; width: auto; min-width: 320px; }

  .scen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; align-items: start; }
  .scen > .panel { margin-top: 48px; }
  .scen__why { padding-top: 48px; }
  .stack-top { padding-top: 48px; }
  .longtext { max-width: 820px; margin-top: 56px; }
  .longtext h2 { font-size: 26px; }

  .docs { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 24px; align-items: start; }
  .docs .doc { margin-top: 0; padding: 36px 40px; }
  .docs .doclist { position: sticky; top: 96px; }
  .doc__title { font-size: 28px; }

  .filters { margin: 20px 0 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  .feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 24px; }
  .feed__main { grid-column: 1 / -1; flex-direction: row; }
  .feed__main .cover { flex: 0 0 52%; }
  .feed__body { align-self: center; padding: 32px; }
  .feed__title { margin: 8px 0 12px; font-size: 30px; }
  .feed__text { font-size: 17px; }
  .row-card { padding: 12px; }
  .row-card__thumb { width: 168px; }
  .cta-panel { margin-top: 48px; padding: 32px; border-radius: var(--r-big); }
  .cta-panel h2 { font-size: 24px; }

  .art-col { max-width: 760px; margin: 0 auto; }
  .art-col .pagehead > .btn { width: auto; }
  .article { font-size: 18px; line-height: 1.7; }
  .article h2 { margin-top: 40px; font-size: 28px; }
  .article-cover { border-radius: var(--r-big); }
  .related { max-width: 760px; margin: 0 auto; padding-top: 48px; }
  .related .list-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .author { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px 32px; padding: 40px; border-radius: var(--r-big); }
  .author .avatar { width: 112px; height: 112px; border-radius: 30px; }
  .author__info { flex: 1 1 360px; }
  .author h1 { font-size: 38px; }
  .author__bio { flex-basis: 100%; max-width: 720px; }
  .authlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .editorial { max-width: 820px; margin-top: 32px; }

  .mascot--empty { width: 260px; }
  .fig { padding: 28px 24px 18px; }
}

/* Полное меню в шапке — когда рядом с названием «Proxy MTProto · VPN» хватает места; до этого — бургер и кнопка. */
@media (min-width: 1100px) {
  .menu { display: none; }
  .hdr__nav { display: flex; align-items: center; gap: 4px 26px; margin-left: 24px; }
}

/* ---------- движение ---------- */

@media (prefers-reduced-motion: no-preference) {
  .btn,
  .pbtn,
  .chip,
  .pill,
  .next__card,
  .card,
  .row-card,
  .rowlink { transition: transform var(--dur-fast) var(--ease-out); }
  .btn:active,
  .pbtn:active,
  .chip:active,
  .pill:active,
  .next__card:active,
  .card:active,
  .row-card:active,
  .rowlink:active { transform: scale(.97); }
  .proxy [data-state]:not([hidden]),
  .os__panel { animation: rise var(--dur-base) var(--ease-out); }
  .menu__panel { animation: rise var(--dur-base) var(--ease-out); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}