/* ═══════════════════════════════════════════════
   ARTXROM MENTORING — Modern Redesign
   ═══════════════════════════════════════════════ */

/* Inter подключается локально из fonts/inter.css (см. <head> в index.html).
   Здесь был @import к Google Fonts: браузер находил его только после загрузки
   этого файла и вставал ещё на один round-trip к внешнему хосту, который из РФ
   регулярно отваливался по таймауту — страница висела пустой десятки секунд. */

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

/* ── DESIGN TOKENS ── */
:root {
  /* Palette */
  --black: #08080c;
  --dark: #0c0c10;
  --dark-alt: #111118;
  --surface: #16161e;
  --surface-hover: #1e1e28;
  --yellow: #f5c518;
  --yellow-light: #ffe04a;
  --yellow-dim: #c9a200;
  --yellow-glow: rgba(245, 197, 24, 0.15);
  --yellow-glow-sm: rgba(245, 197, 24, 0.06);
  --white: #f0f0f2;
  --gray: #a0a0aa;
  /* Вторичный текст. Был #7a7a84 — 4.23:1 на --surface, то есть ниже AA
     на 105 узлах из 140. Значение подобрано под самый тёмный из реальных
     фонов: 5.27 на --surface, 4.84 на --surface-hover. */
  --gray-dim: #8a8a95;
  --border: rgba(255, 255, 255, 0.07);
  --border-hover: rgba(245, 197, 24, 0.25);

  /* Состояния шагов в плеере пет-проекта. Цвет здесь дублирует текст рядом
     («200 OK», «MISS», «publish → error, retry»), а не заменяет его. */
  --ok: #3ecf8e;
  --warn: #e8a33d;
  --err: #e05555;
  --ok-glow: rgba(62, 207, 142, 0.15);
  --warn-glow: rgba(232, 163, 61, 0.15);
  --err-glow: rgba(224, 85, 85, 0.15);

  /* ── Типографика ───────────────────────────────────────────────────────
     Роль называет работу текста, а не его размер. До этого шкалы не было
     вовсе: body не задавал font-size, каждый компонент называл кегль сам,
     и на странице набиралось 41 разных кегля — 22 из них в полосе от 11
     до 16px, где отличить их друг от друга уже нельзя. */
  --t-display:  clamp(2.6rem, 5vw, 4rem);      /* h1 */
  --t-section:  clamp(1.7rem, 3.5vw, 2.6rem);  /* h2 */
  --t-sub:      clamp(1.35rem, 2.6vw, 1.9rem); /* h2 младшего ранга */
  --t-title:    1.15rem;   /* 18.4px — h3, заголовки карточек */
  --t-lede:     1.05rem;   /* 16.8px — подзаголовок героя, вводные */
  --t-body:     1rem;      /* 16px   — абзацы, которые читают */
  --t-small:    0.875rem;  /* 14px   — плотные подписи внутри карточек */
  --t-meta:     0.8rem;    /* 12.8px — метаданные, основания сумм */
  --t-label:    0.72rem;   /* 11.5px — прописные с трекингом */

  /* Просвет: чем длиннее строка и мельче кегль, тем он нужнее. */
  --lh-display: 1.08;
  --lh-head:    1.3;
  --lh-body:    1.6;
  --lh-prose:   1.75;

  /* Трекинг только в em: кегли заданы через clamp(), и пиксельный трекинг
     ужесточался бы ровно там, где текст становится мельче. */
  --ls-display: -0.03em;
  --ls-head:    -0.02em;
  --ls-title:   -0.015em;
  --ls-label:   0.14em;

  /* Мера набора для прозы во всю ширину контейнера. */
  --measure: 68ch;

  /* ── Иконки ────────────────────────────────────────────────────────────
     Один набор — один оптический вес. У всех иконок viewBox 24, поэтому
     видимая толщина линии равна stroke-width × размер / 24, и одинаковое
     stroke-width при разных размерах давало разный вес: было 1.8/2.2/2.5/
     2.6/3.4, то есть от 0.98 до 2.29 — самая тонкая иконка вдвое легче
     самой толстой, причём .shot-arrow (1.88) и .shot-zoom (1.47) стоят в
     одном ряду. Цель — 1.9, на нём уже сидели .cnav и .shot-arrow.
     stroke-width = 45.6 / размер:
       22px → 2.07   18px → 2.5    15px → 3.04
       20px → 2.28   16px → 2.85   13px → 3.51   9px → 5.07
     Значение живёт в атрибуте разметки, не здесь — это памятка, по которой
     его считают. Новую иконку заводить по той же формуле. */

  /* Radii */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* Layout */
  --section-py: 120px;
  --container: 1140px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 0.35s;
}

/* ── GLOBAL ── */
html { overflow-x: hidden; }
/* Плавную прокрутку по якорям включаем только тем, кто не просил систему
   уменьшить анимацию: раньше она была навязана всем. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--black);
  color: var(--white);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* Выделение текста и каретка рисовались системным синим поверх жёлто-чёрного
   мира — единственное место на странице, которое не принадлежало палитре. */
::selection { background: var(--yellow); color: var(--black); }
::-moz-selection { background: var(--yellow); color: var(--black); }
:root { accent-color: var(--yellow); caret-color: var(--yellow); }

a { color: var(--yellow); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--white); }

/* Focus states for keyboard navigation */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.faq-q:focus-visible,
.sprint-header:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
  border-radius: 4px;
}
img { max-width: 100%; height: auto; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* ══════ KEYFRAMES ══════ */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ══════ SCROLL REVEAL ══════ */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

/* ══════ PARALLAX MESH ══════ */
.mesh-deco {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
/* will-change вешаем на время движения, а не навсегда: постоянный слой
   композитора занимает память всё время жизни страницы. */
.mesh-deco.moving { will-change: transform; }

/* ══════ SKIP LINK ══════ */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--yellow);
  color: var(--black);
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 2000;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 12px;
  color: var(--black);
}

/* ══════ NAV ══════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: rgba(8, 8, 12, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  z-index: 1000;
  padding: 0 24px;
  transition: background 0.3s, border-color 0.3s;
}
nav.scrolled {
  background: rgba(8, 8, 12, 0.92);
  border-bottom-color: rgba(245,197,24,0.1);
}
nav .nav-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}
nav .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--white);
  flex-shrink: 0;
  min-width: 0;
}
nav .logo:hover { color: var(--white); }
nav .logo:hover .logo-mark { transform: translateY(-1px); }
.logo-mark {
  height: 30px;
  width: auto;
  display: block;
  flex-shrink: 0;
  transition: transform 0.25s var(--ease);
}
.logo-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  min-width: 0;
}
.logo-txt b {
  font-size: 0.98rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  color: var(--white);
  white-space: nowrap;
}
.logo-txt i {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--yellow);
  margin-top: 4px;
  white-space: nowrap;
}
nav .nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}
nav .nav-links a {
  color: var(--gray);
  font-size: var(--t-small);
  font-weight: 500;
  transition: color 0.2s;
  letter-spacing: -0.2px;
}
nav .nav-links a:hover { color: var(--white); }
nav .nav-links .btn { color: var(--black); }
nav .nav-links .btn:hover { color: var(--black); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
}
.burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), background 0.3s;
}
.burger.open span { background: var(--yellow); }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0.4); }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════ SHARED TYPOGRAPHY ══════ */
section {
  padding: var(--section-py) 0;
  position: relative;
  overflow: hidden;
}

/* Alternating section backgrounds */
section.section--alt {
  background: var(--dark-alt);
}

.section-label {
  text-transform: uppercase;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--yellow);
  margin-bottom: 14px;
}

h1 {
  font-size: var(--t-display);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  margin-bottom: 22px;
}
h1 .highlight { color: var(--yellow); }

h2 {
  font-size: var(--t-section);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: var(--ls-head);
  margin-bottom: 16px;
}

h3 {
  font-size: var(--t-title);
  font-weight: 700;
  /* Без этого h3 наследует от body просвет 1.6 и набирается как абзац:
     заголовок карточки повисает в воздухе, а разделять его с текстом
     должен отступ, а не межстрочник. */
  line-height: var(--lh-head);
  margin-bottom: 8px;
  letter-spacing: var(--ls-title);
}

.subtitle {
  font-size: var(--t-lede);
  color: var(--gray);
  max-width: 560px;
  line-height: 1.7;
}

/* ══════ BUTTONS ══════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  background: var(--yellow);
  color: var(--black);
  font-weight: 700;
  font-size: var(--t-body);
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
  position: relative;
  overflow: hidden;
  letter-spacing: -0.2px;
}
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.25s;
}
.btn:hover {
  background: var(--yellow-light);
  color: var(--black);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(245,197,24,0.35);
}
.btn:hover::after { opacity: 1; }

.btn-outline {
  background: transparent;
  /* Рамка — единственное, что обозначает эту кнопку, поэтому она обязана
     проходить 3:1 как граница контрола. При 0.35 было 2.32:1. */
  border: 2px solid rgba(245,197,24,0.5);
  color: var(--yellow);
}
.btn-outline:hover {
  background: var(--yellow);
  color: var(--black);
  border-color: var(--yellow);
}

.btn-sm {
  padding: 11px 24px;
  font-size: var(--t-small);
  border-radius: 8px;
}

/* ══════ TAGS ══════ */
.tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(245,197,24,0.06);
  color: var(--yellow);
  font-size: var(--t-meta);
  font-weight: 600;
  border-radius: 4px;
  border: none;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
  letter-spacing: 0.3px;
}

/* ══════ LAYOUT GRIDS ══════ */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ══════ CARDS (shared) ══════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px;
  transition: all var(--duration) var(--ease);
  position: relative;
  /* Колонка — чтобы кнопка встала по низу карточки. Сетка и так тянет все три
     карточки до высоты самой высокой, но раньше запас уходил в пустоту под
     списком: 197 / 37 / 272 px. Теперь он собирается в один просвет над
     кнопками, и кнопки трёх карточек стоят на одной линии. */
  display: flex;
  flex-direction: column;
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  background: radial-gradient(ellipse at top, var(--yellow-glow-sm) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
/* Подъёмы карточек — только там, где есть настоящий указатель. На тач-экране
   :hover срабатывает от тапа и залипает до следующего касания где-то ещё. */
@media (hover: hover) {
  .card:hover {
    border-color: var(--border-hover);
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 40px var(--yellow-glow-sm);
  }
  .card:hover::before { opacity: 1; }
}
/* Текст карточки услуги. Раньше кегль и цвет стояли инлайном в разметке —
   единственное место на странице, куда не доставала шкала. Кегль — --t-small:
   это подпись внутри карточки, а не абзац, который читают подряд. С --t-body
   все три описания становились на 14% выше, и разница высот между карточками
   превращалась в мёртвую полосу снизу. */
.card-note {
  font-size: var(--t-small);
  color: var(--gray);
  line-height: var(--lh-body);
}
.card-note--dim { font-size: var(--t-small); color: var(--gray-dim); }

.card .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
}
.card .icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* ══════ GLOW DIVIDER (kept for compatibility, but hidden with new design) ══════ */
/* ══════ HERO ══════ */
#hero {
  padding-top: 150px;
  padding-bottom: 100px;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  background: var(--black);
}
#hero::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -30%;
  width: 160%;
  height: 200%;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(245,197,24,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 70%, rgba(245,197,24,0.04) 0%, transparent 50%);
  animation: gradient-shift 20s ease infinite;
  animation-play-state: paused;
  background-size: 200% 200%;
  pointer-events: none;
}
/* Цикл идёт только пока герой в кадре: двадцатисекундная анимация фона
   не должна крутиться, когда посетитель ушёл на двадцать экранов вниз. */
#hero.in-view::before { animation-play-state: running; }
#hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to top, var(--dark-alt), transparent);
  pointer-events: none;
}

#hero .hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-photo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo {
  width: 340px;
  height: 420px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  object-position: center top;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  position: relative;
  z-index: 2;
}
#hero h1 { animation: fade-in-up 0.8s var(--ease) 0.1s both; }
#hero .subtitle { animation: fade-in-up 0.8s var(--ease) 0.2s both; }

.hero-cta {
  display: flex;
  gap: 14px;
  margin-top: 36px;
  flex-wrap: wrap;
  animation: fade-in-up 0.8s var(--ease) 0.3s both;
}

.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 52px;
  animation: fade-in-up 0.8s var(--ease) 0.4s both;
}
.hero-stats .stat-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -1px;
  text-shadow: 0 0 24px rgba(245,197,24,0.32);
  font-variant-numeric: tabular-nums;
}
.hero-stats .stat-label {
  font-size: var(--t-meta);
  color: var(--gray-dim);
  margin-top: 4px;
  letter-spacing: 0.2px;
}
/* Строка-доказательство под цифрами: ведёт к стене офферов, которая ниже по странице. */
.hero-proof {
  display: inline-block;
  margin-top: 28px;
  font-size: var(--t-small);
  color: var(--gray);
  text-decoration: none;
  line-height: 1.5;
  animation: fade-in-up 0.8s var(--ease) 0.5s both;
  transition: color var(--duration) var(--ease);
}
.hero-proof span { color: var(--yellow); }
.hero-proof:hover { color: var(--white); }

/* ══════ WHAT AWAITS ══════ */
.awaits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.awaits-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all var(--duration) var(--ease);
  display: flex;
  flex-direction: column;
  min-height: 160px;
}
.awaits-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 30px var(--yellow-glow-sm);
}
.awaits-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--aw-pat);
  background-repeat: repeat;
  background-size: 120px 120px;
  opacity: 0;
  transform: scale(1.1);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
  pointer-events: none;
  z-index: 0;
}
.awaits-card:hover::before {
  opacity: 0.14;
  transform: scale(1);
}
.aw-pat-code { --aw-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%23f5c518%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%286%208%29%20rotate%28-12%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22m18%2016%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m6%208-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22m14.5%204-5%2016%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2850%204%29%20rotate%2810%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22m18%2016%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m6%208-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22m14.5%204-5%2016%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2016%29%20rotate%28-7%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22m18%2016%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m6%208-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22m14.5%204-5%2016%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2826%2040%29%20rotate%2813%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22m18%2016%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m6%208-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22m14.5%204-5%2016%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2870%2044%29%20rotate%28-9%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22m18%2016%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m6%208-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22m14.5%204-5%2016%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%288%2074%29%20rotate%287%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22m18%2016%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m6%208-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22m14.5%204-5%2016%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2852%2080%29%20rotate%28-14%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22m18%2016%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m6%208-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22m14.5%204-5%2016%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2890%2072%29%20rotate%286%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22m18%2016%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m6%208-4%204%204%204%22%2F%3E%3Cpath%20d%3D%22m14.5%204-5%2016%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.aw-pat-cap { --aw-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%23f5c518%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%286%208%29%20rotate%28-12%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2850%204%29%20rotate%2810%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2016%29%20rotate%28-7%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2826%2040%29%20rotate%2813%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2870%2044%29%20rotate%28-9%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%288%2074%29%20rotate%287%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2852%2080%29%20rotate%28-14%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2890%2072%29%20rotate%286%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M21.42%2010.922a1%201%200%200%200-.019-1.838L12.83%205.18a2%202%200%200%200-1.66%200L2.6%209.08a1%201%200%200%200%200%201.832l8.57%203.908a2%202%200%200%200%201.66%200z%22%2F%3E%3Cpath%20d%3D%22M22%2010v6%22%2F%3E%3Cpath%20d%3D%22M6%2012.5V16a6%203%200%200%200%2012%200v-3.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.aw-pat-trophy { --aw-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%23f5c518%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%286%208%29%20rotate%28-12%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2850%204%29%20rotate%2810%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2016%29%20rotate%28-7%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2826%2040%29%20rotate%2813%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2870%2044%29%20rotate%28-9%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%288%2074%29%20rotate%287%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2852%2080%29%20rotate%28-14%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2890%2072%29%20rotate%286%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M6%209H4.5a2.5%202.5%200%200%201%200-5H6%22%2F%3E%3Cpath%20d%3D%22M18%209h1.5a2.5%202.5%200%200%200%200-5H18%22%2F%3E%3Cpath%20d%3D%22M4%2022h16%22%2F%3E%3Cpath%20d%3D%22M10%2014.66V17c0%20.55-.47.98-.97%201.21C7.85%2018.75%207%2020.24%207%2022%22%2F%3E%3Cpath%20d%3D%22M14%2014.66V17c0%20.55.47.98.97%201.21C16.15%2018.75%2017%2020.24%2017%2022%22%2F%3E%3Cpath%20d%3D%22M18%202H6v7a6%206%200%200%200%2012%200V2Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.aw-pat-branch { --aw-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%23f5c518%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%286%208%29%20rotate%28-12%29%20scale%280.85%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%223%22%20y2%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%209a9%209%200%200%201-9%209%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2850%204%29%20rotate%2810%29%20scale%280.85%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%223%22%20y2%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%209a9%209%200%200%201-9%209%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2016%29%20rotate%28-7%29%20scale%280.85%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%223%22%20y2%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%209a9%209%200%200%201-9%209%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2826%2040%29%20rotate%2813%29%20scale%280.85%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%223%22%20y2%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%209a9%209%200%200%201-9%209%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2870%2044%29%20rotate%28-9%29%20scale%280.85%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%223%22%20y2%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%209a9%209%200%200%201-9%209%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%288%2074%29%20rotate%287%29%20scale%280.85%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%223%22%20y2%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%209a9%209%200%200%201-9%209%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2852%2080%29%20rotate%28-14%29%20scale%280.85%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%223%22%20y2%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%209a9%209%200%200%201-9%209%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2890%2072%29%20rotate%286%29%20scale%280.85%29%22%3E%3Cline%20x1%3D%226%22%20x2%3D%226%22%20y1%3D%223%22%20y2%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%226%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2218%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M18%209a9%209%200%200%201-9%209%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.aw-pat-book { --aw-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%23f5c518%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%286%208%29%20rotate%28-12%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2850%204%29%20rotate%2810%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2016%29%20rotate%28-7%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2826%2040%29%20rotate%2813%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2870%2044%29%20rotate%28-9%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%288%2074%29%20rotate%287%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2852%2080%29%20rotate%28-14%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2890%2072%29%20rotate%286%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M12%207v14%22%2F%3E%3Cpath%20d%3D%22M3%2018a1%201%200%200%201-1-1V4a1%201%200%200%201%201-1h5a4%204%200%200%201%204%204%204%204%200%200%201%204-4h5a1%201%200%200%201%201%201v13a1%201%200%200%201-1%201h-6a3%203%200%200%200-3%203%203%203%200%200%200-3-3z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.aw-pat-users { --aw-pat: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20stroke%3D%22%23f5c518%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20transform%3D%22translate%286%208%29%20rotate%28-12%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2850%204%29%20rotate%2810%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2884%2016%29%20rotate%28-7%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2826%2040%29%20rotate%2813%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2870%2044%29%20rotate%28-9%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%288%2074%29%20rotate%287%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2852%2080%29%20rotate%28-14%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%2890%2072%29%20rotate%286%29%20scale%280.85%29%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87%22%2F%3E%3Cpath%20d%3D%22M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.awaits-card h3,
.awaits-card p {
  position: relative;
  z-index: 1;
}
.awaits-card h3 {
  color: var(--white);
  font-size: var(--t-title);
  margin-bottom: 8px;
}
.awaits-card p {
  font-size: var(--t-body);
  color: var(--gray);
  line-height: 1.6;
}

.awaits-salary-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 24px;
}
.awaits-salary {
  background: linear-gradient(135deg, rgba(245,197,24,0.12) 0%, rgba(245,197,24,0.03) 100%);
  border: 1px solid rgba(245,197,24,0.2);
  border-radius: var(--radius);
  padding: 32px 36px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  position: relative;
  transition: all var(--duration) var(--ease);
}
.awaits-salary:hover {
  border-color: rgba(245,197,24,0.4);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(245,197,24,0.1);
}
.awaits-salary .sal-amount {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: var(--ls-head);
  font-variant-numeric: tabular-nums;
}
.awaits-salary .sal-label {
  font-size: var(--t-body);
  font-weight: 700;
  color: var(--white);
  margin-top: 6px;
  letter-spacing: -0.2px;
  text-wrap: balance;
}
.awaits-salary .sal-note {
  font-size: var(--t-meta);
  color: var(--yellow-dim);
  line-height: 1.55;
  margin-top: 6px;
  text-wrap: pretty;
}
.awaits-salary > div { min-width: 0; }

/* ══════ FOR WHOM ══════ */
.whom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.whom-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  transition: all var(--duration) var(--ease);
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.whom-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 30px var(--yellow-glow-sm);
}
.whom-card .whom-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  min-width: 56px;
  flex-shrink: 0;
}
.whom-card .whom-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.whom-card h3 { color: var(--yellow); font-size: var(--t-title); }
.whom-card p { font-size: var(--t-body); color: var(--gray); line-height: 1.6; }

/* ══════ SKILLS ══════ */
.skills-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.skills-bars { display: flex; flex-direction: column; }

/* Подпись, число и полоса — одна строка таблицы, и держатся они близостью.
   Было 10px до своей полосы против 24px до следующей строки: разница всего в
   2.4 раза, группа не собиралась, и 291px пустоты между «Go (core language)»
   и «95% вакансий» (56% строки в 522px) читались как разрыв. Теперь 6 против
   28 — почти впятеро, подпись явно принадлежит своей полосе, а восемь чисел
   у правого края встают в колонку, которую можно сравнивать сверху вниз.
   Ширину полосы не трогаем: 522px нужны, чтобы доли читались друг против
   друга. */
.skill-bar-wrap { margin-bottom: 28px; }
.skill-bar-wrap:last-child { margin-bottom: 0; }
.skill-bar-label {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: var(--t-small);
  margin-bottom: 6px;
  font-weight: 500;
}
.skill-bar-label span:last-child {
  color: var(--yellow);
  font-weight: 700;
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
}
.skill-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.skill-bar-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--yellow-dim), var(--yellow));
  border-radius: 4px;
  /* Длина полосы задаётся clip-path, а не шириной: ширина пересчитывала бы
     раскладку, и градиент сжимался бы вместе с полосой. Значение ставит
     js/ui.js из data-width — сразу, без выезда. */
  clip-path: inset(0 100% 0 0 round 4px);
  box-shadow: 0 0 12px rgba(245,197,24,0.3);
}

/* ══════ SPRINTS ══════ */
.sprints-list { margin-top: 48px; }

.sprint-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.sprint-item:hover { border-color: rgba(245,197,24,0.15); }
.sprint-item.open {
  border-color: var(--border-hover);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2), 0 0 20px var(--yellow-glow-sm);
}

.sprint-header {
  width: 100%;
  background: none;
  border: none;
  color: var(--white);
  text-align: left;
  padding: 26px 32px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  transition: color 0.2s;
}
.sprint-header:hover { color: var(--yellow); }
.sprint-header .sprint-label {
  font-size: var(--t-label);
  color: var(--yellow);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 6px;
}
.sprint-header h3 {
  font-size: var(--t-title);
  font-weight: 700;
  margin: 0;
}
.sprint-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--yellow);
  flex-shrink: 0;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease), border-color 0.4s var(--ease);
  background: rgba(245,197,24,0.05);
}
/* Плюс — рисованная иконка, а не знак «+» из Inter: у начертания свой вес,
   который не совпадал ни с одной иконкой на странице. Поворот на 45° живёт
   на самом круге, поэтому превращение «+» в «×» работает как раньше. */
.sprint-toggle svg { width: 16px; height: 16px; }
.sprint-item.open .sprint-toggle {
  transform: rotate(45deg);
  background: rgba(245,197,24,0.1);
  border-color: var(--border-hover);
}

/* Раскрытие через дорожку грида, а не через max-height.
   Было: max-height с выдуманным потолком — 2000px при реальных 616–1048,
   и половина анимации шла вхолостую; на FAQ тот же приём с потолком в 300px
   на ширине 320px молча срезал шесть строк ответа.
   Замер (CPU ×6, три прогона): max-height давал 12/8/9 кадров дольше 32 мс,
   0fr→1fr даёт 3/1/2. Содержимое раскладывается один раз в свою натуральную
   высоту, дальше меняется только размер дорожки. Отступы живут на .panel-inner:
   на самом гриде они торчали бы полосой и в закрытом виде. */
.sprint-body,
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
/* min-height: 0 обязателен: иначе дорожка 0fr упрётся в min-content
   содержимого и панель не закроется. */
.sprint-body > .panel-inner,
.faq-a > .panel-inner {
  overflow: hidden;
  min-height: 0;
}
.sprint-item.open .sprint-body,
.faq-item.open .faq-a {
  grid-template-rows: 1fr;
}
/* Отступы вокруг содержимого: горизонталь — на контейнере (на высоту дорожки
   она не влияет), низ — отбивкой последнего блока. Нижний padding на самом
   грид-элементе не схлопнулся бы вместе с дорожкой и оставил бы под закрытым
   заголовком пустую полосу в 32px. */
.sprint-body { padding: 0 32px; }
.sprint-body > .panel-inner > :last-child { margin-bottom: 32px; }
/* Вводная спринта шла во всю ширину раскрытой панели — 113 знаков в строке
   при комфортных 45–75. */
.sprint-body p.sprint-intro {
  color: var(--yellow);
  font-size: var(--t-body);
  line-height: var(--lh-prose);
  max-width: var(--measure);
  margin-bottom: 24px;
}
.sprint-badge {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(245,197,24,0.08);
  color: var(--yellow);
  font-size: var(--t-label);
  font-weight: 700;
  border-radius: 6px;
  margin-bottom: 16px;
  margin-top: 8px;
  letter-spacing: 0.5px;
}
.sprint-body ul { list-style: none; margin-bottom: 16px; }
/* Маркер позиционируется, а не стоит флекс-элементом. При display: flex
   каждый вложенный тег становился отдельным элементом строки, и пункт
   «Идиоматичные ошибки: errors.Is errors.As, wrapping» выстраивался в одну
   неразрывную линию: на 320px её правый конец уезжал под обрез панели.
   Теперь текст — обычный поток и переносится сам. */
.sprint-body ul li {
  position: relative;
  padding: 6px 0 6px 18px;
  color: var(--gray);
  font-size: var(--t-body);
  line-height: 1.6;
}
.sprint-body ul li::before {
  content: '';
  position: absolute;
  left: 0;
  /* середина первой строки: верхний отступ + половина того, что осталось */
  top: calc(6px + (1.6em - 6px) / 2);
  width: 6px;
  height: 6px;
  background: var(--yellow);
  border-radius: 50%;
}
/* Inline-код «пилюли»: тише, выровнены по строке, не переносятся внутри токена */
code {
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', 'Cascadia Code', monospace;
  font-size: 0.84em;
  line-height: 1.4;
  color: var(--yellow);
  background: rgba(245,197,24,0.1);
  padding: 0.12em 0.5em;
  border-radius: 6px;
  white-space: nowrap;
  vertical-align: baseline;
}

/* ══════ ROADMAP ══════ */
.roadmap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
}

.rm-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--duration) var(--ease);
}
@media (hover: hover) {
  .rm-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.25), 0 0 30px var(--yellow-glow-sm);
  }
}
.rm-card-img {
  width: 100%;
  aspect-ratio: 16/9;
  background: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.rm-card-img img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  opacity: 0.12;
  object-fit: contain;
}
/* Кнопка «Рассмотреть» — клавиатурный доступ к карточке шага и единственное
   видимое приглашение на тач-экране. На мыши проявляется по наведению
   и по фокусу, пальцем — видна всегда. */
.rm-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 13px;
  border-radius: 99px;
  background: rgba(8,8,12,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  color: var(--white);
  font: inherit;
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: -0.1px;
  cursor: pointer;
  transition: opacity 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.rm-zoom:focus-visible {
  opacity: 1;
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}
@media (hover: hover) {
  .rm-zoom { opacity: 0; }
  .rm-card:hover .rm-zoom { opacity: 1; }
  .rm-zoom:hover { color: var(--yellow); border-color: var(--border-hover); background: rgba(8,8,12,0.88); }
}
@media (pointer: coarse) {
  .rm-zoom { min-height: 44px; padding: 11px 16px; }
}
.rm-card-img .rm-step-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--yellow);
  color: var(--black);
  font-size: var(--t-label);
  font-weight: 800;
  padding: 5px 14px;
  border-radius: 6px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.rm-card-body { padding: 28px; }
.rm-card-body .rm-time {
  color: var(--yellow);
  font-size: var(--t-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.rm-card-body h3 { color: var(--white); font-size: var(--t-title); margin-bottom: 8px; }
.rm-card-body p { color: var(--gray); font-size: var(--t-small); line-height: 1.7; }

.rm-card-wide { grid-column: 1 / -1; }
.rm-card-wide .rm-card-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 200px;
}
.rm-card-wide .rm-card-img { aspect-ratio: auto; }
/* Высокие скриншоты (шаги 4 и 11) растягивали карточку до 600+ px: здесь превью, целиком — по клику. */
.rm-card-wide .rm-card-img { max-height: 340px; }
.rm-card-wide .rm-card-img img { max-height: 300px; }

.roadmap-hint {
  margin: 14px auto 0;
  color: var(--yellow);
  font-size: var(--t-small);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.roadmap-hint::before {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--yellow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a2 2 0 0 1 4 0v5'/%3E%3Cpath d='M13 11V8a2 2 0 0 1 4 0v3'/%3E%3Cpath d='M17 11a2 2 0 0 1 4 0v3a7 7 0 0 1-7 7h-1a8 8 0 0 1-7-4l-2.5-4a2 2 0 0 1 3.4-2.1L7 11.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11V6a2 2 0 0 1 4 0v5'/%3E%3Cpath d='M13 11V8a2 2 0 0 1 4 0v3'/%3E%3Cpath d='M17 11a2 2 0 0 1 4 0v3a7 7 0 0 1-7 7h-1a8 8 0 0 1-7-4l-2.5-4a2 2 0 0 1 3.4-2.1L7 11.5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ══════ OFFERS ══════ */
/* Стена офферов: сумма — доказательство, документ — способ его проверить.
   Раньше здесь была карусель на 500px, где первый экран занимала титульная
   страница PDF, а сумма пряталась под ней; 13 офферов требовали 12 кликов. */
.offers-wrap {
  margin-top: 48px;
}
/* Четыре колонки жёстко, а не auto-fill: на стене всегда ровно восемь карточек
   (см. mountWall в js/main.js), и четыре колонки дают из них ровно два ряда.
   При auto-fill на промежуточной ширине выходило три колонки, то есть 3+3+2 —
   тот самый рваный хвост, от которого стена и уходит. */
.offers-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
/* Смена оффера на месте: уходит и приходит карточка, само место остаётся,
   поэтому ряд не дёргается и раскладка не пересчитывается ни на кадр. */
.offers-grid > li { transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); }
.offers-grid > li.offer-slot-out { opacity: 0; transform: translateY(-6px); }

/* Порог посчитан, а не выбран: четыре колонки внутри контейнера 1140px при
   зазорах 14px дают карточку в 237px — ровно та ширина, под которую карточка
   нарисована (сумма «369 000 ₽» плюс полоса 62px под кадр документа). Ниже
   1024px арифметика ломается, и стена переходит на две колонки: восемь
   карточек дают четыре полных ряда, хвост по-прежнему не рвётся. */
@media (max-width: 1023px) {
  .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.offers-grid--message { display: block; }

/* Строка итога: закрывает стену и называет, что она доказывает. */


.offer-card {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 20px 20px 16px;
  text-align: left;
  font: inherit;
  color: var(--white);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), transform var(--duration) var(--ease), background var(--duration) var(--ease);
  /* Повёрнутый кадр документа обрезается краем карточки, а не выпирает из неё.
     position обязателен: без него absolute у кадра считается от другого предка,
     и overflow здесь его не обрезает — кадр уезжает за пределы сетки. */
  position: relative;
  overflow: hidden;
}
/* Кадр первой страницы оффера: сумма — утверждение, документ — его основание,
   и теперь основание видно, не открывая файл. Вне потока, поэтому ни высоты
   карточки, ни раскладки не касается; на клики не реагирует — кликается вся
   карточка. Уезжает правым краем за обрез: так читается страница, а не
   наклеенная миниатюра. */
.offer-card-prev {
  position: absolute;
  top: 16px;
  right: -20px;
  width: 84px;
  height: auto;
  border-radius: 2px;
  transform: rotate(6deg);
  opacity: 0.5;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease);
}
@media (hover: hover) {
  .offer-card:hover .offer-card-prev { opacity: 0.85; transform: rotate(3deg) translate(-4px, -3px); }
}
/* Место под кадр держат только верхние три строки: подвал идёт во всю ширину,
   а кадр к тому моменту уже кончился. */
.offer-card-co,
.offer-card-sum,
.offer-card-basis { padding-right: 62px; }
@media (hover: hover) {
  .offer-card:hover {
    background: var(--surface-hover);
    border-color: var(--border-hover);
    transform: translateY(-3px);
  }
}
.offer-card:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}
.offer-card-co {
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--gray);
  letter-spacing: 0.01em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.offer-card-sum {
  margin-top: 10px;
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--yellow);
  font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.offer-card-basis {
  font-size: var(--t-label);
  color: var(--gray-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.offer-card-foot {
  width: 100%;
  margin-top: 18px;
  padding-top: 13px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.offer-card-term {
  font-size: var(--t-meta);
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}
.offer-card-open {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--gray-dim);
  transition: color var(--duration) var(--ease);
}
.offer-card-open svg { width: 13px; height: 13px; }
@media (hover: hover) { .offer-card:hover .offer-card-open { color: var(--yellow); } }

/* Узкий экран: тринадцать карточек в одну колонку — это 2800px скролла.
   Две колонки и более плотная карточка; подпись действия уступает место
   сроку, а смысл кнопки остаётся в aria-label. */
@media (max-width: 560px) {
  .offers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .offer-card { padding: 14px 14px 12px; }
  .offer-card-sum { margin-top: 8px; font-size: var(--t-title); letter-spacing: -0.5px; }
  .offer-card-basis { font-size: var(--t-label); letter-spacing: 0.04em; }
  .offer-card-co { font-size: var(--t-meta); }
  .offer-card-foot { margin-top: 12px; padding-top: 10px; gap: 6px; }
  .offer-card-term { font-size: var(--t-label); }
  .offer-card-open-t { display: none; }
  .offer-card-open svg { width: 14px; height: 14px; }
  /* Кадр документа здесь не показываем. На 152px от него остаётся 90px
     нечитаемой серой мути, а полоса в 62px, которую он просил под себя,
     переносила «ГРОСС / МЕС» и срок на вторую строку. */
  .offer-card-prev { display: none; }
  .offer-card-co,
  .offer-card-sum,
  .offer-card-basis { padding-right: 0; }
}

/* Состояния «не загрузилось»: доказательства не должны исчезать молча. */
.load-error {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 240px;
  padding: 44px 24px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--gray);
  font-size: var(--t-body);
}

/* ══════ ABOUT ══════ */
.about-photo-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-photo {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-lg);
  object-fit: cover;
  border: 1px solid rgba(245,197,24,0.15);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 40px var(--yellow-glow-sm);
}
.about-milestone {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.milestone {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  flex: 1;
  min-width: 130px;
  transition: all var(--duration) var(--ease);
}
.milestone:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
}
.milestone .m-num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--yellow);
  letter-spacing: -0.5px;
}
.milestone .m-text {
  font-size: var(--t-meta);
  color: var(--gray-dim);
  margin-top: 4px;
}
.about-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

/* ══════ SERVICES ══════ */
.price {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--yellow);
  margin: 20px 0 4px;
  letter-spacing: -0.5px;
}
/* «+ 99% первой ЗП» — часть цены, а не сноска: модель оплаты и есть позиционирование.
   Стоит в одной строке с суммой: отдельной строкой это читалось как второй
   ценник и разводило цену и уточнение на две ступени. */
.price-plus { font-size: var(--t-small); font-weight: 700; color: var(--yellow); letter-spacing: -0.2px; white-space: nowrap; }
.price-note { font-size: var(--t-meta); line-height: 1.6; color: var(--gray); margin-bottom: 18px; }
/* Ссылка на подробный ответ вместо пересказа его же на карточке. Раньше здесь
   лежал абзац в 102px, который повторял ответ из FAQ и делал среднюю карточку
   выше двух соседних. */
.price-how { color: var(--yellow); border-bottom: 1px solid var(--yellow-dim); white-space: nowrap; }
.price-how:hover { border-bottom-color: var(--yellow); }
.service-features { list-style: none; margin-top: 14px; }
/* Действие сразу за списком. Кнопка нужна всем трём — раньше она была только
   у бесплатной консультации, и две платные услуги заканчивались списком и
   ничем. Но прибивать её к низу карточки нельзя: карточки разной длины, и
   между списком и кнопкой открывалась пустая полоса в треть карточки. */
.card-cta { margin-top: 24px; align-self: flex-start; }

.service-features li {
  position: relative;
  padding: 7px 0 7px 15px;
  color: var(--gray);
  font-size: var(--t-body);
  line-height: 1.5;
}
.service-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(7px + (1.5em - 5px) / 2);
  width: 5px;
  height: 5px;
  background: var(--yellow);
  border-radius: 50%;
}
.card-popular { border-color: rgba(245,197,24,0.3) !important; }
.card-popular::before { opacity: 0.5; }
.card-popular .popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: var(--black);
  font-size: var(--t-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 5px 20px;
  border-radius: 0 0 8px 8px;
}

/* ══════ FAQ ══════ */
.faq-layout {
  display: grid;
  /* Колонка под гофера — 384px, ровно натуральный размер картинки: он стоял
     зажатым в 300px, то есть был мельче, чем есть, и рядом с колонкой вопросов
     выглядел случайно маленьким. */
  grid-template-columns: minmax(0, 1fr) 384px;
  gap: 56px;
  align-items: start;
  margin-top: 32px;
}
.faq-list {
  min-width: 0;
}
.faq-visual {
  position: sticky;
  top: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-visual img {
  width: 100%;
  max-width: 384px;   /* родной размер файла; выше — уже апскейл */
  height: auto;
  mix-blend-mode: lighten;
  transform: rotate(-6deg);
}
@media (max-width: 900px) {
  .faq-layout { grid-template-columns: 1fr; gap: 0; }
  .faq-visual { display: none; }
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--white);
  font-size: var(--t-body);
  font-weight: 600;
  text-align: left;
  /* 18px вместо 24: семь вопросов давали строку в 69px и список в 483px при
     габарите гофера в 330px — текст расползался, а картинка рядом терялась.
     Теперь строка 57px, список ~400px, и два столбца сопоставимы по высоте. */
  padding: 18px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: inherit;
  transition: color 0.2s;
  letter-spacing: -0.2px;
}
.faq-q:hover { color: var(--yellow); }
.faq-q .faq-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--yellow);
  transition: transform 0.4s var(--ease);
}
.faq-q .faq-icon svg { width: 16px; height: 16px; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-a { transition-duration: 0.35s; }
.faq-a > .panel-inner > :last-child { margin-bottom: 24px; }
.faq-a p { color: var(--gray); font-size: var(--t-body); line-height: var(--lh-prose); max-width: var(--measure); }

/* ══════ CONSULTATION CTA ══════ */
.consult-box {
  background: var(--surface);
  border: 1px solid rgba(245,197,24,0.15);
  border-radius: var(--radius-lg);
  padding: 64px 56px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.consult-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--yellow), transparent);
}
.consult-box::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse at center top, rgba(245,197,24,0.08) 0%, transparent 60%);
  pointer-events: none;
}
.consult-steps {
  display: flex;
  justify-content: center;
  gap: 56px;
  margin: 40px 0;
  text-align: center;
  position: relative;
  z-index: 1;
}
.consult-step {
  flex: 1;
  max-width: 160px;
}
.consult-step .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
  font-weight: 900;
  font-size: var(--t-title);
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(245,197,24,0.3);
}
.consult-step p { font-size: var(--t-body); color: var(--gray); font-weight: 500; }

/* ══════ FOOTER ══════ */
footer {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--gray-dim);
  font-size: var(--t-small);
  background: var(--black);
}
footer a { color: var(--yellow); }
.footer-links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 20px;
  list-style: none;
}
.footer-links a {
  color: var(--gray);
  font-size: var(--t-small);
  font-weight: 500;
}
.footer-links a:hover { color: var(--yellow); }

/* ══════════════════════════════════════════════
   RESPONSIVE — Mobile First
   ══════════════════════════════════════════════ */
@media (max-width: 1024px) {
  :root {
    --section-py: 96px;
  }
  .grid-2 { gap: 40px; }
  .hero-stats { gap: 28px; }
}
/* С пунктом «Статьи» в шапке шесть ссылок и кнопка: на 769–870px при
   зазоре 32px «Обо мне» ломалось в две строки и налезало на логотип.
   С 768px и ниже меню — шторка, её эти правила не касаются. */
@media (min-width: 769px) and (max-width: 1024px) {
  nav .nav-links { gap: 16px; margin-left: 24px; }
  nav .nav-links a { white-space: nowrap; }
  nav .nav-links .btn { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 769px) and (max-width: 880px) {
  nav .nav-links { gap: 12px; margin-left: 16px; }
  nav .nav-links a { font-size: var(--t-meta); }
}

/* ══════ ЛИПКАЯ КНОПКА (телефон) ══════ */
/* На десктопе не нужна: там кнопка есть в шапке и всегда на виду. */
.cta-bar { display: none; }

@media (max-width: 768px) {
  .cta-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    background: rgba(8, 8, 12, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(245,197,24,0.14);
    box-shadow: 0 -18px 40px rgba(0,0,0,0.5);
    transform: translateY(105%);
    transition: transform 0.34s var(--ease);
  }
  .cta-bar.on { transform: none; }
  .cta-bar-in {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .cta-bar-note {
    font-size: var(--t-label);
    color: var(--gray-dim);
    letter-spacing: 0.01em;
    text-align: center;
  }
  .cta-bar .btn {
    width: 100%;
    text-align: center;
    padding: 14px 18px;
  }
  /* В альбомной ориентации вертикали мало — прячем подпись и ужимаем полосу. */
  @media (max-height: 460px) {
    .cta-bar-note { display: none; }
    .cta-bar-in { padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .cta-bar .btn { padding: 10px 18px; }
  }
}

@media (max-width: 768px) {
  :root {
    --section-py: 72px;
  }

  .mesh-deco { display: none; }

  /* Nav — мобильная шторка */
  nav .nav-inner { height: 62px; }
  nav.menu-open { background: rgba(8, 8, 12, 0.98); border-bottom-color: rgba(245,197,24,0.14); }

  .nav-links {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 62px;
    left: 0;
    right: 0;
    max-height: calc(100vh - 62px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(10, 10, 15, 0.985);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    padding: 10px 14px calc(20px + env(safe-area-inset-bottom, 0px));
    gap: 0 !important;
    border-bottom: 1px solid rgba(245,197,24,0.14);
    box-shadow: 0 26px 60px rgba(0,0,0,0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s var(--ease);
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
  .nav-links li { width: 100%; }
  .nav-links li + li a:not(.btn) { border-top: 1px solid rgba(255,255,255,0.05); }
  .nav-links a:not(.btn) {
    display: block;
    width: 100%;
    padding: 15px 10px;
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.2px;
  }
  .nav-links a:not(.btn):active { color: var(--yellow); }
  .nav-links .btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    text-align: center;
    padding: 15px 18px;
    font-size: var(--t-body);
  }
  .burger { display: flex; }

  /* Hero */
  #hero { min-height: auto; padding-top: 110px; padding-bottom: 64px; }
  #hero .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-photo-wrap { order: -1; }
  .hero-photo { width: 220px; height: 280px; }
  .hero-stats { gap: 20px; flex-wrap: wrap; }
  .hero-stats .stat-num { font-size: 1.6rem; }

  /* Grids */
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .grid-3,
  .roadmap-grid { grid-template-columns: 1fr; }
  .rm-card-wide .rm-card-inner { grid-template-columns: 1fr; }
  .rm-card-wide .rm-card-img { aspect-ratio: 16/9; }
  .whom-grid { grid-template-columns: 1fr; }
  .awaits-grid { grid-template-columns: 1fr; }
  .awaits-salary-row { grid-template-columns: 1fr; gap: 12px; }
  .awaits-salary { padding: 22px 20px; }
  .awaits-salary .sal-amount { font-size: 1.7rem; }
  .awaits-salary .sal-label { font-size: var(--t-body); }
  .awaits-salary .sal-note { font-size: var(--t-meta); }
  .awaits-salary:hover { transform: none; }
  .skills-layout { grid-template-columns: 1fr; }

  /* Cards */
  .card { padding: 28px; }
  .whom-card { flex-direction: column; gap: 12px; }

  /* Sprint */
  .sprint-header { padding: 18px 16px; }
  .sprint-header .sprint-label { font-size: var(--t-label); letter-spacing: 1px; }
  .sprint-header h3 { font-size: var(--t-body); }
  .sprint-item.open .sprint-body { padding: 0 16px 20px; }

  /* Consult */
  .consult-steps { flex-direction: column; align-items: center; gap: 24px; }
  .consult-box { padding: 36px 24px; }

  /* About */
  .about-milestone { flex-direction: column; }

  /* Логотип */
  nav .logo { padding: 10px 0; }
  .logo-mark { height: 26px; }
  .logo-txt b { font-size: 0.88rem; letter-spacing: 0.04em; }
  .logo-txt i { letter-spacing: 0.26em; margin-top: 3px; }

  /* Футер */
  footer { padding: 40px 0 34px; }
  .footer-links {
    flex-wrap: wrap;
    gap: 4px 16px;
    margin-bottom: 16px;
    padding: 0 8px;
  }
  .footer-links li { display: flex; }
  .footer-links a { font-size: var(--t-small); padding: 11px 6px; }
}

@media (max-width: 480px) {
  :root {
    --section-py: 56px;
  }

  .container { padding: 0 16px; }

  /* Первый экран телефона обязан доводить до кнопки: раньше «Бесплатная
     консультация» начиналась на 839-й точке при высоте экрана 844 — то есть
     была срезана краем. Ужимаем фото и вертикальные зазоры, заголовок не
     трогаем. Цифры под кнопками теперь выглядывают снизу и зовут листать. */
  #hero { padding-top: 96px; padding-bottom: 52px; }
  #hero .hero-grid { gap: 28px; }
  .hero-photo { width: 200px; height: 240px; }
  .hero-cta { margin-top: 24px; }
  .hero-stats { gap: 16px; margin-top: 32px; }
  .hero-cta .btn { width: 100%; text-align: center; }

  .consult-steps { gap: 16px; }

  .logo-mark { height: 24px; }
  .logo-txt b { font-size: 0.82rem; }

  .footer-links { gap: 4px 16px; }
  .footer-links a { font-size: var(--t-small); }
}

/* ═══════════════════════════════════════════════════════════════
   REWORK — переработанные секции (селектор, чат, отзывы-стена, рынок)
   ═══════════════════════════════════════════════════════════════ */

/* ───────── Общий лайтбокс (селектор + roadmap) — только картинка ───────── */
.lbx { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease); }
.lbx.open { opacity: 1; visibility: visible; transition: opacity var(--duration) var(--ease); }
.lbx-back { position: absolute; inset: 0; background: rgba(4,4,8,0.9); backdrop-filter: blur(8px); }
.lbx-fig { position: relative; z-index: 1; max-width: min(1100px,94vw); max-height: 90vh; display: flex; align-items: center; justify-content: center; transform: scale(0.96); transition: transform var(--duration) var(--ease); margin: 0; }
.lbx.open .lbx-fig { transform: none; }
.lbx-fig img { max-width: 100%; max-height: 90vh; width: auto; height: auto; border-radius: 12px; box-shadow: 0 30px 90px rgba(0,0,0,0.7); }
.lbx-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(20,20,26,0.7); border: 1px solid var(--border); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); }
.lbx-close:hover { color: var(--yellow); border-color: var(--border-hover); }
.lbx-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; background: rgba(20,20,26,0.6); border: 1px solid var(--border); color: var(--yellow); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); }
.lbx-nav:hover { background: rgba(245,197,24,0.15); border-color: var(--border-hover); }
.lbx-nav.prev { left: 18px; } .lbx-nav.next { right: 18px; }
.lbx-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 4; font-size: var(--t-small); color: var(--gray); background: rgba(20,20,26,0.7); padding: 6px 14px; border-radius: 99px; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .lbx-nav { width: 44px; height: 44px; } }

/* ───────── Всплывашка PDF-оффера (полный документ, прокрутка) ───────── */
.pbx { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding: 40px 24px; opacity: 0; visibility: hidden; overflow-y: auto; overscroll-behavior: contain; transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease); }
.pbx.open { opacity: 1; visibility: visible; transition: opacity var(--duration) var(--ease); }
.pbx-back { position: fixed; inset: 0; background: rgba(4,4,8,0.9); backdrop-filter: blur(8px); }
.pbx-doc { position: relative; z-index: 1; max-width: min(820px, 94vw); margin: auto; display: flex; flex-direction: column; gap: 16px; transform: scale(0.98); transition: transform var(--duration) var(--ease); }
.pbx.open .pbx-doc { transform: none; }
.pbx-doc canvas { width: 100%; height: auto; display: block; border-radius: 10px; box-shadow: 0 24px 80px rgba(0,0,0,0.7); background: #fff; }
.pbx-loading { color: var(--gray); font-size: var(--t-body); text-align: center; padding: 60px 0; }
.pbx-close { position: fixed; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; background: rgba(20,20,26,0.7); border: 1px solid var(--border); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); }
.pbx-close:hover { color: var(--yellow); border-color: var(--border-hover); }

/* ───────── Селектор скриншотов: матовая «доска» + лента превью ───────── */
.shot { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.shot-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.shot-head .dots3 { display: flex; gap: 6px; }
.shot-head .dots3 i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.12); }
.shot-head .dots3 i:first-child { background: rgba(245,197,24,0.5); }
.shot-count { font-size: var(--t-meta); color: var(--gray-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.shot-count b { color: var(--yellow); }
.shot-stage { position: relative; aspect-ratio: 16/10; background: radial-gradient(120% 120% at 50% 0%, #20202b 0%, #131319 70%); display: flex; align-items: center; justify-content: center; padding: 22px; cursor: zoom-in; }
.shot-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,0.5); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.shot-stage::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(0,0,0,0.35); pointer-events: none; }
/* «Увеличить» — кнопка, а не значок. Раньше она была div'ом с opacity: 0 и
   проявлялась только по :hover, то есть на телефоне не появлялась никогда. */
.shot-zoom { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; padding: 0; border-radius: 9px; background: rgba(8,8,12,0.6); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--white); cursor: zoom-in; transition: opacity 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); z-index: 2; }
.shot-zoom:focus-visible { opacity: 1; outline: 2px solid var(--yellow); outline-offset: 2px; }
@media (hover: hover) {
  .shot-zoom { opacity: 0; }
  .shot-stage:hover .shot-zoom { opacity: 1; }
  .shot-zoom:hover { color: var(--yellow); border-color: var(--border-hover); }
}
/* Палец: кнопка видна всегда и дорастает до 44px. */
@media (pointer: coarse) {
  .shot-zoom { width: 44px; height: 44px; }
}
.shot-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(8,8,12,0.55); backdrop-filter: blur(8px); border: 1px solid var(--border); color: var(--yellow); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: 0.25s var(--ease); }
.shot-arrow:hover { background: rgba(245,197,24,0.14); border-color: var(--border-hover); transform: translateY(-50%) scale(1.08); }
.shot-arrow.prev { left: 14px; } .shot-arrow.next { right: 14px; }
.shot-caption { padding: 18px 22px; border-top: 1px solid var(--border); transition: opacity 0.35s var(--ease); }
.shot-cap-title { font-size: var(--t-title); font-weight: 700; color: var(--white); margin-bottom: 6px; }
.shot-cap-title::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--yellow); margin-right: 9px; vertical-align: middle; transform: translateY(-1px); }
.shot-cap-desc { font-size: var(--t-body); line-height: 1.6; color: var(--gray); }
.shot-cap-desc b { color: var(--yellow); font-weight: 600; }
.shot-thumbs { display: flex; gap: 10px; padding: 14px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.shot-thumbs::-webkit-scrollbar { display: none; }
.shot-thumb { flex: 0 0 auto; width: 84px; height: 54px; padding: 0; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #16161e; cursor: pointer; opacity: 0.5; transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease); position: relative; }
.shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-thumb:hover { opacity: 0.85; }
.shot-thumb.on { opacity: 1; border-color: var(--yellow); }
.shot-thumb:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; opacity: 1; }
/* Точки — единственное управление лентой на телефоне, поэтому сама точка
   остаётся 7px, а кнопка вокруг неё держит полноценные 44×44. */
.shot-dots { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0; padding: 2px 8px 6px; }
.shot-dot { width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.shot-dot i { width: 22px; height: 7px; border-radius: 99px; background: rgba(255,255,255,0.15); clip-path: inset(0 34.1% round 99px); transition: clip-path 0.3s var(--ease), background 0.3s var(--ease); }
.shot-dot.on i { clip-path: inset(0 0 round 99px); background: var(--yellow); }
.shot-dot:focus-visible { outline: 2px solid var(--yellow); outline-offset: -6px; border-radius: 10px; }
@media (max-width: 560px) { .shot-thumbs { display: none; } .shot-dots { display: flex; } }

/* ───────── Чат и поддержка — интерактивный телефон ───────── */
.comm { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px; position: relative; overflow: hidden; }
.comm::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(245,197,24,0.3), transparent); }
.comm-features { list-style: none; margin-top: 28px; }
.comm-features li { padding: 13px 0; font-size: var(--t-body); color: var(--gray); border-bottom: 1px solid rgba(255,255,255,0.04); }
.comm-features li:last-child { border: none; }
.comm-features li strong { color: var(--white); }
.comm > * { min-width: 0; }
@media (max-width: 900px) {
  .comm { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 32px 20px; justify-items: stretch; }
  .comm .tgp { justify-self: center; }
}
.tg { --tg-bg: #0e0e14; --tg-panel: #15151d; --tg-line: rgba(255,255,255,0.06); --tg-in: #1c1c26; --tg-out: #3a3211; --tg-out2: #4a3f15; }
.tg-bubble-time { font-size: 0.62rem; color: var(--gray-dim); margin-top: 3px; text-align: right; font-variant-numeric: tabular-nums; }
.tgp-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }

.tgp { width: 300px; max-width: 100%; margin-inline: auto; justify-self: center; box-sizing: border-box; aspect-ratio: 300/620; background: #05050a; border-radius: 42px; border: 1px solid rgba(255,255,255,0.1); padding: 11px; box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 0 0 2px #000; position: relative; }
.tgp-screen { width: 100%; height: 100%; border-radius: 32px; overflow: hidden; background: var(--tg-bg); position: relative; display: flex; flex-direction: column; }
.tgp-notch { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 108px; height: 24px; background: #05050a; border-radius: 0 0 16px 16px; z-index: 6; }
.tg-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 30px 14px 12px; background: var(--tg-panel); border-bottom: 1px solid var(--tg-line); z-index: 4; }
.tg-topbar .tg-back { width: 26px; height: 26px; display: none; align-items: center; justify-content: center; color: var(--yellow); cursor: pointer; flex-shrink: 0; margin-left: -4px; }
.tg-grp { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow-dim), var(--yellow)); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #000; font-size: 0.9rem; flex-shrink: 0; overflow: hidden; }
.tg-grp img { width: 100%; height: 100%; object-fit: cover; }
.tg-ttl { min-width: 0; flex: 1; }
.tg-ttl b { display: block; font-size: 0.82rem; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-ttl span { display: block; font-size: 0.66rem; color: var(--gray-dim); }
.tg-body { flex: 1; overflow: hidden; position: relative; }
.tg-pane { position: absolute; inset: 0; display: flex; flex-direction: column; transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }
.tg-list { overflow-y: auto; padding: 6px 0; }
.tg-list::-webkit-scrollbar { width: 5px; } .tg-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
.tg-row { display: flex; align-items: center; gap: 11px; padding: 9px 14px; cursor: pointer; transition: background 0.18s; }
.tg-row:hover { background: rgba(255,255,255,0.04); }
.tg-ico { width: 38px; height: 38px; border-radius: 50%; background: var(--tg-in); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; flex-shrink: 0; }
.tg-rc { min-width: 0; flex: 1; }
.tg-rc .tg-rn { display: flex; justify-content: space-between; gap: 8px; }
.tg-rc .tg-rn b { font-size: 0.8rem; color: var(--white); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-rc .tg-rn time { font-size: 0.62rem; color: var(--gray-dim); flex-shrink: 0; }
.tg-rc .tg-rp { font-size: 0.72rem; color: var(--gray-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.tg-rc .tg-rp b { color: var(--gray); font-weight: 600; }
.tg-badge { min-width: 18px; height: 18px; border-radius: 99px; background: var(--yellow); color: #000; font-size: 0.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; padding: 0 5px; flex-shrink: 0; }
.tg-chat { padding: 14px 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; background: radial-gradient(60% 60% at 80% 0%, rgba(245,197,24,0.04), transparent 70%), var(--tg-bg); }
.tg-chat::-webkit-scrollbar { width: 5px; } .tg-chat::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 99px; }
.tg-msg { max-width: 80%; padding: 8px 11px; border-radius: 14px; font-size: 0.78rem; line-height: 1.45; position: relative; }
.tg-msg.in { align-self: flex-start; background: var(--tg-in); border-bottom-left-radius: 5px; }
.tg-msg.out { align-self: flex-end; background: linear-gradient(135deg, var(--tg-out2), var(--tg-out)); border-bottom-right-radius: 5px; }
.tg-msg .tg-au { font-size: 0.68rem; font-weight: 700; color: var(--yellow); margin-bottom: 3px; }
.tg-msg.out .tg-au { color: var(--yellow-light); }
.tg-day { align-self: center; font-size: 0.62rem; color: var(--gray-dim); background: rgba(255,255,255,0.05); padding: 3px 12px; border-radius: 99px; margin: 4px 0; }
.tgp[data-view="list"] .tg-pane.list { transform: none; opacity: 1; }
.tgp[data-view="chat"] .tg-pane.chat { transform: none; opacity: 1; }
.tgp[data-view="chat"] .tg-pane.list { transform: translateX(-30%); opacity: 0; pointer-events: none; }
.tgp[data-view="list"] .tg-pane.chat { transform: translateX(100%); opacity: 0; pointer-events: none; }
.tgp[data-view="chat"] .tg-back { display: flex; }

/* ───────── Отзывы — «стена» (карусель по 3) + всплывашка полного текста ───────── */
.rvW-viewport { overflow: hidden; }
.rvW-track { display: flex; gap: 18px; transition: transform 0.45s var(--ease); }
.rvW-card { flex: 0 0 auto; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 24px 22px; transition: border-color 0.3s, transform 0.3s; }
@media (hover: hover) { .rvW-card:hover { border-color: var(--border-hover); transform: translateY(-3px); } }
.rvW-card.offer { border-color: var(--border-hover); background: radial-gradient(130% 90% at 100% 0%, var(--yellow-glow-sm), transparent 60%), var(--surface); }
.rvW-top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.rvW-av { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow-dim), var(--yellow)); color: #000; font-weight: 800; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.rvW-av img { width: 100%; height: 100%; object-fit: cover; }
.rvW-nm { min-width: 0; flex: 1; }
/* Имя и плашка верификации — одна строка: плашка не должна уезжать под имя
   и не должна съедаться многоточием, поэтому обрезается только имя. */
.rvW-nm b { display: flex; align-items: center; gap: 6px; font-size: var(--t-body); color: var(--white); }
.rvW-nmt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Хэндл — ссылка в Telegram: секция обещает, что автору можно написать. */
/* Подчёркивание рисуем text-decoration, а не border-bottom: тогда вертикальный
   padding увеличивает площадь тапа (хэндл был 18px высотой), не отрывая линию
   от текста — она следует за буквами, а не за краем padding-бокса. */
.rvW-handle, .rvA-handle { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 3px; padding: 5px 0; transition: color var(--duration) var(--ease), text-decoration-color var(--duration) var(--ease); }
.rvW-handle:hover, .rvA-handle:hover { color: var(--yellow); text-decoration-color: rgba(245,197,24,0.45); }
.rvW-handle:focus-visible, .rvA-handle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; border-radius: 3px; }
/* Прямой потомок: внутри <b> теперь тоже есть span-ы (имя и плашка), и они
   не должны становиться подписью. */
.rvW-nm > span { font-size: var(--t-meta); color: var(--gray-dim); }
/* Тег («Без коммерческого опыта») ушёл из строки с именем на свою строку.
   В строке он занимал 174px из 302 и оставлял имени 38 — «@mikunak»
   обрезалось до «@...». Имя — это личность, которая подписывается под
   отзывом, и укорачивать его ради вторичной пометки нельзя. */
.rvW-tag { align-self: flex-start; margin: -4px 0 14px; }
.rvW-badge { font-size: var(--t-label); font-weight: 800; color: #000; background: var(--yellow); padding: 4px 9px; border-radius: 99px; white-space: nowrap; flex-shrink: 0; }
.rvW-txt { color: var(--gray); font-size: var(--t-body); line-height: 1.7; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rvW-more { align-self: flex-start; margin-top: 6px; background: none; border: none; color: var(--yellow); font: inherit; font-size: var(--t-small); font-weight: 700; cursor: pointer; padding: 11px 0; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.rvW-more[hidden] { display: none; }
.rvW-more:hover { color: var(--yellow-light); }
.rvx-empty { color: var(--gray-dim); font-style: italic; }
.rvW-more svg { width: 13px; height: 13px; }
.rvW-spacer { margin-top: auto; }
.rvW-offer { display: flex; gap: 18px; margin-top: auto; padding-top: 16px; }
.rvW-offer div { display: flex; flex-direction: column; }
.rvW-offer b { color: var(--yellow); font-weight: 800; font-size: 1rem; font-variant-numeric: tabular-nums; }
.rvW-offer span { color: var(--gray-dim); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 3px; }
/* шапка/чипы — общие для всплывашки отзыва */
.rvA-head { display: flex; align-items: center; gap: 14px; }
.rvA-av { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(135deg, var(--yellow-dim), var(--yellow)); color: #000; font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.rvA-av img { width: 100%; height: 100%; object-fit: cover; }
.rvA-meta { min-width: 0; flex: 1; overflow: hidden; }
.rvA-name { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-weight: 700; font-size: var(--t-title); color: var(--white); overflow-wrap: anywhere; }
.rvA-ver { width: 16px; height: 16px; border-radius: 50%; background: var(--yellow); color: #000; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.rvA-ver svg { width: 9px; height: 9px; }
.rvA-sub { display: flex; align-items: center; gap: 10px; margin-top: 3px; flex-wrap: wrap; }
.rvA-role { font-size: var(--t-meta); color: var(--gray-dim); }
.rvA-chips { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.rvA-chip { display: inline-flex; align-items: baseline; gap: 5px; background: rgba(245,197,24,0.08); border: 1px solid rgba(245,197,24,0.2); border-radius: 99px; padding: 6px 13px; white-space: nowrap; }
.rvA-chip b { color: var(--yellow); font-weight: 800; font-size: var(--t-body); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.rvA-chip span { color: var(--gray-dim); font-size: var(--t-label); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.rvx { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease); }
.rvx.open { opacity: 1; visibility: visible; transition: opacity var(--duration) var(--ease); }
.rvx-back { position: absolute; inset: 0; background: rgba(4,4,8,0.86); backdrop-filter: blur(8px); }
.rvx-card { position: relative; z-index: 1; width: min(680px,100%); max-height: 86vh; display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface) 0%, var(--dark-alt) 100%); border: 1px solid var(--border-hover); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px var(--yellow-glow-sm); transform: translateY(12px) scale(0.97); transition: transform var(--duration) var(--ease); overflow: hidden; }
.rvx.open .rvx-card { transform: none; }
.rvx-head { padding: 30px 34px 4px; flex-shrink: 0; }
.rvx-head .rvA-head { margin-bottom: 0; }
.rvx-body { padding: 20px 34px 34px; overflow-y: auto; color: var(--gray); font-size: var(--t-body); line-height: 1.85; overflow-wrap: anywhere; }
.rvx-body p { margin: 0 0 14px; }
.rvx-body::-webkit-scrollbar { width: 7px; } .rvx-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 99px; }
.rvx-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(12,12,16,0.6); border: 1px solid var(--border); color: var(--white); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease); }
.rvx-close:hover { color: var(--yellow); border-color: var(--border-hover); }
@media (max-width: 560px) {
  .rvx-head { padding: 26px 22px 4px; }
  .rvx-body { padding: 16px 22px 26px; }
  /* На узких экранах шапка переносится в колонку: строка «аватар + имя», под ней бейджи. */
  .rvx-head .rvA-head { flex-wrap: wrap; padding-right: 44px; }
  .rvx-head .rvA-chips { flex: 1 1 100%; margin-left: 0; }
  .rvx-head .rvA-chip { flex: 0 1 auto; min-width: 0; }
  .rvx-head .rvA-chip span { white-space: normal; }
}
/* стрелки/точки для «стены» */
.cnav { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px 0 0; }
.cnav button { flex: 0 0 auto; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: var(--yellow); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.25s var(--ease); }
.cnav button:hover { background: rgba(245,197,24,0.12); border-color: var(--border-hover); transform: scale(1.07); }
/* Точки страниц — кнопки: сама точка остаётся мелкой, а поле тапа вокруг неё
   держит 44×44 и ловит фокус с клавиатуры. */
.cdots { display: flex; gap: 0; align-items: center; }
.cdots button { width: 32px; height: 44px; padding: 0; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* Пилюля растёт не шириной, а clip-path: ширина дёргает раскладку на каждом
   кадре, а clip-path считается композитором. Скруглённые торцы сохраняются
   благодаря `round` в самой форме обрезки. Инактив: (24−7)/2 / 24 = 35.4%. */
.cdots button i { width: 24px; height: 7px; border-radius: 99px; background: rgba(255,255,255,0.15); clip-path: inset(0 35.4% round 99px); transition: clip-path 0.3s var(--ease), background 0.3s var(--ease); }
.cdots button.on i { clip-path: inset(0 0 round 99px); background: var(--yellow); }
.cdots button:focus-visible { outline: 2px solid var(--yellow); outline-offset: -8px; border-radius: 10px; }
/* Много страниц — вместо ряда одинаковых точек счётчик: он и влезает,
   и говорит больше, чем семнадцать неразличимых кружков. */
.cdots--count { min-width: 64px; justify-content: center; }
.cdots-count { font-size: var(--t-small); font-weight: 600; color: var(--gray-dim); font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.cdots-count b { color: var(--yellow); font-weight: 800; }

/* ───────── Результаты на рынке — лента цифр ───────── */
.mkA { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 40px; }
.mkA-cell { background: var(--surface); padding: 38px 28px; text-align: center; transition: background 0.3s; }
.mkA-cell:hover { background: var(--surface-hover); }
.mkA-num { font-size: clamp(2.2rem,4vw,3.2rem); font-weight: 900; color: var(--yellow); letter-spacing: var(--ls-display); line-height: 1; font-variant-numeric: tabular-nums; }
.mkA-num .u { font-size: 0.5em; }
.mkA-lbl { font-size: var(--t-body); color: var(--white); font-weight: 600; margin-top: 12px; }
.mkA-sub { font-size: var(--t-meta); color: var(--gray-dim); margin-top: 4px; }
/* Шапка секции коротка, и справа от неё оставалась дыра во всю высоту заголовка.
   Заметка про главную метрику переехала туда: сама по себе она ссылка на канал,
   поэтому и иконка, и стрелка в тексте — про то, что по ней можно перейти. */
.mkA-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 40px; align-items: center; }
.mkA-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--t-meta);
  line-height: 1.6;
  color: var(--gray);
  transition: background 0.3s, border-color 0.3s;
}
.mkA-note:hover { background: var(--surface-hover); border-color: var(--yellow); }
.mkA-note b { color: var(--white); font-weight: 600; white-space: nowrap; }
.mkA-note-ic {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--black);
}
@media (max-width: 900px) { .mkA-head { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
@media (max-width: 768px) { .mkA { grid-template-columns: 1fr 1fr; } .mkA-cell { padding: 28px 18px; } }

/* ───────── Перетаскивание мышью (селектор + стена) ───────── */
.shot-stage img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
.shot-stage { user-select: none; }
.rvW-viewport { cursor: grab; user-select: none; }
.rvW-viewport:active { cursor: grabbing; }
.rvW-card { cursor: pointer; }

/* ═══════════════════════════════════════════════
   PET V4 — интерактивный артефакт «Marketplace v4»
   ═══════════════════════════════════════════════ */
.v4 { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

/* ── Шапка ── */
.v4-top { padding: 34px 32px 26px; background: radial-gradient(120% 140% at 8% 0%, rgba(245,197,24,0.08), transparent 60%); border-bottom: 1px solid var(--border); }
.v4-badge { display: inline-block; font-size: var(--t-label); font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--yellow); background: var(--yellow-glow-sm); border: 1px solid var(--border-hover); border-radius: 99px; padding: 6px 14px; }
.v4-top h3 { font-size: var(--t-sub); font-weight: 800; letter-spacing: var(--ls-head); margin: 16px 0 10px; }
.v4-top p { color: var(--gray); max-width: 720px; font-size: var(--t-body); }
.v4-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.v4-stack span { font-size: var(--t-meta); font-weight: 600; color: var(--white); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 6px 11px; }

/* ── Табы сценариев ── */
.v4-tabs { display: flex; gap: 1px; background: var(--border); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.v4-tabs::-webkit-scrollbar { display: none; }
.v4-tab { flex: 1 0 auto; min-width: 150px; background: var(--dark-alt); border: 0; border-top: 2px solid transparent; color: var(--gray); text-align: left; padding: 14px 18px; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; font-family: inherit; }
.v4-tab b { display: block; font-size: var(--t-body); font-weight: 700; color: var(--white); }
.v4-tab i { display: block; font-style: normal; font-size: var(--t-meta); color: var(--gray-dim); margin-top: 2px; }
.v4-tab:hover { background: var(--surface-hover); }
.v4-tab.on { background: var(--surface); border-top-color: var(--yellow); }
.v4-tab.on b { color: var(--yellow); }

/* ── Сцена + панель ── */
.v4-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1px; background: var(--border); }
.v4-stage { background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,0.035), transparent 65%), var(--dark); padding: 18px 18px 8px; }
.v4-stage svg { width: 100%; height: auto; display: block; overflow: visible; }
.v4-hint { text-align: center; font-size: var(--t-meta); color: var(--gray-dim); padding: 6px 0 12px; }

/* узлы */
.v4-node { cursor: pointer; outline: none; }
.v4-node rect { fill: var(--surface); stroke: rgba(255,255,255,0.1); stroke-width: 1.4; transition: stroke 0.3s, fill 0.3s, filter 0.3s; }
.v4-node text { fill: var(--white); font-family: inherit; pointer-events: none; } /* text-anchor — атрибутом на элементе */
.v4-n-title { font-size: 15px; font-weight: 700; }
.v4-n-sub { font-size: 11px; fill: var(--gray-dim); font-weight: 500; }
.v4-node[data-kind="db"] rect { fill: #12121a; }
.v4-node[data-kind="ext"] rect { fill: transparent; stroke-dasharray: 5 4; }
.v4-node:hover rect, .v4-node:focus-visible rect { stroke: var(--border-hover); fill: var(--surface-hover); }
.v4-node.on rect { stroke: var(--yellow); fill: rgba(245,197,24,0.08); filter: drop-shadow(0 0 14px rgba(245,197,24,0.28)); }
.v4-node.on .v4-n-title { fill: var(--yellow); }

/* связи */
.v4-edge { color: rgba(255,255,255,0.22); }
.v4-e-line { fill: none; stroke: rgba(255,255,255,0.14); stroke-width: 1.6; transition: stroke 0.3s; }
.v4-e-flow { fill: none; stroke: transparent; stroke-width: 2.6; stroke-dasharray: 7 9; stroke-linecap: round; }
.v4-e-label { fill: var(--gray-dim); font-size: 11px; font-weight: 600; font-family: inherit; transition: fill 0.3s; }
.v4-edge.on { color: var(--yellow); }
.v4-edge.on .v4-e-line { stroke: rgba(245,197,24,0.45); }
.v4-edge.on .v4-e-flow { stroke: var(--yellow); animation: v4dash 0.85s linear infinite; }
.v4-edge.on .v4-e-label { fill: var(--yellow); }
@keyframes v4dash { to { stroke-dashoffset: -32; } }

/* ── Плеер и шаги ── */
.v4-side { background: var(--surface); display: flex; flex-direction: column; min-width: 0; }
.v4-player { padding: 16px 18px 0; }
.v4-play { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-size: var(--t-body); font-weight: 700; color: var(--black); background: var(--yellow); border: 0; border-radius: var(--radius-sm); padding: 12px 16px; min-height: 44px; cursor: pointer; transition: background 0.25s, transform 0.15s; }
.v4-play:hover { background: var(--yellow-light); }
.v4-play:active { transform: scale(0.98); }
.v4-ico { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--black); }
.v4-play.playing .v4-ico { width: 10px; height: 12px; border: 0; background: linear-gradient(to right, var(--black) 0 3px, transparent 3px 7px, var(--black) 7px 10px); }
.v4-progress { height: 3px; background: rgba(255,255,255,0.07); border-radius: 99px; margin-top: 12px; overflow: hidden; }
/* Заполнение тянем transform'ом, а не width: ширина заставляет браузер
   пересчитывать раскладку на каждом кадре. Скругление даёт дорожка
   (overflow: hidden), поэтому масштабирование его не искажает. */
.v4-progress i { display: block; height: 100%; width: 100%; background: var(--yellow); border-radius: 99px; transform: scaleX(0); transform-origin: left center; transition: transform 0.4s var(--ease); }

.v4-steps { list-style: none; margin: 0; padding: 14px 18px 20px; overflow-y: auto; max-height: 340px; }
.v4-step { display: flex; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; opacity: 0.45; transition: opacity 0.3s, background 0.3s, border-color 0.3s; }
.v4-step > div { min-width: 0; }
.v4-step b { display: block; font-size: var(--t-small); font-weight: 700; color: var(--white); overflow-wrap: anywhere; }
.v4-step span:not(.v4-dot) { display: block; font-size: var(--t-meta); color: var(--gray); line-height: 1.45; margin-top: 3px; }
.v4-dot { flex: 0 0 auto; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: rgba(255,255,255,0.16); transition: background 0.3s, box-shadow 0.3s; }
.v4-step.done { opacity: 0.75; }
.v4-step.done .v4-dot { background: var(--yellow-dim); }
.v4-step.on { opacity: 1; background: rgba(245,197,24,0.06); border-color: var(--border-hover); }
.v4-step.on .v4-dot { background: var(--yellow); box-shadow: 0 0 0 4px rgba(245,197,24,0.15); }
.v4-step.on b { color: var(--yellow); }
.v4-step[data-k="key"].on { background: rgba(245,197,24,0.1); }
.v4-step[data-k="warn"].on .v4-dot { background: var(--warn); box-shadow: 0 0 0 4px var(--warn-glow); }
.v4-step[data-k="err"].on .v4-dot { background: var(--err); box-shadow: 0 0 0 4px var(--err-glow); }
.v4-step[data-k="ok"].on .v4-dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-glow); }

/* ── Карточка сервиса ── */
.v4-info { position: relative; padding: 22px 26px; background: var(--dark-alt); border-top: 1px solid var(--border); }
.v4-info-x { position: absolute; top: 12px; right: 14px; display: flex; background: none; border: 0; color: var(--gray-dim); cursor: pointer; padding: 6px 8px; }
.v4-info-x:hover { color: var(--yellow); }
.v4-info-t { font-size: var(--t-title); font-weight: 800; color: var(--yellow); margin-bottom: 6px; }
.v4-info p { color: var(--gray); font-size: var(--t-body); max-width: 780px; }
.v4-info-p { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.v4-info-p span { font-size: var(--t-meta); font-weight: 600; color: var(--white); background: rgba(245,197,24,0.07); border: 1px solid var(--border-hover); border-radius: 99px; padding: 5px 12px; }

/* ── Подвал: чеклист + вопросы ── */
.v4-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.v4-foot > div { background: var(--surface); padding: 26px 28px; min-width: 0; }
.v4-foot li { overflow-wrap: anywhere; }
.v4-foot-h { font-size: var(--t-meta); font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--gray-dim); margin-bottom: 14px; }
.v4-foot ul { list-style: none; display: grid; gap: 9px; }
.v4-foot li { position: relative; padding-left: 26px; font-size: var(--t-body); color: var(--gray); line-height: 1.5; }
.v4-foot li b { color: var(--white); font-weight: 700; }
/* Маркеры двух списков — рисованные иконки в том же весе, что весь набор.
   Было content: '✓' и content: '?' — начертание Inter на месте иконки: вес
   маркера задавал font-weight, и ни с одной иконкой страницы он не сходился.
   Рисуем маской, чтобы цвет по-прежнему приходил из color. */
.v4-checks li::before,
.v4-qs li::before {
  content: '';
  position: absolute;
  left: 0;
  /* середина первой строки: строка 1.5em, иконка 16px */
  top: calc((1.5em - 16px) / 2);
  width: 16px;
  height: 16px;
  background: var(--yellow);
  -webkit-mask: var(--marker) center/contain no-repeat;
          mask: var(--marker) center/contain no-repeat;
}
.v4-checks li::before { --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.85' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.v4-qs li::before { --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E"); }

@media (max-width: 900px) {
  .v4-body { grid-template-columns: minmax(0, 1fr); }
  .v4-foot { grid-template-columns: minmax(0, 1fr); }
  .v4-steps { max-height: 260px; }
  .v4-top { padding: 26px 20px 22px; }
  .v4-foot > div { padding: 22px 20px; }
  .v4-tab { min-width: 132px; }
}
@media (max-width: 768px) {
  /* Схему не сжимаем до нечитаемости — даём горизонтальную прокрутку */
  .v4-stage { padding: 16px 0 4px; }
  .v4-canvas { overflow-x: auto; padding: 0 16px 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .v4-canvas svg { min-width: 640px; }
  .v4-hint::after { content: ' · схема листается вбок'; }
}

/* ── Пет-проект на телефоне ── */
@media (max-width: 560px) {
  .v4 { border-radius: var(--radius-sm); }
  .v4-top { padding: 22px 16px 18px; }
  .v4-top h3 { font-size: var(--t-title); margin: 12px 0 8px; }
  .v4-top p { font-size: var(--t-small); line-height: 1.6; }
  .v4-badge { font-size: var(--t-label); letter-spacing: 1px; padding: 5px 11px; }
  .v4-stack { gap: 6px; margin-top: 16px; }
  .v4-stack span { font-size: var(--t-label); padding: 5px 9px; gap: 5px; }
  .v4-stack img { height: 13px; width: auto; }

  .v4-tabs { scroll-snap-type: x proximity; }
  .v4-tab { min-width: 124px; padding: 11px 13px; scroll-snap-align: start; }
  .v4-tab b { font-size: var(--t-small); }
  .v4-tab i { font-size: var(--t-label); line-height: 1.3; }

  .v4-stage { padding: 12px 0 4px; }
  .v4-canvas svg { min-width: 560px; }
  .v4-hint { font-size: var(--t-label); padding: 4px 12px 10px; }

  .v4-player { padding: 14px 14px 0; }
  .v4-play { font-size: var(--t-small); padding: 12px 14px; }
  .v4-steps { padding: 12px 14px 16px; max-height: 232px; }
  .v4-step { padding: 9px 10px; gap: 10px; }
  .v4-step b { font-size: var(--t-meta); }
  .v4-step span:not(.v4-dot) { font-size: var(--t-meta); }

  .v4-info { padding: 20px 16px 18px; }
  .v4-info-x { top: 8px; right: 8px; }
  .v4-info-t { font-size: var(--t-body); padding-right: 28px; }
  .v4-info p { font-size: var(--t-small); }
  .v4-info-p { gap: 6px; margin-top: 12px; }
  .v4-info-p span { font-size: var(--t-label); padding: 4px 10px; }

  .v4-foot > div { padding: 20px 16px; }
  .v4-foot li { font-size: var(--t-small); padding-left: 22px; }
}

/* Логотипы стека в артефакте v4 */
.v4-stack span { display: inline-flex; align-items: center; gap: 7px; }
.v4-stack img { display: block; opacity: 0.95; }
.v4-n-logo { opacity: 0.9; transition: opacity 0.3s; }
.v4-node.on .v4-n-logo { opacity: 1; }
.v4-info-t { display: flex; align-items: center; gap: 9px; }

/* ══════ УМЕНЬШЕННАЯ АНИМАЦИЯ ══════ */
/* Не «выключить всё», а убрать перемещение и бесконечные циклы, оставив
   прозрачность, цвет и отклики — то, что сообщает о состоянии. Появление
   секций становится мгновенным, потому что содержимое важнее входа. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Вход героя: без выезда снизу, но с проявлением. */
  #hero h1, #hero .subtitle, .hero-cta, .hero-stats, .hero-proof {
    animation-name: fade-in;
  }

  /* Бесконечные циклы не нужны никому, кто просил их убрать. */
  #hero::before,
  #hero.in-view::before,
  .v4-edge.on .v4-e-flow {
    animation: none;
  }

  /* Параллакс не запускается (см. js/ui.js) — на всякий случай сбрасываем. */
  .mesh-deco { transform: none !important; }

  /* Липкая кнопка и всплывашки: меняются мгновенно, но состояние читается. */
  .cta-bar { transition: none; }
  .lbx-fig, .pbx-doc, .rvx-card { transition: opacity var(--duration) var(--ease); transform: none; }

  /* Смена офферов на стене выключена в js/main.js; переход здесь всё равно
     снимаем — кнопка «Показать все» перестраивает стену мгновенно. */
  .offers-grid > li { transition: none; }

  /* Аккордеоны раскрываются сразу: важен ответ, а не его выезд. */
  .sprint-body, .faq-a { transition: none; }

  /* Подъёмы карточек и увеличение кнопок — это движение ради движения. */
  .card:hover, .rm-card:hover, .offer-card:hover, .rvW-card:hover,
  .cnav button:hover, .shot-arrow:hover, .awaits-salary:hover {
    transform: none;
  }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}